13 KiB

Raw Permalink Blame History

Paggawa ng Makabuluhang Visualisasyon


Makabuluhang Visualisasyon - Sketchnote ni @nitya

"Kung pahihirapan mo ang datos nang matagal, aamin ito ng kahit ano" -- Ronald Coase

Isa sa mga pangunahing kasanayan ng isang data scientist ay ang kakayahang lumikha ng makabuluhang visualisasyon ng datos na tumutulong sagutin ang mga tanong na maaaring mayroon ka. Bago mag-visualize ng iyong datos, kailangan mong tiyakin na ito ay nalinis at naihanda, tulad ng ginawa mo sa mga nakaraang aralin. Pagkatapos nito, maaari ka nang magsimulang magdesisyon kung paano pinakamahusay na ipakita ang datos.

Sa araling ito, iyong susuriin:

Paano pumili ng tamang uri ng tsart
Paano iwasan ang mapanlinlang na tsart
Paano gumamit ng kulay
Paano i-style ang iyong mga tsart para sa mas madaling mabasa
Paano gumawa ng animated o 3D na solusyon sa tsart
Paano gumawa ng malikhaing visualisasyon

Pre-Lecture Quiz

Pumili ng tamang uri ng tsart

Sa mga nakaraang aralin, sinubukan mong gumawa ng iba't ibang uri ng visualisasyon ng datos gamit ang Matplotlib at Seaborn para sa pag-chart. Sa pangkalahatan, maaari mong piliin ang tamang uri ng tsart para sa tanong na iyong tinatanong gamit ang talahanayan na ito:

Kailangan mong:	Dapat mong gamitin:
Ipakita ang mga trend ng datos sa paglipas ng panahon	Line
Ihambing ang mga kategorya	Bar, Pie
Ihambing ang mga kabuuan	Pie, Stacked Bar
Ipakita ang mga relasyon	Scatter, Line, Facet, Dual Line
Ipakita ang mga distribusyon	Scatter, Histogram, Box
Ipakita ang mga proporsyon	Pie, Donut, Waffle

✅ Depende sa komposisyon ng iyong datos, maaaring kailanganin mong i-convert ito mula sa text patungong numeric upang suportahan ang isang partikular na tsart.

Iwasan ang panlilinlang

Kahit na maingat ang isang data scientist sa pagpili ng tamang tsart para sa tamang datos, maraming paraan kung paano maipapakita ang datos upang patunayan ang isang punto, madalas sa kapinsalaan ng datos mismo. Maraming halimbawa ng mapanlinlang na tsart at infographics!

🎥 I-click ang imahe sa itaas para sa isang talakayan tungkol sa mapanlinlang na tsart

Ang tsart na ito ay binabaliktad ang X axis upang ipakita ang kabaligtaran ng katotohanan, batay sa petsa:

Ang tsart na ito ay mas mapanlinlang pa, dahil ang mata ay naaakit sa kanan upang isipin na, sa paglipas ng panahon, bumaba ang mga kaso ng COVID sa iba't ibang county. Sa katunayan, kung titingnan mo nang mabuti ang mga petsa, makikita mong inayos ang mga ito upang magmukhang pababa ang trend.

Ang kilalang halimbawa na ito ay gumagamit ng kulay AT baliktad na Y axis upang manlinlang: sa halip na isipin na tumaas ang mga kaso ng pagkamatay dahil sa baril pagkatapos ng pagpasa ng batas na pabor sa baril, ang mata ay nalilinlang upang isipin ang kabaligtaran:

Ang kakaibang tsart na ito ay nagpapakita kung paano maaaring manipulahin ang proporsyon, sa nakakatawang paraan:

Ang paghahambing ng mga bagay na hindi maihahambing ay isa pang mapanlinlang na taktika. Mayroong kahanga-hangang web site tungkol sa 'spurious correlations' na nagpapakita ng 'mga katotohanan' na nag-uugnay sa mga bagay tulad ng rate ng diborsyo sa Maine at ang pagkonsumo ng margarina. Ang isang Reddit group ay nangongolekta rin ng pangit na paggamit ng datos.

