You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
21 KiB
156 lines
21 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "cfb068050337a36e348debaa502a24fa",
|
|
"translation_date": "2025-09-06T08:14:21+00:00",
|
|
"source_file": "3-Data-Visualization/13-meaningful-visualizations/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਮਾਨਵਪ੍ਰਦ ਦ੍ਰਿਸ਼ੀਕਰਨ ਬਣਾਉਣਾ
|
|
|
|
|![ [(@sketchthedocs)] ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਸਕੈਚਨੋਟ](https://sketchthedocs.dev) ](../../sketchnotes/13-MeaningfulViz.png)|
|
|
|:---:|
|
|
| ਮਾਨਵਪ੍ਰਦ ਦ੍ਰਿਸ਼ੀਕਰਨ - _[@nitya](https://twitter.com/nitya) ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਸਕੈਚਨੋਟ_ |
|
|
|
|
> "ਜੇ ਤੁਸੀਂ ਡਾਟਾ ਨੂੰ ਕਾਫ਼ੀ ਸਮੇਂ ਤੱਕ ਤੰਗ ਕਰੋ, ਤਾਂ ਇਹ ਕੁਝ ਵੀ ਕਬੂਲ ਕਰ ਲਵੇਗਾ" -- [ਰੋਨਾਲਡ ਕੋਜ਼](https://en.wikiquote.org/wiki/Ronald_Coase)
|
|
|
|
ਡਾਟਾ ਸਾਇੰਟਿਸਟ ਦੀ ਇੱਕ ਮੁੱਖ ਕੌਸ਼ਲ ਇਹ ਹੈ ਕਿ ਉਹ ਅਜਿਹੇ ਦ੍ਰਿਸ਼ੀਕਰਨ ਬਣਾਉਣ ਦੀ ਯੋਗਤਾ ਰੱਖਦਾ ਹੈ ਜੋ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ੀਕਰਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਪਵੇਗਾ ਕਿ ਇਹ ਸਾਫ਼ ਅਤੇ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਤੁਸੀਂ ਪਿਛਲੇ ਪਾਠਾਂ ਵਿੱਚ ਕੀਤਾ ਸੀ। ਇਸ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਇਹ ਫੈਸਲਾ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਡਾਟਾ ਨੂੰ ਕਿਵੇਂ ਪੇਸ਼ ਕਰਨਾ ਹੈ।
|
|
|
|
ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਸਮੀਖਿਆ ਕਰੋਗੇ:
|
|
|
|
1. ਸਹੀ ਚਾਰਟ ਕਿਸਮ ਕਿਵੇਂ ਚੁਣੀ ਜਾਵੇ
|
|
2. ਧੋਖੇਬਾਜ਼ ਚਾਰਟਿੰਗ ਤੋਂ ਕਿਵੇਂ ਬਚਿਆ ਜਾਵੇ
|
|
3. ਰੰਗਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕੀਤਾ ਜਾਵੇ
|
|
4. ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ ਚਾਰਟਾਂ ਨੂੰ ਕਿਵੇਂ ਸਟਾਈਲ ਕੀਤਾ ਜਾਵੇ
|
|
5. ਐਨੀਮੇਟਡ ਜਾਂ 3D ਚਾਰਟਿੰਗ ਹੱਲ ਕਿਵੇਂ ਬਣਾਏ ਜਾਵਨ
|
|
6. ਰਚਨਾਤਮਕ ਦ੍ਰਿਸ਼ੀਕਰਨ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ
|
|
|
|
## [ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/en/ds/quiz/24)
|
|
|
|
## ਸਹੀ ਚਾਰਟ ਕਿਸਮ ਚੁਣੋ
|
|
|
|
ਪਿਛਲੇ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ Matplotlib ਅਤੇ Seaborn ਵਰਗੇ ਚਾਰਟਿੰਗ ਟੂਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਦ੍ਰਿਸ਼ੀਕਰਨ ਬਣਾਉਣ ਦੇ ਪ੍ਰਯੋਗ ਕੀਤੇ। ਆਮ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ [ਸਹੀ ਚਾਰਟ](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) ਦੀ ਚੋਣ ਇਸ ਟੇਬਲ ਦੀ ਮਦਦ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ:
|
|
|
|
| ਤੁਹਾਨੂੰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: | ਤੁਹਾਨੂੰ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ: |
|
|
| -------------------------- | ------------------------------- |
|
|
| ਸਮੇਂ ਦੇ ਨਾਲ ਡਾਟਾ ਰੁਝਾਨ ਦਿਖਾਓ | ਲਾਈਨ |
|
|
| ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰੋ | ਬਾਰ, ਪਾਈ |
|
|
| ਕੁੱਲ ਦੀ ਤੁਲਨਾ ਕਰੋ | ਪਾਈ, ਸਟੈਕਡ ਬਾਰ |
|
|
| ਸੰਬੰਧ ਦਿਖਾਓ | ਸਕੈਟਰ, ਲਾਈਨ, ਫੈਸਿਟ, ਡੁਅਲ ਲਾਈਨ |
|
|
| ਵੰਡ ਦਿਖਾਓ | ਸਕੈਟਰ, ਹਿਸਟੋਗ੍ਰਾਮ, ਬਾਕਸ |
|
|
| ਅਨੁਪਾਤ ਦਿਖਾਓ | ਪਾਈ, ਡੋਨਟ, ਵਾਫਲ |
|
|
|
|
> ✅ ਤੁਹਾਡੇ ਡਾਟਾ ਦੇ ਬਣਤਰ ਦੇ ਅਨੁਸਾਰ, ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਟੈਕਸਟ ਤੋਂ ਨੰਬਰਿਕ ਵਿੱਚ ਬਦਲਣ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ ਤਾਂ ਜੋ ਚਾਰਟ ਇਸਨੂੰ ਸਹਾਰ ਸਕੇ।
|
|
|
|
## ਧੋਖੇਬਾਜ਼ੀ ਤੋਂ ਬਚੋ
|
|
|
|
ਭਾਵੇਂ ਡਾਟਾ ਸਾਇੰਟਿਸਟ ਸਹੀ ਡਾਟਾ ਲਈ ਸਹੀ ਚਾਰਟ ਦੀ ਚੋਣ ਕਰਨ ਵਿੱਚ ਸਾਵਧਾਨ ਹੋਵੇ, ਡਾਟਾ ਨੂੰ ਅਕਸਰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਪੇਸ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਸੱਚਾਈ ਨੂੰ ਝੁਠਲਾ ਦੇਵੇ। ਧੋਖੇਬਾਜ਼ ਚਾਰਟਾਂ ਅਤੇ ਇਨਫੋਗ੍ਰਾਫਿਕਸ ਦੇ ਕਈ ਉਦਾਹਰਨ ਹਨ!
|
|
|
|
[](https://www.youtube.com/watch?v=oX74Nge8Wkw "ਹਾਊ ਚਾਰਟਸ ਲਾਈ")
|
|
|
|
> 🎥 ਉਪਰੋਕਤ ਚਿੱਤਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਧੋਖੇਬਾਜ਼ ਚਾਰਟਾਂ ਬਾਰੇ ਕਾਨਫਰੰਸ ਟਾਕ ਦੇਖਣ ਲਈ
|
|
|
|
ਇਹ ਚਾਰਟ X ਅਕਸ ਨੂੰ ਉਲਟਾ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਸੱਚਾਈ ਦੇ ਵਿਰੁੱਧ ਦਿਖਾਇਆ ਜਾ ਸਕੇ:
|
|
|
|
|
|
|
|
[ਇਹ ਚਾਰਟ](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) ਹੋਰ ਵੀ ਧੋਖੇਬਾਜ਼ ਹੈ, ਕਿਉਂਕਿ ਅੱਖ ਸੱਜੇ ਪਾਸੇ ਖਿੱਚੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਨਤੀਜਾ ਕੱਢਿਆ ਜਾ ਸਕੇ ਕਿ ਸਮੇਂ ਦੇ ਨਾਲ COVID ਕੇਸਾਂ ਵਿੱਚ ਕਮੀ ਆਈ ਹੈ। ਹਾਲਾਂਕਿ, ਜੇ ਤੁਸੀਂ ਮਿਤੀਆਂ ਨੂੰ ਧਿਆਨ ਨਾਲ ਦੇਖੋ, ਤਾਂ ਤੁਸੀਂ ਪਤਾ ਲਗਾਓਗੇ ਕਿ ਇਹਨਾਂ ਨੂੰ ਧੋਖੇਬਾਜ਼ੀ ਨਾਲ ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
|
|
|
|
|
|
|
|
ਇਹ ਮਸ਼ਹੂਰ ਉਦਾਹਰਨ ਰੰਗ ਅਤੇ ਉਲਟੇ Y ਅਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਧੋਖੇਬਾਜ਼ੀ ਲਈ: ਬਜਾਏ ਇਸਦੇ ਕਿ ਗਨ ਡੈਥਸ ਬਾਅਦ ਵਧੀਆਂ, ਅੱਖ ਨੂੰ ਧੋਖਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਵਿਰੋਧੀ ਸੱਚ ਹੈ:
|
|
|
|
|
|
|
|
ਇਹ ਅਜੀਬ ਚਾਰਟ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਅਨੁਪਾਤ ਨੂੰ ਕਿਵੇਂ ਮਜ਼ਾਕੀਆ ਤਰੀਕੇ ਨਾਲ ਮੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ:
|
|
|
|
|
|
|
|
ਅਤੁਲਨੀਆ ਦੀ ਤੁਲਨਾ ਕਰਨਾ ਇੱਕ ਹੋਰ ਧੋਖੇਬਾਜ਼ ਚਾਲ ਹੈ। [ਇੱਕ ਸ਼ਾਨਦਾਰ ਵੈਬਸਾਈਟ](https://tylervigen.com/spurious-correlations) 'ਸਪੁਰਿਅਸ ਕੋਰਲੇਸ਼ਨ' ਬਾਰੇ 'ਤੱਥ' ਦਿਖਾਉਂਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਮੈਨ ਵਿੱਚ ਤਲਾਕ ਦਰ ਅਤੇ ਮਾਰਗਰੀਨ ਦੀ ਖਪਤ। ਇੱਕ Reddit ਗਰੁੱਪ ਵੀ [ਡਾਟਾ ਦੀ ਬਦਸੂਰਤ ਵਰਤੋਂ](https://www.reddit.com/r/dataisugly/top/?t=all) ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ।
|
|
|
|
ਇਹ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਅੱਖ ਨੂੰ ਧੋਖੇਬਾਜ਼ ਚਾਰਟਾਂ ਦੁਆਰਾ ਕਿਵੇਂ ਆਸਾਨੀ ਨਾਲ ਧੋਖਾ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਭਾਵੇਂ ਡਾਟਾ ਸਾਇੰਟਿਸਟ ਦੀ ਨੀਅਤ ਚੰਗੀ ਹੋਵੇ, ਖਰਾਬ ਚਾਰਟ ਦੀ ਚੋਣ, ਜਿਵੇਂ ਕਿ ਬਹੁਤ ਸਾਰੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਵਾਲਾ ਪਾਈ ਚਾਰਟ, ਧੋਖੇਬਾਜ਼ ਹੋ ਸਕਦਾ ਹੈ।
|
|
|
|
## ਰੰਗ
|
|
|
|
ਤੁਸੀਂ 'ਫਲੋਰੀਡਾ ਗਨ ਵਾਇਲੈਂਸ' ਚਾਰਟ ਵਿੱਚ ਦੇਖਿਆ ਕਿ ਰੰਗ ਚਾਰਟਾਂ ਵਿੱਚ ਇੱਕ ਵਾਧੂ ਅਰਥ ਦੇ ਸਕਦੇ ਹਨ, ਖਾਸ ਕਰਕੇ ਉਹ ਜੋ Matplotlib ਅਤੇ Seaborn ਵਰਗੇ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਹੀਂ ਬਣਾਏ ਗਏ। ਜੇ ਤੁਸੀਂ ਹੱਥੋਂ ਚਾਰਟ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ, ਤਾਂ [ਰੰਗ ਸਿਧਾਂਤ](https://colormatters.com/color-and-design/basic-color-theory) ਬਾਰੇ ਕੁਝ ਅਧਿਐਨ ਕਰੋ।
|
|
|
|
> ✅ ਚਾਰਟ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਸਮੇਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਪਹੁੰਚਯੋਗਤਾ ਦ੍ਰਿਸ਼ੀਕਰਨ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਹلو ਹੈ। ਤੁਹਾਡੇ ਕੁਝ ਉਪਭੋਗਤਾ ਰੰਗਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਨਹੀਂ ਦੇਖ ਸਕਦੇ - ਕੀ ਤੁਹਾਡਾ ਚਾਰਟ ਵਿਜ਼ੂਅਲ ਇਮਪੇਅਰਮੈਂਟ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਚੰਗਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ?
|
|
|
|
ਚਾਰਟ ਲਈ ਰੰਗ ਚੁਣਦੇ ਸਮੇਂ ਸਾਵਧਾਨ ਰਹੋ, ਕਿਉਂਕਿ ਰੰਗ ਅਜਿਹਾ ਅਰਥ ਦੇ ਸਕਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ। 'ਹਾਈਟ' ਚਾਰਟ ਵਿੱਚ 'ਪਿੰਕ ਲੇਡੀਜ਼' ਇੱਕ ਵਿਸ਼ੇਸ਼ 'ਮਹਿਲਾ' ਅਰਥ ਦਿੰਦੇ ਹਨ ਜੋ ਚਾਰਟ ਦੀ ਅਜੀਬਤਾ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ।
|
|
|
|
ਜਦੋਂ ਕਿ [ਰੰਗ ਦਾ ਅਰਥ](https://colormatters.com/color-symbolism/the-meanings-of-colors) ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਇਹਨਾਂ ਦੇ ਸ਼ੇਡ ਦੇ ਅਨੁਸਾਰ ਬਦਲ ਸਕਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਰੰਗ ਦੇ ਅਰਥ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:
|
|
|
|
| ਰੰਗ | ਅਰਥ |
|
|
| ------ | ------------------- |
|
|
| ਲਾਲ | ਸ਼ਕਤੀ |
|
|
| ਨੀਲਾ | ਭਰੋਸਾ, ਵਫ਼ਾਦਾਰੀ |
|
|
| ਪੀਲਾ | ਖੁਸ਼ੀ, ਸਾਵਧਾਨੀ |
|
|
| ਹਰਾ | ਪਰਿਆਵਰਨ, ਕਿਸਮਤ, ਈਰਖਾ |
|
|
| ਜਾਮਨੀ | ਖੁਸ਼ੀ |
|
|
| ਸੰਤਰੀ | ਚਮਕਦਾਰ |
|
|
|
|
ਜੇ ਤੁਹਾਨੂੰ ਕਸਟਮ ਰੰਗਾਂ ਨਾਲ ਚਾਰਟ ਬਣਾਉਣ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਚਾਰਟ ਪਹੁੰਚਯੋਗ ਹਨ ਅਤੇ ਤੁਸੀਂ ਚੁਣਿਆ ਰੰਗ ਉਸ ਅਰਥ ਨਾਲ ਮਿਲਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ।
|
|
|
|
## ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ ਚਾਰਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ
|
|
|
|
ਚਾਰਟ ਮਾਨਵਪ੍ਰਦ ਨਹੀਂ ਹੁੰਦੇ ਜੇ ਉਹ ਪੜ੍ਹਨਯੋਗ ਨਹੀਂ ਹੁੰਦੇ! ਆਪਣੇ ਚਾਰਟ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਆਪਣੇ ਡਾਟਾ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਮਾਪਣ ਲਈ ਸਟਾਈਲ ਕਰਨ ਬਾਰੇ ਸੋਚਣ ਲਈ ਸਮਾਂ ਲਓ। ਜੇਕਰ ਇੱਕ ਵੈਰੀਏਬਲ (ਜਿਵੇਂ ਕਿ ਸਾਰੇ 50 ਰਾਜ) ਦਿਖਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ Y ਅਕਸ 'ਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਵਰਟਿਕਲ ਦਿਖਾਓ ਜੇਕਰ ਸੰਭਵ ਹੋ ਤਾਂ ਜਿਵੇਂ ਕਿ ਹੌਰਿਜ਼ੋਂਟਲ-ਸਕ੍ਰੋਲਿੰਗ ਚਾਰਟ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ।
|
|
|
|
ਆਪਣੇ ਅਕਸਾਂ ਨੂੰ ਲੇਬਲ ਕਰੋ, ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਲੈਜੈਂਡ ਦਿਓ, ਅਤੇ ਡਾਟਾ ਦੀ ਬਿਹਤਰ ਸਮਝ ਲਈ ਟੂਲਟਿਪਸ ਪੇਸ਼ ਕਰੋ।
|
|
|
|
ਜੇ ਤੁਹਾਡਾ ਡਾਟਾ X ਅਕਸ 'ਤੇ ਟੈਕਸਟ ਅਤੇ ਵਿਆਪਕ ਹੈ, ਤਾਂ ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ ਟੈਕਸਟ ਨੂੰ ਝੁਕਾਓ। [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) 3D ਪਲਾਟਿੰਗ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਜੇ ਤੁਹਾਡਾ ਡਾਟਾ ਇਸਨੂੰ ਸਹਾਰਦਾ ਹੈ। 'mpl_toolkits.mplot3d' ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਚ-ਤਕਨੀਕੀ ਦ੍ਰਿਸ਼ੀਕਰਨ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ।
|
|
|
|
|
|
|
|
## ਐਨੀਮੇਸ਼ਨ ਅਤੇ 3D ਚਾਰਟ ਡਿਸਪਲੇਅ
|
|
|
|
ਅੱਜ ਦੇ ਕੁਝ ਸਭ ਤੋਂ ਵਧੀਆ ਡਾਟਾ ਦ੍ਰਿਸ਼ੀਕਰਨ ਐਨੀਮੇਟਡ ਹਨ। Shirley Wu ਨੇ D3 ਨਾਲ ਸ਼ਾਨਦਾਰ ਦ੍ਰਿਸ਼ੀਕਰਨ ਬਣਾਏ ਹਨ, ਜਿਵੇਂ '[ਫਿਲਮ ਫਲਾਵਰਜ਼](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', ਜਿੱਥੇ ਹਰ ਫੁੱਲ ਇੱਕ ਫਿਲਮ ਦਾ ਦ੍ਰਿਸ਼ੀਕਰਨ ਹੈ। Guardian ਲਈ ਇੱਕ ਹੋਰ ਉਦਾਹਰਨ 'bussed out' ਹੈ, ਜੋ ਇੱਕ ਇੰਟਰੈਕਟਿਵ ਅਨੁਭਵ ਹੈ ਜੋ Greensock ਅਤੇ D3 ਨਾਲ ਦ੍ਰਿਸ਼ੀਕਰਨ ਨੂੰ ਜੋੜਦਾ ਹੈ ਅਤੇ NYC ਦੇ ਹੋਮਲੈਸ ਸਮੱਸਿਆ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਸਕ੍ਰੋਲਟੇਲਿੰਗ ਲੇਖ ਫਾਰਮੈਟ ਨੂੰ ਵਰਤਦਾ ਹੈ।
|
|
|
|
|
|
|
|
> "Bussed Out: How America Moves its Homeless" [Guardian](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study) ਤੋਂ। ਦ੍ਰਿਸ਼ੀਕਰਨ Nadieh Bremer & Shirley Wu ਦੁਆਰਾ
|
|
|
|
ਜਦੋਂ ਕਿ ਇਹ ਪਾਠ ਸ਼ਕਤੀਸ਼ਾਲੀ ਦ੍ਰਿਸ਼ੀਕਰਨ ਲਾਇਬ੍ਰੇਰੀਆਂ ਸਿਖਾਉਣ ਲਈ ਗਹਿਰਾਈ ਵਿੱਚ ਜਾਣ ਲਈ ਅਪਰਾਪਤ ਹੈ, Vue.js ਐਪ ਵਿੱਚ D3 ਦੀ ਵਰਤੋਂ ਕਰਕੇ 'Dangerous Liaisons' ਕਿਤਾਬ ਦੇ ਦ੍ਰਿਸ਼ੀਕਰਨ ਨੂੰ ਐਨੀਮੇਟਡ ਸੋਸ਼ਲ ਨੈਟਵਰਕ ਵਜੋਂ ਦਿਖਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
|
|
|
|
> "Les Liaisons Dangereuses" ਇੱਕ ਪੱਤਰਕਾਰੀ ਨਾਵਲ ਹੈ, ਜਾਂ ਪੱਤਰਾਂ ਦੀ ਲੜੀ ਵਜੋਂ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਨਾਵਲ। 1782 ਵਿੱਚ Choderlos de Laclos ਦੁਆਰਾ ਲਿਖਿਆ ਗਿਆ, ਇਹ 18ਵੀਂ ਸਦੀ ਦੇ ਫਰਾਂਸੀਸੀ ਅਰਿਸਟੋਕ੍ਰੇਸੀ ਦੇ ਦੋ ਮੁੱਖ ਪਾਤਰਾਂ Vicomte de Valmont ਅਤੇ Marquise de Merteuil ਦੀ ਕਹਾਣੀ ਦੱਸਦਾ ਹੈ। ਦੋਵੇਂ ਅੰਤ ਵਿੱਚ ਆਪਣੇ ਅੰਤ ਨੂੰ ਪਹੁੰਚਦੇ ਹਨ ਪਰ ਬਹੁਤ ਸਾਰੇ ਸਮਾਜਿਕ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਣ ਤੋਂ ਬਿਨਾਂ ਨਹੀਂ। ਨਾਵਲ ਪੱਤਰਾਂ ਦੀ ਲੜੀ ਵਜੋਂ ਖੁਲ੍ਹਦਾ ਹੈ ਜੋ ਵੱਖ-ਵੱਖ ਲੋਕਾਂ ਨੂੰ ਲਿਖੇ ਜਾਂਦੇ ਹਨ, ਬਦਲਾ ਲੈਣ ਜਾਂ ਸਿਰਫ਼ ਮੁਸ਼ਕਲ ਪੈਦਾ ਕਰਨ ਲਈ ਯੋਜਨਾਵਾਂ ਬਣਾਉਣ ਲਈ। ਇਹ ਪੱਤਰਾਂ ਦੇ ਦ੍ਰਿਸ਼ੀਕਰਨ ਨੂੰ ਬਣਾਓ ਤਾਂ ਜੋ ਕਹਾਣੀ ਦੇ ਮੁੱਖ ਪਾਤਰਾਂ ਨੂੰ ਦ੍ਰਿਸ਼ੀਕਰਤ ਕੀਤਾ ਜਾ ਸਕੇ।
|
|
|
|
ਤੁਸੀਂ ਇੱਕ ਵੈਬ ਐਪ ਪੂਰਾ ਕਰੋਗੇ ਜੋ ਇਸ ਸੋਸ਼ਲ ਨੈਟਵਰਕ ਦਾ ਐਨੀਮੇਟਡ ਦ੍ਰਿਸ਼ੀਕਰਨ ਦਿਖਾਏਗਾ। ਇਹ Vue.js ਅਤੇ D3 ਦੀ ਵਰਤੋਂ ਕਰਕੇ [ਨੈਟਵਰਕ](https://github.com/emiliorizzo/vue-d3-network) ਦਾ ਦ੍ਰਿਸ਼ੀਕਰਨ ਬਣਾਉਣ ਲਈ ਬਣਾਈ ਗਈ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਐਪ ਚੱਲ ਰਿਹਾ ਹੈ, ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਨੋਡਸ ਨੂੰ ਖਿੱਚ ਕੇ ਡਾਟਾ ਨੂੰ ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦੇ ਹੋ।
|
|
|
|
|
|
|
|
## ਪ੍ਰੋਜੈਕਟ: D3.js ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨੈਟਵਰਕ ਦਿਖਾਉਣ ਲਈ ਚਾਰਟ ਬਣਾਓ
|
|
|
|
> ਇਸ ਪਾਠ ਫੋਲਡਰ ਵਿੱਚ ਇੱਕ `solution` ਫੋਲਡਰ ਸ਼ਾਮਲ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਪੂਰਾ ਕੀਤਾ ਪ੍ਰੋਜੈਕਟ ਆਪਣੇ ਹਵਾਲੇ ਲਈ ਪਾ ਸਕਦੇ ਹੋ।
|
|
|
|
1. `starter` ਫੋਲਡਰ ਦੇ ਰੂਟ ਵਿੱਚ README.md ਫਾਈਲ ਵਿੱਚ ਦਿੱਤੇ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ NPM ਅਤੇ Node.js ਚੱਲ ਰਹੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਡਿਪੈਂਡੈਂਸੀਜ਼ ਨੂੰ ਇੰਸਟਾਲ ਕਰਦੇ ਹੋ।
|
|
|
|
2. `starter/src` ਫੋਲਡਰ ਖੋਲ੍ਹੋ। ਤੁਸੀਂ ਇੱਕ `assets` ਫੋਲਡਰ ਪਾਓਗੇ ਜਿੱਥੇ ਤੁਹਾਨੂੰ .json ਫਾਈਲ ਮਿਲੇਗੀ ਜਿਸ ਵਿੱਚ ਨਾਵਲ ਦੇ ਸਾਰੇ ਪੱਤਰ ਹਨ, ਗਿਣਤੀਵਾਰ, 'to' ਅਤੇ 'from' ਐਨੋਟੇਸ਼ਨ ਦੇ ਨਾਲ।
|
|
|
|
3. `components/Nodes.vue` ਵਿੱਚ ਕੋਡ ਪੂਰਾ ਕਰੋ ਤਾਂ ਜੋ ਦ੍ਰਿਸ਼ੀਕਰਨ ਸੰਭਵ ਹੋ ਸਕੇ। `createLinks()` ਨਾਮਕ ਵਿਧੀ ਨੂੰ ਲੱਭੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤਾ nested loop ਸ਼ਾਮਲ ਕਰੋ।
|
|
|
|
.json ਆਬਜੈਕਟ ਵਿੱਚ ਲੂਪ ਕਰੋ ਤਾਂ ਜੋ ਪੱਤਰਾਂ ਲਈ 'to' ਅਤੇ 'from' ਡਾਟਾ ਕੈਪਚਰ ਕੀਤਾ ਜਾ ਸਕੇ ਅਤੇ `links` ਆਬਜੈਕਟ ਬਣਾਇਆ ਜਾ ਸਕੇ ਤਾਂ ਜੋ ਦ੍ਰਿਸ਼ੀਕਰਨ ਲਾਇਬ੍ਰੇਰੀ ਇਸਨੂੰ ਖਪਾ ਸਕੇ:
|
|
|
|
```javascript
|
|
//loop through letters
|
|
let f = 0;
|
|
let t = 0;
|
|
for (var i = 0; i < letters.length; i++) {
|
|
for (var j = 0; j < characters.length; j++) {
|
|
|
|
if (characters[j] == letters[i].from) {
|
|
f = j;
|
|
}
|
|
if (characters[j] == letters[i].to) {
|
|
t = j;
|
|
}
|
|
}
|
|
this.links.push({ sid: f, tid: t });
|
|
}
|
|
```
|
|
|
|
ਆਪਣੇ ਟਰਮੀਨਲ ਤੋਂ ਐਪ ਚਲਾਓ (npm run serve) ਅਤੇ ਦ੍ਰ
|
|
|
|
---
|
|
|
|
**ਅਸਵੀਕਾਰਨਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਨਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |