În ultimii câțiva ani, infografica a evoluat de la imagini statice la experiențe interactive bogate, cu animații și videoclipuri adaptate la conținut unic. Nu se mai limitează la pregătit în prealabil, șabloane universale. Și compilația de astăzi conține cele mai bune infografice care arată cum arată o experiență interesantă și informativă.

Majoritatea infograficelor din această listă au fost alese pentru a fi afișate diferite căi, cu care designerii abordează vizualizarea datelor. Cu toate acestea, există și mai mulți hibrizi aici, ilustrând estomparea granițelor dintre infografice și experiențe multimedia bogate, creând în același timp conținut captivant și povești convingătoare pe paginile de destinație. Abaterea de la formele tradiționale înseamnă că intrăm pe un teritoriu media mai complex și acest tip de experimentare cu tehnologie și povestire va avea crucial pentru a modela viitorul design grafic.

1. Harta vântului

Harta vântului este un design uluitor care arată direcția și viteza vântului peste Statele Unite. Acest design are un scop mai degrabă artistic decât unul utilitar, și asta este grozav: este foarte frumos să stai și să urmărești cât de subțiri și subțiri se șerpuiesc în jurul hărții. Un exemplu simplu, dar bine gândit, despre modul în care un infografic care arată căile formelor poate beneficia de animație și imagini în mișcare.

2. În zbor

În 2014, The Guardian a lansat infograficul In Flight care arată date de zbor comercial în timp real (se pare că nu sunt actualizate chiar acum, ceea ce este păcat), precum și o lecție despre istoria aviației. Conversațiile liniștite dintre echipajele aeriene de la începutul spectacolului interactiv creează o atmosferă specială. Se pare că infograficele se transformă încet într-o experiență cinematografică în aceste zile. Cel puțin „În zbor” indică în acea direcție...

3. Apelează Luna

Nu se întâmplă multe în infograficul Dial A Moon, dar își servește destul de bine scopul. În 2015, datorită NASA, infograficul cu fazele lunii a fost actualizat la fiecare oră și nu puteai să mergi pe Google în căutarea acestor informații misterioase. Acum puteți vizualiza imaginile introducând manual luna, ziua și ora.

4. Ziua cu Pluto

Revista Nature publică multe infografice interesante pentru publicul său științific. Printre ei era unul despre faimosul zbor nava spatiala lângă Pluto (24 Hours Of Pluto). Infograficul a inclus o mulțime de informații textuale, dar imaginile au făcut ușor de înțeles totul, de la structura unei planete pitice până la formarea lunilor sale. Acum disponibil online partea de text, precum și două videoclipuri animate din infografic.

5. Cum s-au schimbat casele americane

Faceți o călătorie prin marele vis american, reflectat prin evoluția stilurilor casei. Acest infografic bine ilustrat vă permite să vă urcați la volanul unei mașini (schimbându-vă și pe măsură ce derulați pentru a ține pasul cu epoca) și să vă faceți drum din anii 1900 până în anii 2000, trecând pe lângă clădiri populare de zeci de ani. Pe parcurs, vei întâlni mulți materiale utile(inclusiv condițiile socio-politice ale vremii, precum și tendințele modei), și totul se termină cu o întrebare care te încurajează să-ți imaginezi viitorul căminului american. Decades Of American Homes Infografică - mare exemplu defilare orizontală, iată-l pe loc.

6. Evoluția analizei de marketing

În infograficul Evolution of Insight, compania inteligentă de cercetare a utilizatorilor Vision Critical urmărește evoluția pieței tehnologiei de marketing din întreaga lume din anii 1890 până în prezent. Funcționează în mod similar cu infograficul Cum s-au schimbat casele americane și, astfel, vă permite să comparați eficiența utilizării unei cronologie interactive pentru două povesti diferite. Infograficul Decades Of American Homes are avantajul că vizualizarea caselor în timp ce conduceți este mult mai intuitivă decât călătoria prin marile analize americane. Infograficele bune sunt create în jurul conținutului, nu în jurul acestuia.

7. Drepturile comunității LGBT din întreaga lume

The Guardian ocupă un alt loc pe lista noastră cu acest infografic elegant care explică situația legală a drepturilor LGBT pe o serie de probleme (căsătorie, discriminare la locul de muncă, crime motivate de ură etc.) în fiecare țară din lume. Deplasarea într-un semicerc oferă o modalitate rapidă și ușoară de a compara statisticile între țări, iar compoziția infografică menține starea globală în primul rând. Există, de asemenea, un apel puternic la acțiune care urmărește să reducă decalajul dintre simpla conștientizare și activism.

8. Inegalitatea este reparabilă

Un alt exemplu minunat de infografică interactivă, Inequality Is Fixable, invită publicul să se plonjeze în problemă într-un mod profund personal. Privitorul este garantat să nu-și piardă interesul pentru materialul care îi spune cât de mult plătește șeful său și de ce. Făcând utilizatorul parte din poveste, dezvoltatorii stârnesc curiozitatea și îl ghidează pe utilizator prin toate pașii necesari direct la îndemnul la sfârșit.

