# அர்த்தமுள்ள காட்சிப்படுத்தல்கள்

|![ Sketchnote by [(@sketchthedocs)](https://sketchthedocs.dev) ](../../sketchnotes/13-MeaningfulViz.png)|
|:---:|
| அர்த்தமுள்ள காட்சிப்படுத்தல்கள் - _Sketchnote by [@nitya](https://twitter.com/nitya)_ |

> "தரவை நீண்ட நேரம் சித்ரவதை செய்தால், அது எதற்கும் ஒப்புக்கொள்ளும்" -- [Ronald Coase](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/) இந்த அட்டவணையைப் பயன்படுத்தி தேர்ந்தெடுக்கலாம்:

| நீங்கள் செய்ய வேண்டியது:       | நீங்கள் பயன்படுத்த வேண்டியது:         |
| -------------------------- | ------------------------------- |
| காலத்தின் ஓரத்தில் தரவின் போக்குகளை காட்ட | கோடு                            |
| பிரிவுகளை ஒப்பிடுங்கள்         | பட்டை, பை                        |
| மொத்தங்களை ஒப்பிடுங்கள்       | பை, அடுக்கப்பட்ட பட்டை                |
| உறவுகளை காட்டுங்கள்           | சிதறல், கோடு, முகப்பு, இரட்டை கோடு     |
| பகிர்வுகளை காட்டுங்கள்         | சிதறல், வரலாறு, பெட்டி               |
| விகிதங்களை காட்டுங்கள்         | பை, டோனட், வாஃபிள்                 |

> ✅ உங்கள் தரவின் அமைப்பைப் பொறுத்து, ஒரு குறிப்பிட்ட வரைபடத்தை ஆதரிக்க, நீங்கள் அதை உரை வடிவிலிருந்து எண் வடிவத்திற்கு மாற்ற வேண்டியிருக்கும்.

## மோசமான காட்சிப்படுத்தல்களைத் தவிர்க்கவும்

ஒரு தரவியல் விஞ்ஞானி சரியான தரவுக்கான சரியான வரைபடத்தைத் தேர்ந்தெடுப்பதில் கவனமாக இருந்தாலும், ஒரு கருத்தை நிரூபிக்க, பெரும்பாலும் தரவின் அடிப்படையை பாதிக்கக்கூடிய வகையில், தரவை காட்சிப்படுத்த பல வழிகள் உள்ளன. மோசமான வரைபடங்கள் மற்றும் தகவல்படங்களின் பல உதாரணங்கள் உள்ளன!

[![How Charts Lie by Alberto Cairo](../../../../translated_images/ta/tornado.9f42168791208f97.webp)](https://www.youtube.com/watch?v=oX74Nge8Wkw "How charts lie")

> 🎥 மோசமான வரைபடங்கள் பற்றிய கருத்தரங்க உரையைப் பார்க்க மேலே உள்ள படத்தை கிளிக் செய்யவும்

இந்த வரைபடம் X அச்சை மாற்றி, தேதியின் அடிப்படையில் உண்மையின் எதிர்மறையை காட்டுகிறது:

![bad chart 1](../../../../translated_images/ta/bad-chart-1.93130f495b748bed.webp)

[இந்த வரைபடம்](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) இன்னும் மோசமானது, ஏனெனில் கண்கள் வலதுபுறமாக இழுக்கப்பட்டு, காலப்போக்கில் COVID வழக்குகள் குறைந்துவிட்டதாக முடிவு செய்யப்படுகிறது. உண்மையில், தேதிகளை நெருக்கமாகப் பார்த்தால், அவை அந்த மோசமான இறக்குமுகத்தை வழங்குவதற்காக மறுசீரமைக்கப்பட்டுள்ளன.

![bad chart 2](../../../../translated_images/ta/bad-chart-2.c20e36dd4e6f617c.webp)

இந்த பிரபலமான உதாரணம் நிறம் மற்றும் Y அச்சை மாற்றி மோசமாக்குகிறது: துப்பாக்கி-friendly சட்டம் நிறைவேற்றப்பட்ட பிறகு துப்பாக்கி மரணங்கள் அதிகரித்தன என்பதை முடிவெடுக்காமல், கண்கள் எதிர்மறையானது உண்மையாக உள்ளது என்று முடிவு செய்ய ஏமாற்றப்படுகிறது:

![bad chart 3](../../../../translated_images/ta/bad-chart-3.6865d0afac4108d7.webp)

இந்த விசித்திரமான வரைபடம் விகிதத்தை எப்படி மாற்றி அமைக்க முடியும் என்பதை நகைச்சுவையான விளைவாகக் காட்டுகிறது:

![bad chart 4](../../../../translated_images/ta/bad-chart-4.68cfdf4011b45447.webp)

ஒப்பிட முடியாதவற்றை ஒப்பிடுவது இன்னொரு shady யுக்தியாகும். 'spurious correlations' பற்றிய [அற்புதமான இணையதளம்](https://tylervigen.com/spurious-correlations) உள்ளது, இது மெய்நிகர் 'facts' களை Maine இல் விவாகரத்து விகிதம் மற்றும் மார்ஜரின் நுகர்வு போன்றவற்றை ஒப்பிடுகிறது. ஒரு Reddit குழு [தரவை மோசமாகப் பயன்படுத்தும்](https://www.reddit.com/r/dataisugly/top/?t=all) உதாரணங்களைச் சேகரிக்கிறது.

மோசமான வரைபடங்கள் மூலம் கண்கள் எளிதில் ஏமாற்றப்படுவது எப்படி என்பதைப் புரிந்துகொள்வது முக்கியம். தரவியல் விஞ்ஞானியின் நோக்கம் நல்லது என்றாலும், பை வரைபடம் போன்ற மோசமான வகை வரைபடத்தைத் தேர்ந்தெடுப்பது, அதிக பிரிவுகளை காட்டுவது போன்றவை மோசமாக இருக்கலாம்.

## நிறம்

மேலே உள்ள 'Florida gun violence' வரைபடத்தில், நிறம், குறிப்பாக Matplotlib மற்றும் Seaborn போன்ற நூலகங்களால் வடிவமைக்கப்படாத வரைபடங்களில், கூடுதல் அர்த்தத்தை வழங்க முடியும் என்பதை நீங்கள் பார்த்தீர்கள். நீங்கள் கையால் ஒரு வரைபடத்தை உருவாக்கினால், [நிறக் கோட்பாடு](https://colormatters.com/color-and-design/basic-color-theory) பற்றி சிறிது படிக்கவும்.

> ✅ வரைபடங்களை வடிவமைக்கும் போது, அணுகல் முக்கியமான அம்சமாகும் என்பதை கவனத்தில் கொள்ளுங்கள். உங்கள் பயனர்கள் சிலர் நிறக்குருட்டு இருக்கலாம் - உங்கள் வரைபடம் பார்வை குறைபாடுகளுடன் உள்ள பயனர்களுக்கு நன்றாக காட்சியளிக்கிறதா?

உங்கள் வரைபடத்திற்கான நிறங்களைத் தேர்ந்தெடுக்கும் போது கவனமாக இருங்கள், ஏனெனில் நிறம் நீங்கள் எதிர்பாராத அர்த்தத்தை வழங்க முடியும். மேலே உள்ள 'height' வரைபடத்தில் 'pink ladies' ஒரு தனித்துவமான 'பெண்மையான' அர்த்தத்தை வழங்குகிறது, இது வரைபடத்தின் விசித்திரத்துக்கு மேலும் சேர்க்கிறது.

[நிறத்தின் அர்த்தம்](https://colormatters.com/color-symbolism/the-meanings-of-colors) உலகின் வெவ்வேறு பகுதிகளில் மாறுபடலாம், மேலும் அவை பொதுவாக அதன் நிழலின் அடிப்படையில் அர்த்தத்தில் மாறும். பொதுவாக, நிறங்களின் அர்த்தங்கள் பின்வருவனவற்றை உள்ளடக்கியவை:

| நிறம்  | அர்த்தம்             |
| ------ | ------------------- |
| சிவப்பு    | சக்தி               |
| நீலம்   | நம்பிக்கை, விசுவாசம்      |
| மஞ்சள் | மகிழ்ச்சி, எச்சரிக்கை  |
| பச்சை | சுற்றுச்சூழல், அதிர்ஷ்டம், பொறாமை |
| ஊதா | மகிழ்ச்சி           |
| ஆரஞ்சு | உயிர்ப்பு            |

நீங்கள் தனிப்பயன் நிறங்களுடன் ஒரு வரைபடத்தை உருவாக்க வேண்டும் என்றால், உங்கள் வரைபடங்கள் அணுகலுக்கு ஏற்றதாகவும், நீங்கள் வழங்க முயற்சிக்கும் அர்த்தத்துடன் உங்கள் நிறம் பொருந்தும் வகையில் உறுதிப்படுத்துங்கள்.

## உங்கள் வரைபடங்களை வாசிக்க எளிதாக வடிவமைக்கவும்

வரைபடங்கள் வாசிக்க முடியாதவையாக இருந்தால் அர்த்தமில்லாதவை! உங்கள் தரவுடன் நன்றாக பொருந்தும் வகையில் உங்கள் வரைபடத்தின் அகலம் மற்றும் உயரத்தை வடிவமைப்பதைப் பரிசீலிக்க ஒரு நிமிடம் எடுத்துக்கொள்ளுங்கள். ஒரு மாறி (எ.கா., அனைத்து 50 மாநிலங்களும்) காட்சியளிக்கப்பட வேண்டும் என்றால், அவற்றை Y அச்சில் செங்குத்தாகக் காட்டவும், இதனால் தட்டையாகச் சறுக்கக்கூடிய வரைபடத்தைத் தவிர்க்கலாம்.

உங்கள் அச்சுகளை லேபிள் செய்யவும், தேவையானால் ஒரு விளக்கக்குறிப்பு வழங்கவும், தரவின் சிறந்த புரிதலுக்கான டூல்டிப்களை வழங்கவும்.

உங்கள் தரவு உரை வடிவிலிருந்தும் X அச்சில் verbose ஆக இருந்தாலும், வாசிக்க எளிதாக உரையை சாய்க்கலாம். [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) உங்கள் தரவை ஆதரிக்குமானால் 3D வரைபடங்களை வழங்குகிறது. `mpl_toolkits.mplot3d` ஐப் பயன்படுத்தி நவீன தரவுக் காட்சிப்படுத்தல்களை உருவாக்கலாம்.

![3d plots](../../../../translated_images/ta/3d.0cec12bcc60f0ce7.webp)

## அனிமேஷன் மற்றும் 3D வரைபட காட்சி

இன்றைய சிறந்த தரவுக் காட்சிப்படுத்தல்கள் சில அனிமேஷன்களாக உள்ளன. Shirley Wu D3 ஐப் பயன்படுத்தி '[film flowers](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)' போன்ற அற்புதமானவற்றை உருவாக்கியுள்ளார், இதில் ஒவ்வொரு பூவும் ஒரு திரைப்படத்தின் காட்சிப்படுத்தலாக உள்ளது. Guardian க்கான மற்றொரு உதாரணம் 'bussed out', Greensock மற்றும் D3 உடன் காட்சிப்படுத்தல்களை இணைக்கும் ஒரு இன்டர்ஆக்டிவ் அனுபவம், மேலும் NYC தனது வீடற்ற பிரச்சினையை நகரத்திலிருந்து மக்களை வெளியேற்றுவதன் மூலம் எப்படி கையாளுகிறது என்பதை காட்ட ஒரு scrollytelling கட்டுரை வடிவத்தை வழங்குகிறது.

![busing](../../../../translated_images/ta/busing.7b9e3b41cd4b981c.webp)

> "Bussed Out: How America Moves its Homeless" from [the Guardian](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study). Visualizations by Nadieh Bremer & Shirley Wu

இந்தப் பாடம் இந்த சக்திவாய்ந்த காட்சிப்படுத்தல் நூலகங்களை கற்பிக்க போதுமான ஆழத்தில் செல்ல முடியாது, D3 ஐ Vue.js பயன்பாட்டில் ஒரு நூலகத்தைப் பயன்படுத்தி 'Dangerous Liaisons' புத்தகத்தின் காட்சிப்படுத்தலை ஒரு அனிமேஷன் சமூக வலையமாகக் காட்ட முயற்சிக்கவும்.

> "Les Liaisons Dangereuses" என்பது ஒரு கடிதங்களின் தொடராக வழங்கப்படும் ஒரு நாவல் ஆகும். 1782 இல் Choderlos de Laclos எழுதியது, இது 18 ஆம் நூற்றாண்டின் இறுதியில் பிரெஞ்சு அரிஸ்டோக்ரசியின் இரண்டு பிரதான கதாநாயகர்களின் தீவிரமான, நெறிமுறையற்ற சமூக நடவடிக்கைகளைப் பற்றிய கதையைச் சொல்கிறது, Vicomte de Valmont மற்றும் Marquise de Merteuil. இருவரும் இறுதியில் தங்கள் அழிவை சந்திக்கிறார்கள், ஆனால் அதிக அளவிலான சமூக சேதத்தை ஏற்படுத்தாமல் இருக்க முடியாது. இந்த நாவல், பழிவாங்க அல்லது சிக்கல்களை உருவாக்க, அவர்களின் வட்டாரங்களில் உள்ள பல்வேறு மக்களுக்கு எழுதப்பட்ட கடிதங்களின் தொடராக வெளிப்படுகிறது. இந்தக் கடிதங்களின் காட்சிப்படுத்தலை உருவாக்கி, கதைசொல்லலின் முக்கியமான பாத்திரங்களை காட்சிப்படுத்த visually.

நீங்கள் இந்த சமூக வலையத்தின் அனிமேஷன் காட்சியை காட்டும் ஒரு வலை பயன்பாட்டை முடிக்க வேண்டும். இது Vue.js மற்றும் D3 ஐப் பயன்படுத்தி ஒரு [வலையத்தின் காட்சியை](https://github.com/emiliorizzo/vue-d3-network) உருவாக்க ஒரு நூலகத்தை உருவாக்கியது. பயன்பாடு இயங்கும்போது, நீங்கள் திரையில் nodes ஐ இழுத்து தரவைச் சுழற்றலாம்.

![liaisons](../../../../translated_images/ta/liaisons.7b440b28f6d07ea4.webp)

## திட்டம்: D3.js ஐப் பயன்படுத்தி ஒரு வலையத்தை காட்டும் வரைபடத்தை உருவாக்கவும்

> இந்த பாடம் கோப்புறை ஒரு `solution` கோப்புறையை உள்ளடக்கியது, இதில் நீங்கள் முடிக்கப்பட்ட திட்டத்தை உங்கள் குறிப்பிற்காகக் காணலாம்.

1. Starter கோப்புறையின் root இல் உள்ள README.md கோப்பில் உள்ள வழிமுறைகளைப் பின்பற்றவும். உங்கள் கணினியில் NPM மற்றும் Node.js இயங்குவதை உறுதிப்படுத்தி, உங்கள் திட்டத்தின் சார்புகளை நிறுவவும்.

2. `starter/src` கோப்புறையைத் திறக்கவும். நீங்கள் ஒரு .json கோப்புடன் ஒரு `assets` கோப்புறையை காண்பீர்கள், இதில் அனைத்து கடிதங்களும், எண்களுடன், 'to' மற்றும் 'from' குறிப்பு கொண்டுள்ளது.

3. `components/Nodes.vue` இல் உள்ள குறியீட்டை முடிக்கவும், காட்சிப்படுத்தலை இயக்கவும். `createLinks()` எனப்படும் முறைமையைத் தேடுங்கள் மற்றும் பின்வரும் nested loop ஐச் சேர்க்கவும்.

.json பொருளை loop செய்து, கடிதங்களுக்கான '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 });
      }
  ```

உங்கள் பயன்பாட்டை terminal (npm run serve) மூலம் இயக்கி, காட்சிப்படுத்தலை அனுபவிக்கவும்!

## 🚀 சவால்

இணையத்தில் சுற்றி மோசமான காட்சிப்படுத்தல்களை கண்டறியுங்கள். ஆசிரியர் பயனரை ஏமாற்றுவது எப்படி, அது நோக்கமுடையதா? காட்சிப்படுத்தல்களை சரிசெய்து அவை எப்படி இருக்க வேண்டும் என்பதை காட்ட முயற்சிக்கவும்.

## [பாடத்திற்குப் பின் வினாடி வினா](https://ff-quizzes.netlify.app/en/ds/quiz/25)

## மதிப்பீடு & சுயபயிற்சி

மோசமான தரவுக் காட்சிப்படுத்தல் பற்றிய சில கட்டுரைகளைப் படிக்கவும்:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

வரலாற்று சொத்துகள் மற்றும் பொருட்களுக்கான இந்த சுவாரஸ்யமான காட்சிப்படுத்தல்களைப் பாருங்கள்:

https://handbook.pubpub.org/

அனிமேஷன் உங்கள் காட்சிப்படுத்தல்களை எப்படி மேம்படுத்த முடியும் என்பதைப் பற்றிய இந்தக் கட்டுரையைப் பாருங்கள்:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

## பணிக்கட்டளை

[உங்கள் சொந்த தனிப்பயன் காட்சிப்படுத்தலை உருவாக்கவும்](assignment.md)

---

**குறிப்பு**:  
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் நோக்கம் துல்லியமாக இருக்க வேண்டும் என்பதுதான், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது துல்லியமின்மைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.