Web Tasarımında Veri Görselleştirme: 12 Çarpıcı Örnek
Veri, veri, her yerde. Ama bununla ne yapıyorsun? Bugün, web sitesi tasarımında verilerle nasıl çalışacağınız hakkındaki düşüncelerinizi hemen başlatmak için 12 çarpıcı veri görselleştirme örneği topladık.
Verileri yeni ve ilginç yollarla sergileme yeteneğinin tasarımcı olarak büyük bir varlık olabileceği bir zamanda yaşıyoruz.
İster büyük bir sayı koleksiyonunuz olsun, ister sadece sergilemek istediğiniz bilgiler olsun, bu tasarım stili kitinizde harika bir araç olabilir.
Envato Elements'i keşfedin
1. NFL'nin Tarihçesi
32 takıma yayılmış onlarca yıllık veri sayesinde, NFL'deki oyunlar hakkında bol miktarda bilgi mevcut. FiveThirtyEight, futbol tarihinin gelgitlerini ve akışlarını görmek için takım tarafından görüntüleyebileceğiniz bir dizi etkileşimli grafik haline getirdi.
Bu veri görselleştirmesi ile ilgili en iyi şey, çok basit olmasıdır. Çizgiler kazanç ve kayıpları gösterir. Ancak tıklamalar ve fareyle üzerine gelindiğinde, veriler hayata geçirilir: Tüm lig için ortalamaların haritasına yerleştirilen her bir oyun için puanlar, tarihler ve kayıtlar alabilirsiniz. (Böylece ekibinizin paketin önünde mi arkasında mı olduğunu görebilirsiniz.)
2. Seçicilik
Selfie'ler eğlenceli bir fotoğraf setinden daha fazlasıdır. Selfiecity, çeken insanlar hakkında demografik bilgi bulmak için binlerce fotoğrafı bir araya getirmek için zengin medya görselleştirmelerini kullanır.
Bu veri setinin en iyisi, hepsi görsel olsa da - binlerce fotoğraf - kadınların veya erkeklerin daha fazla fotoğraf çekip selfie yaşına bakılmaksızın, insanların farklı yerlerde çektiği selfie tarzı gibi desenleri görmeye başlayabilmenizdir. tutanlar. Burada bazı istatistikler ve sayılar olsa da, bu veriler dev bir ızgaradaki fotoğraflar kullanılarak çizilir.
3. Hip Hop En Büyük Kelime
ThePudding'in bu projesi, verilerin her zaman numaralandırılması gerekmediğini göstermektedir. Hip hop şarkı sözlerinde kullanılan benzersiz kelimelerin sayısını analiz eder ve sanatçının görüntüleri ile en büyük kelimeleri kelime sayısına göre çizer.
Şöyle çalışır: “Hip hop'taki en ünlü sanatçıların bazılarının kullandığı benzersiz kelimelerin sayısını karşılaştırır (yani Tahir Hemphill tarafından önerilen lirizmin nicel bir görünümünün bir örneği). Her sanatçının ilk 35.000 sözünü kullandım. Bu şekilde Jay-Z gibi üretken sanatçılar Drake gibi daha yeni sanatçılar ile karşılaştırılabilir. ”
Çizilen grafiğin basit siyah beyaz tasarımı görsel olarak ilginç ve hangi sanatçıların paketin önünde olduğunu görmeyi kolaylaştırıyor. (Ya da daha etkileşimli araçları kullanabilir ve belirli sanatçıları arayabilirsiniz.) Döneme göre de sıralayabilirsiniz, 2000'ler en şarkı sözüne göre en sağlam olanıdır.
4. İncelenen Shopify Yılı
Tüm verileri görsel hale getirmeye dayanan bir web sitesi ile bir dizi yıllık veriyi renklendirin. Shopify'ın 2016 Yılı İncelemesi, okunması kolay bir pakette yıllık rapor verilerinin bir koleksiyonudur.
Site, gerçekler ve bilgilerle birlikte sayfa benzeri bloklarda kayar. Zaman çizelgesi stili görselleştirme, grafikler ve diğer sayısal grafiklerle olan bağlantılara daha derin kaydırır. Bu site, çok sayıda numarayla bile, çarpıcı ve modaya uygun bir şey yaratabileceğinizi gösteriyor.
5. Ünlü Yaratıcı Kişilerin Günlük Rutinleri
Düşünme çubuğu içine aldanmayın veya çizgi grafikler sıkıcı. Bu inanılmaz çizgi seti, bazı ünlü reklam öğelerinin günlerini nasıl geçirdiğini gösteren harika veriler gösteriyor. (Ve orada bol yemek ve boş zaman var.)
Bu veri görselleştirmesini çalıştıran şey renktir. Her satır bir şey ifade eder. Her renk etrafındaki renklerle tam bir tezat oluşturur, böylece her bilgi parçasını görmek ve anlamak kolaydır.
6. Boşluktan Düşmek
BBC'nin bu interaktif veri görselleştirmesi harika. Kaydırma eylemindeki bir dizi animasyonlu nokta değişikliği karmaşık bilgileri bir bakışta gösterir.
Bu etkileşimli infografikin arkasındaki animasyonlar ve fikir iyi planlanmış ve uygulanmıştır.
7. Her Toplam Güneş Tutulması Olur
Bu veri görselleştirme, ne zaman (ve eğer) güneş tutulması görebileceğiniz konusunda özelleştirilmiş bilgiler sağlamak için biraz havalı sihirbaz, animasyon ve bilimsel verileri karıştırır.
Özel bir rapor için doğum yılınızla başlar. İşte benim (veri çekmenin 2017'den geldiğine dikkat edin): “1980'de doğduysanız, bu yıl 37 yaşındasınız (veya olacaksınız). 100 yaşına kadar yaşıyorsanız, yaşamınız boyunca dünya genelinde 43 daha fazla güneş tutulması olacaktır. Birçoğu Güney Amerika'nın üzerinde olacak. Biri sadece su üzerinde tutulur. ”
Veriler, bir tutulmanın nasıl çalıştığına ve 2017 olayının yollarına ilişkin açıklamalara daha da genişliyor.
8. Rüzgar Haritası
Rüzgar nerede esiyor?
Bu harita gerçek zamanlı olarak Amerika Birleşik Devletleri için rüzgar hızlarını ve ortalamalarını gösterir. Hava durumu verileri, ülke genelinde hareketli rüzgar modellerini gösteren basit bir siyah beyaz haritaya taşınır. (İtiraf etmeliyim ki, sadece animasyonu izlemek oldukça bağımlılık yapıcı… ve yatıştırıcı.)
9. Her Üye Kongreye Nasıl Geldi?
Veri haritalama, kapsamlı ve oldukça bilgilendirici bir deneyimdir. Bu interaktif veri haritası ABD'deki her bir kongre ve kongre üyesinin yolunu göstermektedir
Eğitim, iş ve diğer siyasi deneyimleri takip edebilirsiniz. (Kaç tane benzer yol olduğu şaşırtıcı.) Politikacıların bakış açılarına ve bireysel yollarına bakarak verilere daha derinlemesine dalın.
10. Dünyanın En Büyük Veri İhlalleri ve Hack'leri
Harika görünen veriler arıyorsanız, Information is Beautiful başlamak için iyi bir yerdir. Bu daire grafiği 2008'den bugüne kadar 30.000 veya daha fazla kaydın veri ihlallerini çiziyor.
Daire boyutları, ihlalin ne kadar büyük olduğunu gösterir ve bilgilerinizin bir bilgisayar korsanlığına yakalanmış olabileceğini görmek kolaydır. İhlali hakkında daha fazla bilgi için herhangi bir dairenin üzerine gelin. Zaman çizelgesi tarzı tasarım başka bir şey de gösteriyor - her yıl ihlallerde büyük artış.
11. Akıllı Telefonunuz Neden 'Metin Boyun' Sendromuna Neden Oluyor?
En iyi veri görselleştirmelerinden bazıları, daha eksiksiz bir bilgi resmi sağlamak için gerçekleri ve bir hikayeyi birbirine bağlar. Bu “metin boynu” kılavuzunda durum böyledir.
Küçük veri grafikleri - gerçekleri ve sayıları kullanarak - “metin boynu” vakalarının sayısıyla başlayan bu fenomende tam olarak ne olduğunu göstermek (söylememek) için duruş değişikliklerini gösteren animasyonlu verilerle karıştırın. Aksi takdirde pek mantıklı olmayan bir şeyi görsel olarak açıklamanın harika bir yoludur.
12. 'Game of Thrones'da 2.339 Ölüm için Resimli Kılavuz
İlgi çekici bir veri görselleştirmesi yapmak için de resimler kullanın. Washington Post, popüler gösteri “Game of Thrones” daki her ölümü resimli bir rehberle belgeledi.
Resimler ve simge kodlamaları, daha da ayrıntılara giren tıklama eylemleriyle bir bakışta ölümleri gösterir. Ayrıca, her şey mevsime göre düzenlenmiştir (ve ilgileniyorsanız konum ve karakter türü). Bunun sadece eğlenceden daha fazlası olduğunu kanıtlamak için, nasıl çalıştığı ve ölüm olarak neyin önemli olduğu konusunda tam bir metodoloji vardır.
Sonuç
Veri görselleştirmelerinin kullanımı hemen hemen her yerde. İnsanların bilgi ve bilgiye çekildiği, veri odaklı bir çağda yaşıyoruz.
Büyük miktarda veriyi kullanılabilir bir tasarıma kaynatmak, bir dizi projede size yardımcı olabilecek değerli bir beceridir. Ve henüz bunu yapman istenmediyse, yakında olma ihtimalin var.