Mahalagang maunawaan kung gaano kadaling malinlang ang mata ng mapanlinlang na tsart. Kahit na mabuti ang intensyon ng data scientist, ang pagpili ng maling uri ng tsart, tulad ng pie chart na nagpapakita ng masyadong maraming kategorya, ay maaaring maging mapanlinlang.

Kulay

Makikita mo sa 'Florida gun violence' chart sa itaas kung paano ang kulay ay maaaring magbigay ng karagdagang kahulugan sa mga tsart, lalo na ang mga hindi dinisenyo gamit ang mga library tulad ng Matplotlib at Seaborn na may iba't ibang na-vet na color libraries at palettes. Kung gumagawa ka ng tsart nang manu-mano, maglaan ng kaunting oras upang pag-aralan ang teorya ng kulay

✅ Tandaan, kapag nagdidisenyo ng mga tsart, na ang accessibility ay mahalagang aspeto ng visualisasyon. Ang ilan sa iyong mga user ay maaaring color blind - maganda ba ang pagpapakita ng iyong tsart para sa mga user na may kapansanan sa paningin?

Mag-ingat sa pagpili ng mga kulay para sa iyong tsart, dahil ang kulay ay maaaring magbigay ng kahulugan na hindi mo sinasadya. Ang 'pink ladies' sa 'height' chart sa itaas ay nagbibigay ng isang malinaw na 'pambabae' na kahulugan na nagdaragdag sa kakaibang aspeto ng tsart mismo.

Habang kahulugan ng kulay ay maaaring magkaiba sa iba't ibang bahagi ng mundo, at may tendensiyang magbago depende sa kanilang shade. Sa pangkalahatan, ang mga kahulugan ng kulay ay kinabibilangan ng:

Kulay	Kahulugan
pula	kapangyarihan
asul	tiwala, katapatan
dilaw	kasiyahan, babala
berde	ekolohiya, swerte, inggit
lila	kasiyahan
kahel	sigla

Kung ikaw ay inatasang gumawa ng tsart na may custom na kulay, tiyakin na ang iyong mga tsart ay parehong accessible at ang kulay na iyong pinili ay tumutugma sa kahulugan na nais mong iparating.

Pag-style ng iyong mga tsart para sa mas madaling mabasa

Ang mga tsart ay hindi makabuluhan kung hindi ito madaling mabasa! Maglaan ng sandali upang isaalang-alang ang pag-style ng lapad at taas ng iyong tsart upang mag-scale nang maayos sa iyong datos. Kung ang isang variable (tulad ng lahat ng 50 estado) ay kailangang ipakita, ipakita ang mga ito nang patayo sa Y axis kung maaari upang maiwasan ang tsart na kailangang i-scroll nang pahalang.

Lagyan ng label ang iyong mga axis, magbigay ng legend kung kinakailangan, at mag-alok ng tooltips para sa mas mahusay na pag-unawa sa datos.

Kung ang iyong datos ay tekstwal at mahaba sa X axis, maaari mong i-angle ang teksto para sa mas madaling mabasa. Matplotlib ay nag-aalok ng 3D plotting, kung ang iyong datos ay sumusuporta dito. Ang mga sopistikadong visualisasyon ng datos ay maaaring gawin gamit ang mpl_toolkits.mplot3d.

Animation at 3D na pagpapakita ng tsart

Ang ilan sa mga pinakamahusay na visualisasyon ng datos ngayon ay animated. Si Shirley Wu ay may mga kamangha-manghang ginawa gamit ang D3, tulad ng 'film flowers', kung saan ang bawat bulaklak ay isang visualisasyon ng isang pelikula. Isa pang halimbawa para sa Guardian ay 'bussed out', isang interactive na karanasan na pinagsasama ang visualisasyon gamit ang Greensock at D3 kasama ang scrollytelling na format ng artikulo upang ipakita kung paano hinahandle ng NYC ang problema nito sa mga homeless sa pamamagitan ng pagbyahe sa mga tao palabas ng lungsod.

