|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "4ec4747a9f4f7d194248ea29903ae165",
|
|
|
"translation_date": "2025-08-30T19:05:02+00:00",
|
|
|
"source_file": "3-Data-Visualization/13-meaningful-visualizations/README.md",
|
|
|
"language_code": "sr"
|
|
|
}
|
|
|
-->
|
|
|
# Прављење смислених визуализација
|
|
|
|
|
|
| ](../../sketchnotes/13-MeaningfulViz.png)|
|
|
|
|:---:|
|
|
|
| Смислене визуализације - _Скетч од [@nitya](https://twitter.com/nitya)_ |
|
|
|
|
|
|
> "Ако довољно дуго мучите податке, признаће било шта" -- [Роналд Коуз](https://en.wikiquote.org/wiki/Ronald_Coase)
|
|
|
|
|
|
Једна од основних вештина дата научника је способност да креира смислену визуализацију података која помаже у одговарању на питања која имате. Пре него што визуализујете своје податке, потребно је да их очистите и припремите, као што сте то радили у претходним лекцијама. Након тога, можете почети да одлучујете како најбоље да представите податке.
|
|
|
|
|
|
У овој лекцији, прегледаћете:
|
|
|
|
|
|
1. Како изабрати прави тип графикона
|
|
|
2. Како избегавати обмањујуће графиконе
|
|
|
3. Како радити са бојама
|
|
|
4. Како стилизовати графиконе ради читљивости
|
|
|
5. Како направити анимиране или 3Д графиконе
|
|
|
6. Како направити креативну визуализацију
|
|
|
|
|
|
## [Квиз пре лекције](https://purple-hill-04aebfb03.1.azurestaticapps.net/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) посвећен 'лошим корелацијама' који приказује 'чињенице' које корелирају ствари попут стопе развода у Мејну и потрошње маргарина. Реддит група такође сакупља [ружне употребе](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) нуди 3Д графиконе, ако ваши подаци то подржавају. Софистициране визуализације података могу се произвести коришћењем `mpl_toolkits.mplot3d`.
|
|
|
|
|
|
|
|
|
|
|
|
## Анимација и приказ 3Д графикона
|
|
|
|
|
|
Неки од најбољих визуализација података данас су анимирани. Ширли Ву има невероватне примере урађене са D3, као што је '[цветови филмова](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', где је сваки цвет визуализација филма. Још један пример за Guardian је 'бусед оут', интерактивно искуство које комбинује визуализације са Greensock и D3 плус формат чланка са скроловањем како би приказао како Њујорк решава проблем бескућника тако што их шаље ван града.
|
|
|
|
|
|
|
|
|
|
|
|
> "Бусед Оут: Како Америка премешта своје бескућнике" из [Guardian-а](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study). Визуализације од Надие Бремер и Ширли Ву
|
|
|
|
|
|
Иако ова лекција није довољна да детаљно научи ове моћне библиотеке за визуализацију, пробајте D3 у Vue.js апликацији користећи библиотеку за приказ визуализације књиге "Опасне везе" као анимиране друштвене мреже.
|
|
|
|
|
|
> "Опасне везе" је епистоларни роман, или роман представљен као серија писама. Написан 1782. године од стране Шодерлоа де Лаклоа, прича о злобним, морално банкротираним друштвеним маневрима двају супарничких протагониста француске аристократије крајем 18. века, Виконта де Валмона и Маркизе де Мертје. Оба доживљавају свој крај, али не без наношења велике друштвене штете. Роман се одвија као серија писама написаних разним људима у њиховим круговима, планирајући освету или једноставно правећи проблеме. Направите визуализацију ових писама како бисте открили главне фигуре нарације, визуелно.
|
|
|
|
|
|
Завршићете веб апликацију која ће приказати анимирани приказ ове друштвене мреже. Користи библиотеку која је направљена за креирање [визуализације мреже](https://github.com/emiliorizzo/vue-d3-network) користећи Vue.js и D3. Када апликација ради, можете померати чворове по екрану како бисте прераспоредили податке.
|
|
|
|
|
|
|
|
|
|
|
|
## Пројекат: Направите графикон за приказ мреже користећи D3.js
|
|
|
|
|
|
> Овај фолдер лекције укључује фолдер `solution` где можете пронаћи завршени пројекат, за вашу референцу.
|
|
|
|
|
|
1. Пратите упутства у README.md фајлу у корену стартног фолдера. Уверите се да имате NPM и Node.js инсталиране на вашем рачунару пре него што инсталирате зависности пројекта.
|
|
|
|
|
|
2. Отворите фолдер `starter/src`. Открићете фолдер `assets` где можете пронаћи .json фајл са свим писмима из романа, нумерисаним, са 'to' и 'from' анотацијама.
|
|
|
|
|
|
3. Завршите код у `components/Nodes.vue` како бисте омогућили визуализацију. Потражите метод назван `createLinks()` и додајте следећу угњеждену петљу.
|
|
|
|
|
|
Прођите кроз .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) и уживајте у визуализацији!
|
|
|
|
|
|
## 🚀 Изазов
|
|
|
|
|
|
Прошетајте интернетом како бисте открили обмањујуће визуализације. Како аутор обмањује корисника, и да ли је то намерно? Покушајте да исправите визуализације како би изгледале онако како би требало.
|
|
|
|
|
|
## [Квиз после лекције](https://purple-hill-04aebfb03.1.azurestaticapps.net/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). Иако се трудимо да обезбедимо тачност, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода. |
