Mükemmellik Haritası: Güzel Web Haritaları Oluşturmak için D3.js'yi Kullanma

Yayınlanan: 2022-03-11

Veriye Dayalı Belgeler veya D3.js, "belgeleri verilere dayalı olarak işlemek için bir JavaScript kitaplığıdır". Veya daha basit bir şekilde ifade etmek gerekirse, D3.js bir veri görselleştirme kitaplığıdır. Mike Bostock tarafından, verilerin statik gösterimi ile etkileşimli ve hareketli veri görselleştirmeleri arasındaki boşluğu doldurma fikriyle geliştirilmiştir.

D3, çok sayıda kullanıma sahip güçlü bir kitaplıktır. Bu derste, D3'ün özellikle zorlayıcı bir uygulamasını tartışacağım: harita oluşturma. Kullanışlı ve bilgilendirici bir web haritası oluşturmanın ortak zorluklarını inceleyeceğiz ve her durumda D3.js'nin yetenekli JavaScript geliştiricilerine haritaların güzel görünmesi ve güzel hissettirmesi için ihtiyaç duydukları her şeyi nasıl sağladığını göstereceğiz.

D3.js ne için kullanılır?

D3.js, herhangi bir keyfi veriyi bir Belge Nesne Modeli'ne (DOM) bağlayabilir ve ardından JavaScript, CSS, HTML ve SVG kullanarak, bu veriler tarafından yönlendirilen belgeye dönüşümler uygulayabilir. Sonuç, basit HTML çıktısı veya animasyonlar, geçişler ve etkileşim gibi dinamik davranışlara sahip etkileşimli SVG çizelgeleri olabilir. Tüm veri dönüştürmeleri ve oluşturma işlemleri, tarayıcıda istemci tarafında yapılır.

En basit haliyle, D3.js, bir DOM'yi işlemek için kullanılabilir. D3.js'nin boş bir belge gövdesine “Merhaba Dünya” metniyle bir paragraf öğesi eklemek için kullanıldığı basit bir örnek:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>

Ancak D3.js'nin gücü, veri görselleştirme yeteneğindedir. Örneğin, grafikler oluşturmak için kullanılabilir. Animasyonlu grafikler oluşturmak için kullanılabilir. Farklı bağlantılı çizelgeleri entegre etmek ve canlandırmak için bile kullanılabilir.

Web Haritaları ve Coğrafi Veri Görselleştirme için D3

Ancak D3.js, yalnızca DOM manipülasyonundan çok daha fazlası için veya çizelgeler çizmek için kullanılabilir. Coğrafi bilgileri işleme söz konusu olduğunda D3.js son derece güçlüdür. Coğrafi verileri işlemek ve sunmak çok zor olabilir, ancak D3.js ile bir harita oluşturmak oldukça basittir.

İşte JSON uyumlu bir veri formatında depolanan verilere dayalı bir dünya haritası çizecek bir D3.js örneği. Sadece haritanın boyutunu ve kullanılacak coğrafi projeksiyonu tanımlamanız (bunun hakkında daha sonra bilgi vermeniz), bir SVG öğesi tanımlamanız, onu DOM'ye eklemeniz ve JSON kullanarak harita verilerini yüklemeniz yeterlidir. Harita stili CSS ile yapılır.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>

İlgili: Güncellenebilir D3.js Grafiklerine Doğru

D3 için Coğrafi Veriler

Bu D3.js öğreticisi için, harita oluşturmanın en iyi JSON biçimlerinde, özellikle GeoJSON ve TopoJSON belirtimlerinde biçimlendirilmiş verilerle çalıştığını unutmayın.

GeoJSON, “çeşitli coğrafi veri yapılarını kodlamak için bir formattır”. Ad/değer çiftlerinin özellik koleksiyonlarında gruplandırılmış ayrık geometri nesnelerini temsil etmek için tasarlanmıştır.

TopoJSON, geometrilerin "yay adı verilen paylaşılan çizgi parçalarından birbirine dikildiği" topolojiyi kodlayabilen GeoJSON'un bir uzantısıdır. TopoJSON, yalnızca uzamsal bilgileri değil, coğrafi özellikler arasındaki ilişkisel bilgileri depolayarak fazlalığı ortadan kaldırır. Sonuç olarak, geometri çok daha kompakt ve geometrilerin özellikleri paylaştığı yerlerde birleştirilmiştir. Bu, GeoJSON eşdeğerinden %80 daha küçük tipik TopoJSON dosyasıyla sonuçlanır.