„Am lăsat să se întâmple – cum putem să o reparăm acum?”

9. Desenează-te: cum venitul gospodăriei prezice șansele copilului tău de a merge la facultate

Multe dintre infograficele din această listă folosesc animația și interactivitatea pentru a oferi o experiență bogată. Din punct de vedere vizual, acest infografic din New York Times (You Draw It: How Family Income Predicts Children's College Chances) urmează formatul clasic de diagramă, dar folosește și înțelegerea comportamentului utilizatorilor pentru a extinde domeniul de aplicare al designului infografic, cum ar fi proactiv și interactiv. vizualizare. Cerându-le cititorilor să-și deseneze propria curbă, ei introduc un element de interes propriu și astfel oferă oamenilor informații cu adevărat valoroase.

Nu cel mai mult cel mai prost rezultat! Axa verticală este procentul de copii care merg la facultate. Axa orizontală este percentila venitului parental

10 Cum mor americanii

Cu excepția imaginii de titlu, acest exemplu folosește în cea mai mare parte diagrame bune de modă veche pentru a reda conținut. Dar acest lucru nu este deloc plictisitor, deoarece utilizatorii se pot deplasa în mod independent prin date, deplasând cursorul de-a lungul graficelor. Acest lucru face mult mai ușor de comparat, de exemplu, numărul de decese legate de sinucidere în anii 70 în comparație cu astăzi (indiciu: este în creștere acum), o diagramă statică nu ar face asta atât de bine.

11.

De când Snowfall a debutat în atenția și laudele lumii, The New York Times și-a păstrat reputația de jurnalism multimedia de ultimă oră. Echipa de publicații folosește o combinație de design infografic și povestiri aprofundate pentru a crea o experiență impresionant de interesantă. Au exemple mai izbitoare, dar The Russia Left Behind este o lucrare care a provocat o anumită rezonanță. Infograficul funcționează ca o călătorie interactivă prin Rusia (vă navigați pe o hartă).

12. Obligații de mașini

Dacă vrei vreodată să cunoști istoria lui James Bond uitându-te la mașinile sale, atunci mulțumește-i dealer-ului britanic Evans Halshaw - el ți-a oferit o astfel de șansă. Infograficul său interactiv Bond Cars vă permite să explorați marca și designul fiecăreia dintre mașinile Bond, plus câteva suplimente. fapte interesante. Folosind tactica de glisare omniprezentă, puteți, de asemenea, „dezvălui” mașina în toată gloria ei metalică (în mod implicit, este dată doar o singură culoare). Așa că autorii au rezolvat în mod creativ problema de a include fotografii care nu se potrivesc prea bine cu estetica infografică.

13. Culori de mișcare

The Colors Of Motion este o serie infografică care analizează filmele doar pe baza paletei lor de culori, derivate din combinarea tuturor cadrelor. Dacă te-ai întrebat vreodată, acum ai răspunsul. Nu găsiți titlul în baza de date? Doar trimiteți un mesaj dezvoltatorilor - aceștia acceptă cereri.

14. Mormânt regal în Peru

National Geographic are o colecție destul de impresionantă de ceea ce ei numesc „grafică interactivă” (dintre care majoritatea sunt însoțite de detalii detaliate descrieri de text, ca și în cazul, de exemplu, a Columnei lui Traian), dar am ales acest exemplu relativ simplu pentru a evidenția ce metode sunt cu adevărat eficiente în infografica interactivă. „The Royal Tomb in Peru” (Mormântul Regal Wari din Peru) dezvăluie trăsăturile înmormântării unei femei nobile din acele vremuri. Accentul se mută de la împachetarea mumiei la decorațiunile și poziția acesteia. Împărțind informațiile în bucăți mai mici și permițând utilizatorului să se deplaseze între ele, grafica interactivă evită cele mai insidioase capcane: supraabundența de date și efecte vizuale. În plus, fiecare interacțiune ulterioară extinde experiența, făcând-o mult mai plină de satisfacții decât dacă totul ar fi prezentat odată. Creierul nostru are un mecanism care respinge stimulii inhibitori și tipul dat interacțiunea devine o soluție excelentă pentru utilizator, facilitând absorbția informațiilor.

15. Ce este „referendumul scoțian”? Explicație pentru non-britanici

The Guardian, ca și New York Times, se bazează pe jurnalismul multimedia, iar videoclipul lor face o treabă grozavă cu una dintre funcțiile principale ale infograficului: să ofere informații greoaie o formă acceptabilă. Pentru mulți dintre noi din afara Marii Britanii, referendumul este un subiect foarte confuz. Din fericire, acest videoclip (Scottish Referendum Explained For Non-Brits) vă va ajuta să aflați rapid despre aspectele sale importante, fără a necesita o scufundare profundă în poveste.

16. Sănătatea publică

Sarcina înainte de The Atlantic a fost de a dezvolta conceptul de îmbunătățire a sănătății societății. Acesta a comandat Truth Labs să scrie o serie în trei părți despre sănătatea populației ca narațiune digitală. Scopul principal al interpretului a fost să păstreze derularea naturală a documentului și condițiile obișnuite de citire ale utilizatorului, creând în același timp o experiență care diferă din perspectiva vizuală. Pentru a-și aduce viziunea la viață, ei au împrumutat instrumente și strategii de la cinema, dar s-au bazat și pe un set de principii de design pentru a susține lizibilitatea ca regulă cheie.

17. Boabele lui Joho

Producătorul austriac de cafea Joho's a creat o experiență multimedia impresionantă Joho's Bean pentru a spune povestea originii boabelor de cafea: sunetul ciripitului păsărilor, sunetul boabelor de cafea prăjite ambalate în saci și zgomotul străzilor aglomerate și al traficului din oraș.

Joho's te poartă într-o călătorie explicând originea boabelor de cafea

18. Drum primordial

„Calea sălbatică” este experiment interactiv, un jurnal de călătorie creat cu Canvas. Elementul principal este harta, care animă calea pe hartă pe măsură ce pagina se derulează. Este posibil ca proiectul să nu funcționeze în toate browserele. Cu toate acestea, vine cu un articol care explică toată tehnologia infografică din culise.

19.

Acoperirea The Guardian (Rezultatele alegerilor în direct) a alegerilor prezidențiale din SUA din 2016 a adus un element distractiv afacerii serioase de interes și secții de votare. Un infografic interactiv a urmărit voturile în patru state. În mod implicit, graficul arăta rezultate pentru întreaga țară și, dacă utilizatorul trecea cu mouse-ul peste orice zonă de pe hartă, arăta ce numere au avut candidații acolo. Candidații la președinție au fost prezentați ca niște avatare amuzante pixelate. Pe măsură ce infograficele au fost actualizate în timp real, omuleții au colorat stările în care au câștigat. Din când în când, în dreptul candidatului apărea un citat într-un balon.

Reflectarea rezultatelor alegerilor în timp real

Viitorul vizualizării datelor este interactiv.

Dar cum creezi o infografică interactivă cu adevărat uimitoare?

Infograficele sunt peste tot și timpuri recente devine din ce în ce mai interactiv.

În articolul de astăzi, vă vom împărtăși secretele creării de infografice interactive, precum și link-uri către resurse utile.

1. Înțelegeți psihologia

Înainte de a face o infografică interactivă, este important să înțelegeți de ce doriți să o faceți așa.

După cum este detaliat în acest infografic, oamenii sunt mai bine să absoarbă informațiile vizuale. Este mult mai probabil să citim, să înțelegem și să ne amintim o prezentare dacă are imagini captivante. este o instrument eficientînvățând, dar poate deveni și mai bine.

Antrenament cinetic - excelentă alternativă deoarece oamenii absorb mai bine informația prin acțiuni fizice.

De aceea, adăugarea interactivității în sfera de perspectivă a vizualizării tale te va ajuta să creezi infografice și mai memorabile și mai eficiente.

Această combinație de abordare vizuală și cinetică face din infografica animată conținutul viitorului. Desigur, pentru unele teme este mai bine să nu folosiți elemente interactive, dar în cele mai multe cazuri acestea vor îmbunătăți doar conținutul.

Mișcarea adaugă sens informațiilor, permite utilizatorului să controleze experiența și antrenează imaginația în moduri în care infografica statică nu poate.

2. Adăugați efecte de defilare

LA această lecție vom învăța cum să construim infografice interactive cu SVG, CSS și JavaScript. Unul dintre subiectele mai puțin discutate este capacitatea noilor browsere de a crește suportul pentru fișierele SVG. Spre deosebire de imaginile raster, cum ar fi PNG, JPG sau GIF, graficele vectoriale din fișierele SVG sunt complet scalabile la orice dimensiune și se vor afișa la orice rezoluție sau densitate a ecranului fără pierderi de calitate. În multe cazuri, fișierele SVG sunt mult mai mici și se încarcă mai repede. Dar cel mai interesant lucru pe care unii dezvoltatori nu își dau seama este că SVG se bazează pe specificația XML și poate fi aplicat într-un mod similar cu HTML.

De asemenea, înseamnă că putem accesa și manipula elementele grafice și elementele dintr-un fișier SVG folosind tehnologiile CSS și JavaScript cu care dezvoltatorii web sunt deja familiarizați. Dezvoltatorii pot crea acum niște animații și efecte destul de impresionante folosind SVG. Astăzi explorăm capabilități SVG pe exemplul creării de infografice vectoriale interactive pentru web. Puteți vizualiza demonstrația sau descărca codul sursă făcând clic pe linkurile de sub imaginea de mai jos. Să începem.

Pregătirea fișierului SVG

Există multe moduri de a crea grafică SVG. Deși este posibil să faceți SVG prin codificare manuală, vom dori să avem un anumit tip de grafică vectorială pentru grafice mai complexe. software, care poate exporta în format SVG. alegere populară printre majoritatea designerilor ne pot fi familiari Adobe Illustrator , dar există și alte aplicații publice, de exemplu, inkscape, care poate fi mai potrivit pentru scopurile noastre.

Indiferent de software-ul pe care îl alegeți, este esențial să puteți grupa obiecte împreună și să puteți denumi acele grupuri (prin scrierea atributelor id). Acest lucru ne permite să ne organizăm SVG-ul într-o ierarhie adecvată pe care o putem accesa ulterior folosind CSS și/sau JavaScript. Illustrator și Inkscape au capacitatea de a face acest lucru selectând mai multe elemente grafice merge la Obiect > Grupare (grupare) (sau Degrupare - degrupare) din meniul principal.

Orice obiect sau grup poate primi apoi un nume care devine atributul id al grupului sau obiectului atunci când este exportat, așa că evitați spațiile, caractere specialeși duplicate.

În Illustrator, acest lucru se poate face în panoul Straturi ( straturi). Doar găsiți obiectul pe care doriți să-l denumiți în panou, faceți dublu clic pe câmpul stratului și introduceți id-ul dorit. În utilizarea Inkscape Obiect > Proprietăți obiect un panou pentru atribuirea unui id unui obiect sau grup. Se poate face si cu Editare> Editor XML un panou în care puteți scrie nu numai id, ci și clase.

În exemplul nostru, când salvăm fișierul SVG și îl deschidem editor de text, va avea următoarea structură:

id="background"> id="bg-lines-left"> < /g> id="bg-lines-right"> < /g> < /g> id="logo"> < /g> id="citat"> id="quote-left-brece"> < /g> id="quote-right-brece"> < /g> id="text-citat"> < /g> < /g> id="cronologie"> id="cafea"> id="coffee bar" /> id = "săgeată cafea" /> id="ora cafelei"> < /g> id="coffee-badge"> id="cercul cafelei" /> id="titlul cafelei" > < /g> id="cafea-detalii"> < /g> < /g> < /g> id="design"> id="design-bar" /> id = "săgeată de proiectare" /> id="design-time"> < /g> id="design-badge"> id="cercul de proiectare" /> id="design-title"> < /g> id="design-details"> < /g> < /g> < /g> id="build"> id="build-bar" /> id = "săgeată construi" /> id="build-time"> < /g> id="build-badge"> id="construiește cerc" /> id="build-title"> < /g> id="build-details"> < /g> < /g> < /g> id="plângere"> id="bara de reclamații" /> id ="săgeată de plângere" /> id="timp-reclamare"> < /g> id="plain-badge"> id="plângere-cerc" /> id="titlu plângere" > < /g> id="detalii-reclamare"> < /g> < /g> < /g> id="bere"> id="bar de bere" /> id ="săgeată-bere" /> id="beer-time"> < /g> id="insigna-bere"> id="cerc de bere" /> id="titlul berii" > < /g> id="detalii-bere"> < /g> < /g> < /g> < /g>

Markup-ul de mai sus ne arată structura la care vom merge.

După cum putem vedea în marcajul nostru SVG, fiecare etichetă arata spre grup nou obiecte care pot fi localizate în interiorul altor grupuri. Desigur, atunci când creați SVG, nu este necesar să atribuiți un id fiecărui obiect/grup, dar va fi mai convenabil să îl accesați ulterior prin CSS sau JavaScript și mai ușor de recunoscut în markup.

Se încarcă SVG în HTML cu JAVASCRIPT

HTML

Există modalități de a include sau de a pune SVG în HTML. Acest lucru este posibil prin utilizarea etichetei , etichetă , sau folosind proprietăți css' imagine de fundal . Pentru scopurile noastre, avem nevoie de acces la DOM în interiorul SVG. Vom folosi HTML5. Să încărcăm SVG-ul direct în pagină folosind jQuery.

Mai întâi, să creăm un bloc div în documentul HTML:

JavaScript

Acum folosind Se încarcă jQuery, încărcați fișierul SVG în blocul #stage și atribuiți-i clasa svgLoaded, pe care o vom folosi pentru a declanșa animația:

$(funcție () ( $("#stage") .load ("interactive.svg" ,funcție (răspuns) ( $(this ) .addClass ("svgLoaded" ); dacă // Asigurați-vă că executați acest lucru pe un server web sau localhost! } } ) ; } ) ;

Important: Încărcăm SVG-ul cu JavaScript pentru a-i accesa DOM. Chrome (și posibil alte browsere) nu vă va permite să faceți acest lucru local; acest lucru va funcționa numai atunci când rulați cu Protocolul HTTP din motive de securitate.

css

Rețineți că CSS-ul din acest tutorial nu va conține nicio specificație de browser, dar va fi în fișiere.

În primul rând, precizăm câteva stiluri pentru bloc div. Când încărcați SVG-ul, fișierul trebuie să se potrivească cu dimensiunea blocului, așa că este important să setați dimensiunea blocului pentru a se potrivi cu dimensiunea pânzei SVG.

#scenă ( lățime : 1024px ; înălțime : 1386px ; )

Stilizarea elementelor SVG: setarea „transform-origins”

Cheia pentru animarea elementelor din pânză se află în proprietatea transform-origin. În mod implicit, toate transformările oricărui element din SVG provin din (0px, 0px) pânza SVG. Pentru orice element pe care dorim să-l transformăm (de exemplu, scară, rotire), trebuie să setăm o origine de transformare adecvată în raport cu partea stângă și superioară a pânzei SVG. Originea va fi diferită pentru fiecare element în funcție de efectul/animația dorit, dar în cele mai multe cazuri va fi egală cu punctul central în care elementul este deja plasat. Acest lucru poate fi destul de obositor, dar este mai ușor să copiați informațiile de coordonate furnizate în editorul nostru vectorial.

#cafea ( transform-origin: 517px 484px ; ) #coffee-badge ( transform-origin: 445px 488px ; ) #coffee-title ( transform-origin: 310px 396px ; ) #coffee-details ( transform-origin: 311px; 4) #design ( transform-origin: 514px 603px ; ) #design-badge ( transform-origin: 580px 606px ; ) #design-title ( transform-origin: 712px 513px ; ) #design-details ( transform-origin: 710px 620px ;) #build ( transform-origin: 511px 769px ; ) #build-badge ( transform-origin: 445px 775px ; ) #build-title ( transform-origin: 312px 680px ; ) #build-details ( transform-origin: 310px 790px ;) #complain ( transform-origin: 512px 1002px ; ) #complain-badge ( transform-origin: 586px 1000px ; ) #complain-title ( transform-origin: 718px 921px ; ) #complain-details ( transform-origin: 702px; 718px 921px ; ) #bere ( transform-origin: 513px 1199px ; ) #beer-badge ( transform-origin: 444px 1193px ; ) #beer-title ( transform- origine: 313px 1097px ; ) #bere-detalii ( transform-origin: 316px 1202px ; )

Aplicarea unor transformări inițiale

Trebuie să setăm stiluri inițiale pentru a schimba poziția unor obiecte. Și, de asemenea, este necesar să ascundem anumite obiecte pe care nu dorim să le arătăm până când cursorul este plasat peste ele.

Pentru a face acest lucru vom folosi selectoare CSS. Practic selectăm obiecte cu id „sufixe”.

[id$=insignă] ( /* Orice element cu un id care se termină cu „insignă” */ transform: scale(0 . 5 , 0 .5 ); ) [ id$=titlu] ( transform: scale(1 . 8 ) translate(0px , 48px ) ; ) [ id$=detalii] ( transform: scale(0 , 0 ) ; )

Adăugarea stilului la :hover și aplicarea tranzițiilor

Selectăm elementele din interiorul grupului hoverat și le întoarcem înapoi în poziția inițială. Apoi setați tranziția 0,25 s pentru un efect de animație cool.

#cronologie > g:hover [ id$=insignă] , #cronologie > g:hover [ id$=detalii] ( transform: scale(1 , 1 ) ; ) #cronologie > g:hover [ id$=title] ( transformare : scale(1 ) translate(0px , 0px ) ; ) [ id$=insignă] , [ id$=title] , [ id$=detalii] ( tranziție: transformare 0,25s ease-in-out; )

Introducere în animație

Folosim animație CSS. Mai întâi trebuie să creăm câteva cadre cheie, care vor aduce la viață unele proprietăți CSS diferite:

@keyframes stânga-acolada-intro ( 0 % ( transform: translateX(220px ) ; opacitate: 0 ; ) 50 % ( opacitate: 1 ; transformare: translateX(220px) ; ) 100 % ( transforma: translateX(0px ) ; ) ) @keyframes dreapta-acolada-intro ( 0 % ( transform: translateX(-220px ) ; opacitate: 0 ; ) 50 % ( opacitate: 1 ; transformare: translateX(-220px ) ; ) 100 % ( transform: translateX(0px ) ; ) ) @keyframes fade-in ( 0 % ( opacitate: 0 ; ) 100 % ( opacitate: 1 ; ) ) @keyframes grow-y ( 0 % ( transforma: scaleY(0 ) ; ) 100 % ( transform: scaleY(1 ) ; ) ) @keyframes grow-x ( 0 % ( transforma: scaleX(0 ) ; ) 100 % ( transform: scaleX(1 ) ; ) ) @keyframes cresc ( 0 % ( transforma: scară(0 , 0 ) ; ) 100 % ( transforma: scară(1 , 1 ) ; ) )

Creați o secvență de animație

Putem folosi selectoare bazate pe clasa svgLoaded pe care am folosit-o mai devreme.

Pentru a seta secvența de animație, setați proprietatea animation-delay și setați animation-fill-mode: înapoi, astfel încât animația să fie întreruptă.

SvgLoaded #logo (animație: fade-in 0,5s ease-in-out; ) .svgLoaded #quote-text (animație: fade-in 0,5s ease-in-out 0,75s ; animation-fill-mode: înapoi ; ) .svgLoaded #quote-left-brace ( animație: stânga-acolada-intro 1s ease-in-out 0 .25s ; animation-fill-mode: înapoi; ) .svgLoaded #quote-right-brace ( animație: dreapta- brace-intro 1s ease-in-out 0.25s ; animation-fill-mode: backwards; ) .svgLoaded #background (animație: grow-y 0.5s ease-in-out 1 .25s ; transform-origin: 512px 300px ; animation-fill-mode: backwards; ) .svgLoaded #background > g ( animație: grow-x 0 .25s ease-in-out 1 .75s ; animation-fill-mode: backward; ) .svgLoaded #background > g: last-of-type ( transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design , .svg #build,Loaded .svgLoaded #complain , .svgLoaded #bere ( animație: crește 0,25 s ease-in-out; animation-fill-mode: înapoi; ) .svgLoaded #cafea (animation-delay: 2s; ) .svgLoaded #design (animation-delay: 2 .25s ; ) .svgLoaded #build (animation-delay: 2 .5s ; ) .svgLoaded #complain: (animation-delay: 2 .75s ; ) .svgLoaded #beer ( animație-întârziere: 3s; )

Fonturi WEB

De când am folosit fonturi personalizateîn fișierul nostru SVG, trebuie să le includem și în pagina noastră web. Este important să specificați corect numele fontului care a fost folosit la exportul SVG. Deschidem fișierul SVG într-un editor de text și pur și simplu găsim textul în care a fost folosit fontul și ne uităm la proprietatea familiei de fonturi:

ORA 12

După cum putem vedea, fișierul SVG a fost exportat folosind familia de fonturi numită „Liga gotică”. Deci, trebuie doar să definim fontul web în CSS folosind exact același nume.

@font-face (familie de fonturi: „LeagueGothic”; url ( „../fonts/league-gothic/league-gothic.eot.woff”) format("woff"); )

Este tot! Sperăm că ți-a plăcut tutorialul și l-ai găsit util și informativ. Ne-ar plăcea să auzim comentariile dvs.

Traducere - Datoria.

Vă prezentăm un ghid pentru începători pentru vizualizarea datelor, care va fi util pentru oricine dorește să învețe cum să creeze infografice și hărți interactive.

Infografice și hărți interactive au devenit parte a multor proiecte implementate de activiști, jurnaliști și mișcările sociale. Dar cum rămâne cu organizațiile care nu au un designer cu normă întreagă? Chiar și în acest caz, este posibil să creați de înaltă calitate materiale vizuale - Gardianul a spus cum să o facă.

Date

Primul lucru pe care trebuie să-l faceți este să înțelegeți ce fel de date doriți să vizualizați.

Să ne imaginăm că desfășurați o campanie care cere o salubritate mai bună în întreaga lume. Pentru a arăta cât de important este acest lucru, trebuie subliniat câte țări au încă acces limitat la toalete curate și cât de puțin s-a schimbat acest lucru în ultimii 10 ani. În acest tutorial, vom folosi setul de date al Băncii Mondiale.

Acum avem 10 ani de date, dar avem nevoie doar de cifre pentru 2000 și 2012. Prin urmare, după ce ne-am încărcat datele, ștergem rândurile și coloanele inutile (sfat: salvați dosarul original cu date).

Acum că ați curățat datele, sunteți gata să le vizualizați. În cazul nostru, înainte de vizualizare a fost adăugată o altă coloană - diferența procentuală dintre 2000 și 2012.

Cum se creează o diagramă interactivă

Afișarea datelor pe un grafic este cea mai rapidă și mai ușoară modalitate de a vizualiza informații. Site-uri precum Datawrapper, Infogr.am și PiktoChart sunt instrumente ușoare și ușor de utilizat cu ajutorul cărora puteți crea diverse grafice și diagrame și le puteți încorpora în orice site web.

Datawrapper este, fără îndoială, cel mai intuitiv și, de asemenea, este gratuit. Punctul slab al acestui instrument este că nu se afișează foarte bine. matrice mari date, așa că vom vizualiza doar cele 10 țări care au înregistrat cele mai multe schimbări în ultimii 10 ani.

Cum se creează un grafic folosind Datawrapper:

1. Înregistrați-vă pe site-ul web Datawrapper și creați o nouă diagramă.
2. Copiați și inserați datele dvs. în câmpul dedicat.
3. Verificați detaliile dvs.
4. Acum, pentru partea distractivă - alegeți un șablon de diagramă. Pentru această vizualizare, un simplu diagramă interactivă dar poți alege dintre un numar mare opțiunile prezentate pe site.
5. Ultimul pas este editarea finală a graficului. Puteți schimba culorile, puteți adăuga un titlu, o descriere și multe altele.

Cum se creează o hartă interactivă

Pentru a afișa date referitoare la diferite țări, cel mai bine este să utilizați o hartă. Vă prezentăm o prezentare generală a trei instrumente gratuite pentru incepatori.

Datawrapper

Acest instrument are acum o opțiune de hartă coropletă - crearea unui gradient pe baza datelor dvs. Hărțile sunt create folosind Datawrapper în același mod ca și graficele.

In spate: una dintre cele mai rapide și instrumente simple. Datawrapper vă va spune când ați introdus numele greșit al țării. Un alt plus al acestui instrument este că dacă treci cu mouse-ul peste culoare specificăîn legendă, doar țările cu acea culoare vor fi evidențiate pe hartă.

Vs: nu există șabloane pentru țări sau orașe individuale.

In spate: gratuit și ușor de utilizat (în special pentru crearea de puncte pe hartă).

Vs: caracteristici suplimentare, de exemplu, schimbarea schemei de culori poate părea complicată pentru începători (dar dacă știți cum să conectați fișierele KML cu datele existente, puteți crea o astfel de hartă). Este greu să adaugi o legendă pe hartă.

La prima vedere poate părea intimidant, dar cu acest instrument puteți crea o mare varietate de hărți și le puteți personaliza în funcție de ceea ce doriți să vedeți pe hartă.

In spate: vă va permite să faceți multe setări și să adăugați straturi suplimentare. Funcționează pe dispozitive mobile.

Vs: dacă intenționați să creați mai mult de 5 carduri și vă așteptați să obțineți mai mult de 10.000 de vizualizări pe lună, va trebui să plătiți pentru a utiliza acest instrument.

Cum se creează o infografică tradițională

Infograficele tradiționale sunt statice, imagine color, pe care sunt afișate informații cu numere și pictograme. Instrumentele menționate mai devreme - Infogr.am și PiktoChart - vă vor ajuta să creați o astfel de imagine. Sunt ușor de utilizat - puteți pur și simplu să glisați și să plasați informațiile de care aveți nevoie și să introduceți datele pentru a crea grafice. Numărul de șabloane disponibile în versiuni gratuite instrumente, limitate.

Un exemplu de vizualizare rapidă a setului nostru de date cu Infogr.am:

Cu instrumentele prezentate în acest ghid, oricine, indiferent de abilitățile sale, va putea să creeze o infografică sau o hartă interactivă frumoasă și să-și transmită mesajul unui public larg.

Chestia cu realitatea virtuală este că vei arăta ca un idiot pentru ceilalți.

Cardboard Design Lab de la Google este un „manual” bun pentru designerii VR începători

Infografice - ca un joc RPG

Problema cu Unity este că nu este atât de ușor de făcut lucru bun sub web

Realitatea virtuală este ca și căștile pentru ochii tăi

Realitatea virtuală necesită un mediu sigur, nu poți intra în el din mers. Limitează posibilitățile VR

Sesiunea închisă dimineața Archie Tse din The New York Times cu tema provocatoare „De ce NYT lucrează mai puțin interactiv”.

Munca NYT se bazează pe trei reguli de povestire vizuală:

1. Dacă cititorul trebuie să facă clic în loc să deruleze, atunci trebuie să se întâmple ceva ieșit din comun.
2. Să presupunem că sfaturile instrumente și orice alte efecte de hover nu vor fi văzute niciodată de nimeni. Dacă conținutul este important, faceți-l astfel încât cititorul să îl vadă imediat.
3. Dacă doriți să faceți ceva interactiv, amintiți-vă că va fi costisitor să îl faceți să funcționeze pe toate platformele.

Va trebui să vă redesenați grafica de 2 sau 3 ori pentru ca aceasta să funcționeze atât pe desktop, cât și pe mobil

Cum au schimbat aceste reguli abordarea NYT:

1. Cele mai multe vizualizări sunt acum statice
2. Mai multe texte
3. Dacă aveți nevoie de mișcare în imagine, aceasta apare în timpul derulării

(Punctul patru spune că încă mai lucrează interactiv. Dar acum ocazia trebuie să fie FOARTE semnificativă.)

Am făcut „multi-pași”. Utilizatorii se opresc la pasul 3. Cititorii vor doar să defileze, nu să facă clic

Archie Tse: Scrolling vs. făcând clic

Timp de 18 săptămâni, Andy Kriebel a postat un infografic și datele pe care se bazează pe VizWiz în fiecare duminică seara. Sarcina este să alocați aproximativ o oră de timp în timpul lunii, să analizați rapid vizualizarea și să vă faceți propria versiune.

Mai jos publicăm rezultatele săptămânii trecute - Sclavia în secolul XXI.

#MakeoverMonday de Andy Kriebel. Descriere detaliatași interactiv - pe blogul lui Andy:

#MakeoverMonday de Andy Cotgreave. Descriere detaliată și interactivă - în blogul lui Andy:

De asemenea, am aflat că 51% dintre oamenii din lume sunt mai tineri decât mine, iar 63% din Rusia sunt mai în vârstă și că șansele mele de a muri chiar acum nu sunt atât de mari. Cifrele au încetat brusc să fie „statistici” și m-au atins până la capăt.

Vizualizarea datelor Utilizează seturi mari de date cu mai puține lucrări de proiectare manuală bazate pe algoritmi. De exemplu, lucrarea interactivă a New York Times.

artă vizuala - codificare unidirecţională. Vizualizări frumoase, dar greu de descifrat, precum arta computațională a lui Kunal Anand.

Care este problema?

Drept urmare, multe lucrări atrag doar utilizatori sofisticați, dar nu permit cititorilor neinițiați să se aprofundeze în esența problemei, dăunând astfel scopului vizualizării - de a informa publicul. De aceea este atât de important să recunoaștem și să înțelegem problema alfabetizării vizuale în contextul vizualizării.

O nouă „gramatică vizuală” a jurnalismului

Iată trei lucrări care experimentează modalități de prezentare a jurnalismului interactiv. Arată impresionant, dar interpretarea lor poate fi o sarcină dificilă pentru mulți.

Drepturile gay în SUA, stat cu stat

Numărul de surse de date și instrumente de procesare a datelor disponibile astăzi este în sine un indiciu clar că niciodată atât de mulți oameni nu au încercat să se simtă confortabil în lumea vizualizării datelor. Și când există atât de multe materiale disponibile pentru studiu, există o singură întrebare "Unde sa încep?" poate speria orice începător. Deci, care sunt cele mai bune biblioteci și ce recomandă profesioniștii? Acest lucru va fi discutat în acest articol.

A vorbi despre vizualizarea datelor și a nu o menționa este ca și cum ai vorbi despre istoria creației calculatoare personaleși să nu spui niciodată un cuvânt despre Steve Jobs. D3 (din engleză. Data Driven Documents) este, fără exagerare, cel mai important și dominant de pe piață Biblioteca JavaScript deschis cod sursa, care este folosit în mod obișnuit pentru a crea diagrame SVG. SVG (din engleză. Scalable Vector Graphics) este, la rândul său, un format imagine vectorială, care este acceptat de browserele web, dar puțin folosit în trecut.

Biblioteca D3 își datorează o mare parte din popularitate interesului brusc pentru SVG din partea designerilor web, care se datorează în mare parte modului în care grafica vectoriala uita-te pe ecrane Rezoluție înaltă(în special, pe ecranele Retina utilizate în Dispozitivele Apple), care devin din ce în ce mai frecvente.

„Să fim sinceri, dacă sarcina este de a vizualiza datele bazate pe SVG, atunci toate celelalte biblioteci nici măcar nu au fost aproape de a o rezolva”, spune Moritz Stefaner. expert independentîn vizualizarea datelor și proprietarul companiei Adevăr și Frumusețe. „Există și destul de multe proiecte interesante bazate pe D3, precum NVD3, care oferă componente grafice standard – gata de utilizare, dar personalizabile; sau, de exemplu, Crossfilter este pur și simplu un instrument remarcabil de filtrare a datelor.”

Scott Murray, programator-designer și autor de cărți Vizualizare interactivă a datelor pentru web, este de acord cu opinia anterioară: „D3 are o putere extraordinară, care constă în faptul că folosește tot ce au de oferit browserele. Deși aceasta are partea din spate: dacă browserul nu acceptă ceva, de exemplu, imagini 3D bazate pe WebGL (din English Web Graphics Library), atunci nici D3 nu îl va suporta.

Și, deși această bibliotecă este cu adevărat universală, încă nu este soluția ideală pentru fiecare sarcină. „Principalul dezavantaj al bibliotecii D3, ca să spunem așa, este că nu prescrie și nici măcar nu sugerează vreo abordare specială a vizualizării”, adaugă Scott Murray. „Deci este într-adevăr un instrument pentru încărcarea datelor în browser și apoi generarea de componente DOM pe baza acestor date.”

În timp ce D3 este un instrument excelent pentru imagini personalizate, dacă doriți să creați un grafic standard fără multă muncă vizuală, atunci un instrument precum Vega. Fiind un cadru bazat pe D3, Vega oferă o alternativă pentru afișare componente grafice. Folosind Vega, puteți vizualiza datele în format JSON Centrul European de Jurnalism și Proiectul Jurnalism Driven. Date exacte cursul nu este încă cunoscut, dar vă puteți înscrie acum.

În cinci zile, participanții la curs vor putea învăța ce este jurnalismul de date, cum funcționează și ce abilități-cheie trebuie stăpânite pentru a deveni un specialist în acest domeniu. Aflați unde să căutați date pentru a vă susține poveștile și cum să găsiți noi perspective din datele existente. Învață arta de a transforma datele plictisitoare într-o poveste convingătoare, infografică sau chiar vizualizare interactivă. Familiarizați-vă cu principiile de bază ale designului grafic pe care un jurnalist trebuie să le cunoască.

Instructorii cursului sunt cinci dintre cei mai importanți experți din lume în jurnalism de date și vizualizare.