"Bussed Out: Paano Inililipat ng Amerika ang mga Homeless" mula sa the Guardian. Visualisasyon ni Nadieh Bremer & Shirley Wu

Bagamat hindi sapat ang araling ito upang talakayin nang malalim ang mga makapangyarihang library ng visualisasyon, subukan ang iyong kakayahan sa D3 sa isang Vue.js app gamit ang isang library upang ipakita ang visualisasyon ng aklat na "Dangerous Liaisons" bilang isang animated na social network.

"Les Liaisons Dangereuses" ay isang epistolaryong nobela, o isang nobela na ipinakita bilang serye ng mga liham. Isinulat noong 1782 ni Choderlos de Laclos, ito ay nagsasabi ng kuwento ng malupit, moral na bangkaroteng mga galaw ng dalawang nag-aaway na pangunahing tauhan ng French aristocracy noong huling bahagi ng ika-18 siglo, ang Vicomte de Valmont at ang Marquise de Merteuil. Pareho silang nagkaroon ng masamang wakas ngunit hindi bago magdulot ng malaking pinsala sa lipunan. Ang nobela ay nagbubukas bilang serye ng mga liham na isinulat sa iba't ibang tao sa kanilang mga bilog, nagbabalak ng paghihiganti o simpleng magdulot ng problema. Gumawa ng visualisasyon ng mga liham na ito upang matuklasan ang mga pangunahing tauhan ng kuwento, sa biswal na paraan.

Makukumpleto mo ang isang web app na magpapakita ng animated na view ng social network na ito. Gumagamit ito ng isang library na ginawa upang lumikha ng visual ng isang network gamit ang Vue.js at D3. Kapag tumatakbo na ang app, maaari mong hilahin ang mga nodes sa screen upang i-shuffle ang datos.

Proyekto: Gumawa ng tsart upang ipakita ang isang network gamit ang D3.js

Ang folder ng araling ito ay may kasamang solution folder kung saan maaari mong makita ang kumpletong proyekto, para sa iyong sanggunian.

Sundin ang mga tagubilin sa README.md file sa root ng starter folder. Tiyakin na mayroon kang NPM at Node.js na tumatakbo sa iyong makina bago i-install ang mga dependencies ng iyong proyekto.
Buksan ang starter/src folder. Makikita mo ang isang assets folder kung saan makakahanap ka ng .json file na naglalaman ng lahat ng mga liham mula sa nobela, na may bilang, at may 'to' at 'from' na anotasyon.
Kumpletuhin ang code sa components/Nodes.vue upang paganahin ang visualisasyon. Hanapin ang method na tinatawag na createLinks() at idagdag ang sumusunod na nested loop.

I-loop ang .json object upang makuha ang 'to' at 'from' na datos para sa mga liham at buuin ang links object upang magamit ito ng library ng visualisasyon:

//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 });
      }

Patakbuhin ang iyong app mula sa terminal (npm run serve) at tamasahin ang visualisasyon!

🚀 Hamon

Maglibot sa internet upang matuklasan ang mga mapanlinlang na visualisasyon. Paano nililinlang ng may-akda ang user, at ito ba ay sinadya? Subukang itama ang mga visualisasyon upang ipakita kung paano dapat ang hitsura nito.

Post-lecture quiz

Review & Self Study

Narito ang ilang mga artikulo na maaaring basahin tungkol sa mapanlinlang na visualisasyon ng datos:

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

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

Tingnan ang mga interesanteng visualisasyon para sa mga makasaysayang assets at artifacts:

https://handbook.pubpub.org/

Basahin ang artikulong ito tungkol sa kung paano maaaring mapahusay ng animation ang iyong mga visualisasyon:

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

Takdang Aralin

Gumawa ng sarili mong custom na visualisasyon

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.

13 KiB Raw Permalink Blame History