Bu nedenle, örneğin, birbirine sınırı olan birkaç ülkenin bulunduğu bir harita verildiğinde, sınırların paylaşılan bölümleri, sınırın her iki tarafındaki her ülke için bir kez olmak üzere GeoJSON'da iki kez depolanacaktır. TopoJSON'da sadece bir satır olacak.

Harita Kitaplıkları: Google Haritalar ve Leaflet.js

Bugün en popüler harita kütüphaneleri Google Haritalar ve Leaflet'tir. Web'de hızlı ve kolay bir şekilde "kaygan haritalar" elde etmek için tasarlanmıştır. "Kaygan haritalar", harita üzerinde yakınlaştırmaya ve kaydırmaya izin veren JavaScript destekli modern web haritalarına atıfta bulunan bir terimdir.

Broşür, Google Haritalar'a harika bir alternatiftir. Basitlik, performans ve kullanılabilirlik göz önünde bulundurularak mobil uyumlu etkileşimli haritalar yapmak için tasarlanmış açık kaynaklı bir JavaScript kitaplığıdır. Leaflet, internette bulunan geniş raster tabanlı harita seçeneklerinden yararlanırken en iyisidir ve döşemeli haritalarla çalışmanın basitliğini ve bunların sunum yeteneklerini getirir.

Broşür, D3.js'nin veri işleme özellikleriyle birleştirildiğinde ve vektör tabanlı grafikler için D3.js'yi kullanmak için büyük bir başarıyla kullanılabilir. Bunları bir araya getirmek, her iki kitaplığın en iyisini ortaya çıkarır.

Google Haritalar açık kaynak olmadığı için Google Haritalar'ın D3.js ile birleştirilmesi daha zordur. Google Haritalar ve D3'ü birlikte kullanmak mümkündür, ancak bu çoğunlukla verilerin Google Haritalar arka plan haritaları üzerinden D3.js ile üst üste bindirilmesiyle sınırlıdır. Daha derin entegrasyon, bilgisayar korsanlığı olmadan gerçekten mümkün değildir.

Projeksiyonlar - Küresel Merkatörün Ötesinde

3 boyutlu küresel Dünya'nın haritalarının 2 boyutlu yüzeylere nasıl yansıtılacağı sorusu eski ve karmaşık bir problemdir. Bir harita için en iyi projeksiyonu seçmek, her web haritası için verilmesi gereken önemli bir karardır.

Yukarıdaki basit dünya haritası D3.js öğreticimizde, d3.geo.mercator() çağırarak Spherical Mercator projeksiyon koordinat sistemini kullandık. Bu projeksiyon aynı zamanda Web Mercator olarak da bilinir. Bu projeksiyon, Google Haritalar'ı tanıttıklarında Google tarafından popüler hale getirildi. Daha sonra, OpenStreetMap, Bing Maps, Here Maps ve MapQuest gibi diğer web servisleri de projeksiyonu benimsedi. Bu, Küresel Mercator'u çevrimiçi kaygan haritalar için çok popüler bir projeksiyon haline getirdi.

Tüm haritalama kitaplıkları, kutudan çıktığı haliyle Spherical Mercator projeksiyonunu destekler. Diğer projeksiyonları kullanmak istiyorsanız, örneğin bir koordinat sisteminden diğerine herhangi bir dönüşüm yapabilen Proj4js kütüphanesini kullanmanız gerekecektir. Leaflet durumunda, bir Proj4Leaflet eklentisi vardır. Google Haritalar söz konusu olduğunda, hiçbir şey yok.

D3.js, birçok farklı coğrafi projeksiyon için yerleşik destekle kartografik projeksiyonları yepyeni bir düzeye taşıyor. D3.js, coğrafi izdüşümleri tam geometrik dönüşümler olarak modeller; bu, düz çizgiler eğrilere yansıtıldığında D3.js'nin çizgileri alt bölümlere ayırmak ve izdüşüm yapaylıklarını ortadan kaldırmak için yapılandırılabilir uyarlanabilir yeniden örnekleme uyguladığı anlamına gelir. Genişletilmiş Coğrafi Projeksiyonlar D3 eklentisi, desteklenen projeksiyonların sayısını 40'ın üzerine çıkarır. d3.geo.projection ve d3.geo.projectionMutator kullanarak tamamen yeni bir özel projeksiyon oluşturmak bile mümkündür.

