geochart in d3.js

Question

Sto cercando una guida o un esempio su come fare un geochart in d3.js. Ho bisogno di qualcosa come this one in google charts e di passare a d3.js poiché ho bisogno di personalizzazione. Finora l'esempio più vicino d3.js che ho trovato è this ma il codice è molto lungo e spero di trovare qualcosa di più semplice.

Answer 1

Stai cercando una mappa di coropleta? Ecco uno recent example in 28 lines of code.

Questo esempio utilizza la proiezione predefinita, d3.geo.albersUsa, che è una proiezione composita per gli Stati Uniti tra cui Alaska, Hawaii e Porto Rico. Se vuoi cambiare la regione visibile, probabilmente vuoi anche cambiare la proiezione; d3.geo.albers è valido per le mappe di coropleta perché è uguale all'area. La proiezione Albers consente di impostare la origin in modo che è possibile concentrarsi su una parte specifica del globale, e tutte le proiezioni consentono di specificare scale e translate per posizionare la mappa sullo schermo.

Se si desidera visualizzare una mappa del mondo, mi piacerebbe anche dare un'occhiata al continuo sviluppo del extended projections plugin. Ciò aggiunge una serie di utili proiezioni cartografiche, in particolare per le mappe del mondo, come lo Winkel Tripel. La prossima versione di D3 includerà anche alcune interessanti nuove funzioni come la rotazione tridimensionale per qualsiasi proiezione (incluso il taglio di antemeridiano, prova dragging this example), adaptive resampling e il ritaglio migliorato.

Per quanto riguarda la colorazione del choropleth, si può di colore ovviamente caratteristiche geografiche come più vi piace ridefinendo lo stile di "riempire" in funzione di dati.

Answer 2

Con tutto il rispetto per @mbostock e la sua risposta, ho pensato di aggiungere alcune risorse aggiuntive per chi viene in tutta questa domanda.

L'esempio nel link fornito da @Yaron Naveh sembra essere un Mercator projection. Puoi trovare ulteriori informazioni sugli impianti di proiezione Mercator di d3.js nello d3.js API. @mbostock è stato anche abbastanza gentile da creare blocchi/elenchi per ciascuna delle proiezioni nell'API (fare clic sull'immagine di anteprima della proiezione per l'esempio). Ecco i link a una semplice proiezione Mercator block/gist.

Per quanto riguarda il "The Art of richiesto - Come ti senti?" link, ecco un piccolo codice da seguire con ciò che @mbostock ha detto sulla colorazione usando lo stile di riempimento come funzione dei dati. In questo esempio, sto semplicemente selezionando il valore unicode per il primo carattere del nome del paese nel file JSON e facendo un colore CSS da quel valore usando "steelblue" (# 4682B4 = 4620980) come una sorta di seme (probabilmente voglio calcolare sfumature/tinte).

d3.json("readme.json", function(collection) { 
    d3.select("svg").selectAll("path") 
     .data(collection.features) 
    .enter().append("path") 
     .attr("d", d3.geo.path().projection(d3.geo.mercator())) 
     .style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); }); 
}); 

È possibile controllare l'esempio completo qui come un block/gist.

(@mbostock - Grazie per un grande strumento così!)