Wizualizacja danych w projektowaniu stron internetowych: 12 oszałamiających przykładów
Dane, dane, wszędzie. Ale co z tym robisz? Dzisiaj zebraliśmy 12 wspaniałych przykładów wizualizacji danych w projektowaniu stron internetowych, aby szybko zacząć myśleć o tym, jak pracować z danymi.
Żyjemy w czasach, w których umiejętność prezentowania danych w nowy i interesujący sposób może być ogromnym atutem projektanta.
Niezależnie od tego, czy masz ogromną kolekcję liczb, czy tylko informacje, które chcesz zaprezentować, ten styl projektowania może być doskonałym narzędziem w twoim zestawie.
Poznaj elementy Envato
1. Historia NFL
Dzięki dziesięcioleciom danych obejmującym 32 zespoły, dostępnych jest wiele informacji na temat gier w NFL. FiveThirtyEight ułożyło to wszystko w serię interaktywnych wykresów, które można obejrzeć według zespołu, aby zobaczyć przypływy i przepływy historii futbolu.
Najlepsze w tej wizualizacji danych jest to, że jest super prosta. Linie pokazują wygrane i przegrane. Ale dzięki kliknięciom i najechaniu kursorem dane ożywają: możesz uzyskać wyniki, daty i rekordy dla każdej pojedynczej gry nałożone na mapę średnich dla całej ligi. (Dzięki temu możesz sprawdzić, czy Twój zespół jest przed, czy za paczką.)
2. Samodzielność
Autoportrety to coś więcej niż zabawny zestaw zdjęć. Selfiecity wykorzystuje wizualizacje multimedialne do łączenia tysięcy zdjęć w celu znalezienia informacji demograficznych o osobach, które je wykonują.
To, co fajne w tym zestawie danych, to fakt, że chociaż jest ono wizualne - tysiące zdjęć - możesz zacząć widzieć wzorce, takie jak styl selfie, które ludzie robią w różnych miejscach, niezależnie od tego, czy kobiety lub mężczyźni robią więcej zdjęć, i wiek selfie - chętni. Chociaż istnieją tutaj statystyki i liczby, dane te są wykreślane przy użyciu zdjęć w gigantycznej siatce.
3. Największe słownictwo w hip hopie
Ten projekt ThePudding pokazuje, że dane nie zawsze muszą być numerowane. Analizuje liczbę unikatowych słów użytych w tekstach hip-hopowych i kreśli największe słowniki według liczby słów ze zdjęciami artysty.
Oto, jak to działa: „Porównuje liczbę unikatowych słów używanych przez niektórych z najbardziej znanych artystów hip-hopowych (to jest przykład ilościowego spojrzenia na liryzm, zaproponowanego kiedyś przez Tahira Hemphilla). Użyłem pierwszych 35 000 tekstów każdego artysty. W ten sposób płodnych artystów, takich jak Jay-Z, można porównać do nowszych artystów, takich jak Drake. ”
Prosty czarno-biały wzór wykresu jest interesujący wizualnie i ułatwia sprawdzenie, którzy artyści wyprzedzają paczkę. (Lub możesz użyć bardziej interaktywnych narzędzi i wyszukiwać konkretnych wykonawców.) Możesz także sortować według epoki, przy czym lata 2000-te były najbardziej odporne na teksty.
4. Shopify Year in Review
Podkreśl zestaw rocznych danych, mając stronę internetową zrootowaną do robienia wszystkiego. Recenzja Shopify 2016 to zbiór danych z raportu rocznego w łatwym do odczytania pakiecie.
Strona przewija się w blokach przypominających strony, w których znajdują się fakty i informacje. Wizualizacja stylu osi czasu przewija się głębiej w łącza z wykresami i innymi wykresami numerycznymi. Ta strona pokazuje, że nawet przy wielu liczbach możesz stworzyć coś oszałamiającego i modnego.
5. Codzienne czynności znanych twórczych ludzi
Nie daj się zwieść myśleniu, bo wykresy liniowe są nudne. Ten niesamowity zestaw wierszy pokazuje fajne dane, które pokazują, jak bardzo znana kreacja spędzała dni. (I jest tam dużo jedzenia i wolnego czasu.)
Tym, co sprawia, że wizualizacja danych działa, jest kolor. Każda linia coś znaczy. Każdy kolor wyraźnie kontrastuje z otaczającymi go kolorami, dzięki czemu każdy fragment informacji jest łatwo widoczny i zrozumiały.
6. Falling Through the Gap
Ta interaktywna wizualizacja danych z BBC jest genialna. Zestaw zmian animowanych kropek podczas operacji przewijania pokazuje na pierwszy rzut oka złożone informacje.
Animacje i pomysł na tę interaktywną infografikę są dobrze zaplanowane i wykonane.
7. Każde zdarzenie całkowitego zaćmienia Słońca
Ta wizualizacja danych łączy w sobie trochę fajnego czarodziejstwa, animacji i danych naukowych, aby dostarczyć spersonalizowane informacje o tym, kiedy (i czy) możesz zobaczyć zaćmienie Słońca.
Zaczyna się od roku urodzenia dla raportu niestandardowego. Oto moje (zauważ, że dane pochodzą z 2017 r.): „Jeśli urodziłeś się w 1980 r., W tym roku masz (lub będzie) 37 lat. Jeśli dożyjesz 100 lat, za życia zażyjesz 43 więcej zaćmień Słońca na całym świecie. Wielu będzie w Ameryce Południowej. Zaćmienie tylko nad wodą. ”
Dane rozszerzają się dalej na wyjaśnienia, jak działa zaćmienie i ścieżki wydarzenia 2017.
8. Mapa wiatru
Gdzie wieje wiatr?
Ta mapa pokazuje prędkości wiatru i średnie dla USA w czasie rzeczywistym. Dane pogodowe są przenoszone na prostą czarno-białą mapę, która pokazuje ruchy wiatru w całym kraju. (Muszę przyznać, że samo oglądanie animacji jest dość uzależniające ... i kojące.)
9. Jak każdy członek dostał się na kongres
Mapowanie danych jest wyczerpującym i wysoce pouczającym doświadczeniem. Ta interaktywna mapa danych pokazuje ścieżkę każdego kongresmana i kongresmenki w USA
Możesz śledzić edukację, pracę i inne doświadczenia polityczne. (To trochę zadziwiające, ile jest podobnych ścieżek.) Zanurz się głębiej w danych, patrząc na indywidualne ścieżki polityków.
10. Największe na świecie naruszenia i ataki danych
Jeśli szukasz danych, które świetnie wyglądają, warto zacząć od informacji. Ten wykres kołowy przedstawia naruszenia danych wynoszące 30 000 lub więcej rekordów od 2008 r. Do chwili obecnej.
Rozmiary kół pokazują, jak duże miało miejsce naruszenie, i łatwo jest zobaczyć, gdzie Twoje informacje mogły zostać złapane w wyniku włamania danych. Najedź kursorem na dowolny krąg, aby uzyskać więcej informacji na temat naruszenia. Styl linii czasu pokazuje również coś innego - znaczny wzrost naruszeń z roku na rok.
11. Dlaczego Twój smartfon wywołuje syndrom „szyi tekstowej”
Niektóre z najlepszych wizualizacji danych łączą ze sobą fakty i historię, aby zapewnić pełniejszy obraz informacji. Tak jest w przypadku tego przewodnika po „szyi tekstowej”.
Małe wykresy danych - wykorzystujące fakty i liczby - łączą się z animowanymi danymi, które pokazują zmiany postawy, aby pokazać (nie powiedzieć) dokładnie, co dzieje się w tym zjawisku, które zaczęło się od liczby przypadków „szyi tekstowej”. To świetny sposób na wyjaśnienie wizualnie czegoś, co w innym przypadku może nie mieć większego sensu.
12. Ilustrowany przewodnik po 2339 zgonach w „Game of Thrones”
Skorzystaj z ilustracji, aby stworzyć ciekawą wizualizację danych. „Washington Post” dokumentował każdą śmierć w popularnym programie „Game of Thrones” z ilustrowanym przewodnikiem.
Ilustracje i kodowanie ikon pokazują śmierć w mgnieniu oka dzięki kliknięciom, które są jeszcze bardziej szczegółowe. Ponadto wszystko jest uporządkowane według sezonu (oraz lokalizacji i typu postaci, jeśli jesteś zainteresowany). Aby udowodnić, że jest to coś więcej niż zabawa, istnieje pełna metodologia jego działania i tego, co „liczy się” jako śmierć.
Wniosek
Korzystanie z wizualizacji danych jest praktycznie wszędzie. Żyjemy w epoce opartej na danych, w której ludzie przyciągają informacje i wiedzę.
Umiejętność gotowania dużych ilości danych w użytecznym projekcie jest cenną umiejętnością, która może pomóc w wielu projektach. A jeśli nie zostałeś jeszcze o to poproszony, są szanse, że wkrótce.