Raster Haritalar

Daha önce de belirtildiği gibi, D3.js'nin en güçlü yönlerinden biri vektör verileriyle çalışmaktır. Raster verilerini kullanmak için D3.js'yi Leaflet ile birleştirme seçeneği vardır. Ancak, kaygan haritalar oluşturmak için d3.geo.tile kullanarak her şeyi yalnızca D3.js ile yapma seçeneği de vardır. Yalnızca D3.js ile bile insanlar raster haritalarla harika şeyler yapıyor.

Anında Vektör Manipülasyonu

Klasik haritacılıktaki en büyük zorluklardan biri harita genellemesidir. Olabildiğince ayrıntılı geometriye sahip olmak istiyorsunuz, ancak bu verilerin görüntülenen haritanın ölçeğine uyması gerekiyor. Çok yüksek bir veri çözünürlüğüne sahip olmak, indirme süresini uzatır ve oluşturmayı yavaşlatırken, çok düşük bir çözünürlük, ayrıntıları ve topolojik ilişkileri bozar. Vektör verilerini kullanan kaygan haritalar, harita genellemesinde büyük bir sorunla karşılaşabilir.

Seçeneklerden biri önceden harita genellemesi yapmaktır: farklı çözünürlüklerde farklı veri kümelerine sahip olmak ve ardından mevcut seçili ölçek için uygun veri kümesini görüntülemek. Ancak bu, veri kümelerini çoğaltır, veri bakımını karmaşıklaştırır ve hatalara eğilimlidir. Ancak çoğu haritalama kitaplığı bu seçenekle sınırlıdır.

Daha iyi çözüm, anında harita genellemesi yapmaktır. Ve işte güçlü veri işleme özellikleriyle D3.js tekrar geliyor. D3.js, tarayıcıda satır sadeleştirmenin yapılmasını sağlar.

Daha fazla istiyorum!

D3.js'de ustalaşmak kolay değildir ve dik bir öğrenme eğrisi vardır. JavaScript nesneleri, jQuery zincirleme sözdizimi, SVG ve CSS ve tabii ki D3'ün API'si gibi birçok teknolojiye aşina olmak gerekir. Bunun da ötesinde, sonunda güzel grafikler oluşturmak için biraz tasarım becerisine sahip olmak gerekir. Neyse ki, D3.js'nin büyük bir topluluğu var ve insanların inceleyebileceği çok fazla kaynak var. D3 öğrenmek için harika bir başlangıç noktası bu eğitimlerdir.

Örnekleri inceleyerek öğrenmeyi seviyorsanız, Mike Bostock web sayfasında 600'den fazla D3.js örneği paylaştı. Tüm D3.js örnekleri, sürüm kontrolü için git deposuna sahiptir ve çatallanabilir, klonlanabilir ve yorumlanabilir.

CartoDB kullanıyorsanız, CartoDB'nin D3 haritalarını çok kolay hale getirdiğini duymaktan memnun olacaksınız.

Ve sonunda küçük bir bonus olarak, D3'ün yapabileceği harika şeyleri gösteren en sevdiğim örneklerden biri:

dünya, D3.js ile yapılan tüm dünyanın küresel bir animasyonlu 3D rüzgar haritası. Dünya, Ulusal Çevresel Tahmin Merkezleri, NOAA / Ulusal Hava Servisi'ndeki süper bilgisayarlar tarafından yapılan ve JSON'a dönüştürülen hava tahminlerine dayanan küresel hava koşullarının bir görselleştirmesidir. Rüzgar hızı okumaları için yükseklikler gibi görüntülenen verileri özelleştirebilir, üst üste binen verileri değiştirebilir ve hatta Dünya projeksiyonunu değiştirebilirsiniz.

İlgili: Web Geliştiricileri için En İyi Çevrimiçi Haritalama Araçları Araştırması: Yol Haritalarına Giden Yol Haritası