|
|
6 months ago | |
|---|---|---|
| .. | ||
| README.md | 6 months ago | |
README.md
அர்த்தமுள்ள காட்சிப்படுத்தல்கள் உருவாக்குதல்
![]() |
|---|
| அர்த்தமுள்ள காட்சிப்படுத்தல்கள் - @nitya என்பவரின் ஸ்கெட்ச் நோட் |
"நீங்கள் தரவுகளை போதுமான அளவு சித்ரவதை செய்தால், அது எதற்கும் ஒப்புக்கொள்ளும்" -- ரொனால்ட் கோஸ்
ஒரு தரவியல் விஞ்ஞானியின் அடிப்படை திறன்களில் ஒன்றாக, நீங்கள் கொண்டிருக்கும் கேள்விகளுக்கு பதிலளிக்க உதவும் அர்த்தமுள்ள தரவுக் காட்சிப்படுத்தலை உருவாக்கும் திறன் உள்ளது. உங்கள் தரவுகளை காட்சிப்படுத்துவதற்கு முன், நீங்கள் அதை சுத்தம் செய்து தயாராக வைத்திருக்க வேண்டும், இதை நீங்கள் முந்தைய பாடங்களில் செய்தீர்கள். அதற்குப் பிறகு, தரவுகளை எவ்வாறு சிறந்த முறையில் வழங்குவது என்பதைத் தீர்மானிக்கத் தொடங்கலாம்.
இந்தப் பாடத்தில், நீங்கள் பின்வருவனவற்றைப் பார்வையிடுவீர்கள்:
- சரியான வரைபட வகையைத் தேர்ந்தெடுப்பது எப்படி
- தவறான வரைபடங்களைத் தவிர்ப்பது எப்படி
- நிறங்களை எவ்வாறு கையாள்வது
- உங்கள் வரைபடங்களை வாசிக்க எளிதாக ஸ்டைல் செய்வது எப்படி
- அனிமேஷன் அல்லது 3D வரைபட தீர்வுகளை உருவாக்குவது எப்படி
- படைப்பாற்றல் காட்சிப்படுத்தலை உருவாக்குவது எப்படி
பாடத்துக்கு முந்தைய வினாடி வினா
சரியான வரைபட வகையைத் தேர்ந்தெடுங்கள்
முந்தைய பாடங்களில், நீங்கள் Matplotlib மற்றும் Seaborn போன்ற கருவிகளைப் பயன்படுத்தி பல்வேறு சுவாரஸ்யமான தரவுக் காட்சிப்படுத்தல்களை உருவாக்க முயற்சித்தீர்கள். பொதுவாக, நீங்கள் கேட்கும் கேள்விக்கான சரியான வரைபடத்தை இந்த அட்டவணையைப் பயன்படுத்தி தேர்ந்தெடுக்கலாம்:
| நீங்கள் செய்ய வேண்டியது: | நீங்கள் பயன்படுத்த வேண்டியது: |
|---|---|
| காலத்தின் ஓட்டத்தில் தரவுப் போக்குகளை காட்ட | கோடு |
| பிரிவுகளை ஒப்பிடுங்கள் | பட்டை, வட்டம் |
| மொத்தங்களை ஒப்பிடுங்கள் | வட்டம், அடுக்கப்பட்ட பட்டை |
| உறவுகளை காட்டுங்கள் | புள்ளி, கோடு, முகம், இரட்டை கோடு |
| விநியோகங்களை காட்டுங்கள் | புள்ளி, வரலாறு வரைபடம், பெட்டி |
| விகிதங்களை காட்டுங்கள் | வட்டம், டோனட், வாஃபிள் |
✅ உங்கள் தரவின் அமைப்பைப் பொறுத்து, ஒரு குறிப்பிட்ட வரைபடத்தை ஆதரிக்க, அதை உரையிலிருந்து எண் வடிவமாக மாற்ற வேண்டியிருக்கும்.
மோசடிகளைத் தவிர்க்கவும்
ஒரு தரவியல் விஞ்ஞானி சரியான தரவுக்கான சரியான வரைபடத்தை தேர்ந்தெடுக்க கவனமாக இருந்தாலும், ஒரு கருத்தை நிரூபிக்க, பெரும்பாலும் தரவின் உண்மையை பாதிக்கக்கூடிய வகையில், தரவுகளை காட்ட பல வழிகள் உள்ளன. மோசடி வரைபடங்கள் மற்றும் தகவல்படங்களின் பல உதாரணங்கள் உள்ளன!
🎥 மோசடி வரைபடங்கள் பற்றிய கருத்தரங்க உரையைப் பார்க்க மேலே உள்ள படத்தை கிளிக் செய்யவும்
இந்த வரைபடம் X அச்சை மாற்றி, தேதியின் அடிப்படையில் உண்மைக்கு மாறாக காட்டுகிறது:
இந்த வரைபடம் இன்னும் மோசமாக உள்ளது, ஏனெனில் பார்வை வலப்புறமாக ஈர்க்கப்படுகிறது, இது காலப்போக்கில் COVID வழக்குகள் குறைந்துவிட்டன என்று முடிவு செய்யும். உண்மையில், தேதிகளை நெருங்கிப் பார்த்தால், அந்த மோசமான இறக்குமுகப் போக்கை உருவாக்க அவற்றை மறுசீரமைத்துள்ளீர்கள் என்பதை நீங்கள் காணலாம்.
இந்த பிரபலமான உதாரணம் நிறத்தையும் ஒரு மாறிய Y அச்சையும் பயன்படுத்தி மோசடியில் ஈடுபடுகிறது: துப்பாக்கி மரணங்கள் திடீரென அதிகரித்தன என்பதை விட, கண் மாறாக உணர்த்தப்படுகிறது:
இந்த விசித்திரமான வரைபடம் விகிதத்தை எப்படி மாற்றி அமைக்க முடியும் என்பதை காட்டுகிறது, அது நகைச்சுவையான விளைவாக உள்ளது:
ஒப்பிட முடியாதவற்றை ஒப்பிடுவது இன்னொரு சந்தேகத்திற்குரிய தந்திரமாகும். மெய்னில் விவாகரத்து விகிதம் மற்றும் மார்ஜரின் நுகர்வு போன்றவற்றை ஒப்பிடும் 'தவறான தொடர்புகள்' பற்றிய அற்புதமான இணையதளம் உள்ளது. ஒரு Reddit குழு கூட தரவின் அழகற்ற பயன்பாடுகளை சேகரிக்கிறது.
மோசடி வரைபடங்கள் மூலம் கண் எளிதில் ஏமாற்றப்படுவது எப்படி என்பதைப் புரிந்துகொள்வது முக்கியம். தரவியல் விஞ்ஞானியின் நோக்கம் நல்லது என்றாலும் கூட, ஒரு மோசமான வகை வரைபடத்தைத் தேர்ந்தெடுப்பது, உதாரணமாக, அதிக பிரிவுகளை காட்டும் ஒரு வட்ட வரைபடம் போன்றவை, மோசடியாக இருக்கலாம்.
நிறம்
மேலே உள்ள 'புளோரிடா துப்பாக்கி வன்முறை' வரைபடத்தில், நிறம் வரைபடங்களுக்கு கூடுதல் அர்த்தத்தை வழங்க முடியும் என்பதை நீங்கள் பார்த்தீர்கள், குறிப்பாக ggplot2 மற்றும் RColorBrewer போன்ற நூலகங்களைப் பயன்படுத்தி வடிவமைக்கப்படாதவை. நீங்கள் ஒரு வரைபடத்தை கையால் உருவாக்கினால், நிறக் கோட்பாடு குறித்த சிறு ஆய்வைச் செய்யுங்கள்.
✅ வரைபடங்களை வடிவமைக்கும் போது, காட்சிப்படுத்தலில் அணுகல் முக்கியமான அம்சமாகும் என்பதை நினைவில் கொள்ளுங்கள். உங்கள் பயனர்களில் சிலர் நிறக்குருட்டுத்தன்மையால் பாதிக்கப்படலாம் - உங்கள் வரைபடம் பார்வை குறைபாடுகளுடன் கூடிய பயனர்களுக்கு நன்றாக காட்சியளிக்கிறதா?
உங்கள் வரைபடத்திற்கான நிறங்களைத் தேர்ந்தெடுக்கும் போது கவனமாக இருங்கள், ஏனெனில் நிறம் நீங்கள் எதிர்பாராத அர்த்தத்தை வழங்கக்கூடும். மேலே உள்ள 'உயரம்' வரைபடத்தில் 'பிங்க் லேடீஸ்' ஒரு தனித்துவமான 'பெண்மை' அர்த்தத்தை வழங்குகிறது, இது வரைபடத்தின் விசித்திரத்திற்குச் சேர்க்கிறது.
நிறத்தின் அர்த்தம் உலகின் வெவ்வேறு பகுதிகளில் மாறுபடலாம், மேலும் அவற்றின் நிழலின் படி அர்த்தம் மாறும். பொதுவாக, நிறங்களின் அர்த்தங்கள் பின்வருமாறு உள்ளன:
| நிறம் | அர்த்தம் |
|---|---|
| சிவப்பு | சக்தி |
| நீலம் | நம்பிக்கை, விசுவாசம் |
| மஞ்சள் | மகிழ்ச்சி, எச்சரிக்கை |
| பச்சை | சுற்றுச்சூழல், அதிர்ஷ்டம், பொறாமை |
| ஊதா | மகிழ்ச்சி |
| ஆரஞ்சு | உயிர்ப்புடன் |
உங்கள் வரைபடங்களை தனிப்பயனாக்கப்பட்ட நிறங்களுடன் உருவாக்க வேண்டும் என்றால், உங்கள் வரைபடங்கள் அணுகக்கூடியவை மற்றும் நீங்கள் தெரிவிக்க விரும்பும் அர்த்தத்துடன் நிறம் பொருந்துவதை உறுதிசெய்யுங்கள்.
வாசிக்க எளிதாக உங்கள் வரைபடங்களை ஸ்டைல் செய்யுங்கள்
வரைபடங்கள் வாசிக்க எளிதாக இல்லாவிட்டால் அவை அர்த்தமற்றவை! உங்கள் தரவுடன் நன்றாக பொருந்தும் வகையில் உங்கள் வரைபடத்தின் அகலம் மற்றும் உயரத்தை ஸ்டைல் செய்ய ஒரு நிமிடம் எடுத்துக்கொள்ளுங்கள். ஒரு மாறி (எ.கா., அனைத்து 50 மாநிலங்களும்) காட்டப்பட வேண்டுமெனில், அவற்றை Y அச்சில் செங்குத்தாகக் காட்டவும், இதனால் ஒரு கிடைமட்டமாக சுருட்டும் வரைபடத்தைத் தவிர்க்கலாம்.
உங்கள் அச்சுகளை குறிக்கவும், தேவையானால் ஒரு விளக்கக்குறிப்பை வழங்கவும், தரவின் சிறந்த புரிதலுக்காக கருவி குறிப்புகளை வழங்கவும்.
உங்கள் தரவு உரை மற்றும் விரிவானதாக இருந்தால், X அச்சில் உரையை சிறந்த வாசிப்புக்காக சாய்க்கலாம். plot3D உங்கள் தரவை ஆதரித்தால், 3D வரைபடங்களை வழங்குகிறது. அதிநவீன தரவுக் காட்சிப்படுத்தல்களை இதைப் பயன்படுத்தி உருவாக்கலாம்.
அனிமேஷன் மற்றும் 3D வரைபட காட்சி
இன்றைய சிறந்த தரவுக் காட்சிப்படுத்தல்களில் சில அனிமேஷன்களாக உள்ளன. D3 உடன் ஷிர்லி வூ உருவாக்கிய அற்புதமானவை உள்ளன, உதாரணமாக 'film flowers', இதில் ஒவ்வொரு பூவும் ஒரு திரைப்படத்தின் காட்சிப்படுத்தலாக உள்ளது. 'தி கார்டியன்'க்காக மற்றொரு உதாரணம் 'bussed out', இது காட்சிப்படுத்தல்களுடன் கூடிய ஒரு இடைமுக அனுபவமாகும், இது கிரீன்சாக் மற்றும் D3 உடன் இணைந்து, நியூயார்க் நகரம் தனது வீடற்ற பிரச்சனையை எவ்வாறு கையாளுகிறது என்பதை காட்டுகிறது.
"Bussed Out: How America Moves its Homeless" தி கார்டியன் மூலம். காட்சிப்படுத்தல்கள்: நதீஹ் பிரெமர் & ஷிர்லி வூ
இந்த பாடம் இந்த சக்திவாய்ந்த காட்சிப்படுத்தல் நூலகங்களை கற்றுக்கொள்வதற்கு ஆழமான விளக்கங்களை வழங்க போதுமானதாக இல்லாவிட்டாலும், D3-ஐ Vue.js பயன்பாட்டில் முயற்சிக்கவும், 'Dangerous Liaisons' புத்தகத்தின் காட்சிப்படுத்தலாக ஒரு அனிமேஷன் சமூக வலையமைப்பை உருவாக்கவும் ஒரு நூலகத்தைப் பயன்படுத்தவும்.
"Les Liaisons Dangereuses" என்பது ஒரு கடிதங்களின் தொடர் வடிவில் வழங்கப்படும் நாவல் ஆகும். 1782 ஆம் ஆண்டில் சோடர்லோஸ் டி லாக்லோஸ் எழுதியது, இது 18 ஆம் நூற்றாண்டின் பிரெஞ்சு அரச குடும்பத்தின் இரண்டு பிரதான பாத்திரங்களின் கொடூரமான, நெறிமுறையற்ற சமூக நடவடிக்கைகளைப் பற்றிய கதையைச் சொல்கிறது. இருவரும் இறுதியில் தங்கள் அழிவை சந்திக்கிறார்கள், ஆனால் அதிகளவிலான சமூக சேதத்தை ஏற்படுத்தாமல் இருக்க முடியாது. இந்தக் கதையைப் புரிந்துகொள்ள, இந்தக் கடிதங்களின் காட்சிப்படுத்தலை உருவாக்கவும்.
இந்த சமூக வலையமைப்பின் அனிமேஷன் காட்சியை காட்டும் ஒரு வலை பயன்பாட்டை நீங்கள் முடிக்க வேண்டும். இது Vue.js மற்றும் D3 ஐப் பயன்படுத்தி ஒரு வலையமைப்பின் காட்சியை உருவாக்க ஒரு நூலகத்தைப் பயன்படுத்தி உருவாக்கப்பட்டது. பயன்பாடு இயங்கும்போது, நீங்கள் திரையில் உள்ள நொடுகளை இழுத்து தரவுகளைச் சீரமைக்கலாம்.
திட்டம்: D3.js ஐப் பயன்படுத்தி ஒரு வலையமைப்பை காட்ட ஒரு வரைபடத்தை உருவாக்கவும்
இந்த பாடத்தின் கோப்புறை ஒரு
solutionகோப்புறையை உள்ளடக்கியது, இதில் நீங்கள் குறிப்பிட்ட திட்டத்தை மேற்கொள்ள உதவியாக முடிக்கப்பட்ட திட்டத்தை காணலாம்.
-
Starter கோப்புறையின் மூலத்தில் உள்ள README.md கோப்பில் உள்ள வழிமுறைகளைப் பின்பற்றவும். உங்கள் கணினியில் NPM மற்றும் Node.js இயங்குவதை உறுதிசெய்து, உங்கள் திட்டத்தின் சார்புகளை நிறுவவும்.
-
starter/srcகோப்புறையைத் திறக்கவும். அங்கு ஒரு.jsonகோப்புடன் ஒருassetsகோப்புறையை காணலாம், இதில் அனைத்து கடிதங்களும், எண்களுடன், 'to' மற்றும் 'from' குறிப்பு கொண்டுள்ளது. -
காட்சிப்படுத்தலை செயல்படுத்த
components/Nodes.vueஇல் உள்ள குறியீட்டை முடிக்கவும்.createLinks()எனும் முறைமையைத் தேடவும் மற்றும் பின்வரும் உள்ளமைந்த மடல்களைச் சேர்க்கவும்.
.json பொருளை ஊடுருவி, கடிதங்களுக்கான 'to' மற்றும் 'from' தரவுகளைப் பிடித்து, காட்சிப்படுத்தல் நூலகம் அதை நுகர links பொருளை உருவாக்கவும்:
//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) மற்றும் காட்சிப்படுத்தலை அனுபவிக்கவும்!
🚀 சவால்
இணையத்தில் சுற்றி, மோசடி காட்சிப்படுத்தல்களை கண்டறியுங்கள். ஆசிரியர் பயனரை எப்படி ஏமாற்றுகிறார், அது நோக்கமுடையதா? காட்சிப்படுத்தல்களை சரிசெய்து அவை எப்படி இருக்க வேண்டும் என்பதை காட்ட முயற்சிக்கவும்.
பாடத்திற்குப் பிந்தைய வினாடி வினா
மதிப்பாய்வு & சுயபயிற்சி
மோசடி தரவுக் காட்சிப்படுத்தல் பற்றிய சில கட்டுரைகளைப் படியுங்கள்:
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
வரலாற்று சொத்துகள் மற்றும் பொருட்களுக்கான இந்த சுவாரஸ்யமான காட்சிப்படுத்தல்களைப் பாருங்கள்:
அனிமேஷன் உங்கள் காட்சிப்படுத்தல்களை எவ்வாறு மேம்படுத்த முடியும் என்பதைப் பற்றிய இந்தக் கட்டுரையைப் பாருங்கள்:
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
பணிக்குறிப்பு
உங்கள் சொந்த தனிப்பயன் காட்சிப்படுத்தலை உருவாக்கவும்
குறிப்பு:
இந்த ஆவணம் Co-op Translator என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.








