geochart en d3.js

Question

Estoy buscando alguna guía o un ejemplo de cómo hacer un geochart en d3.js. Necesito algo como this one en google charts, y recurriendo a d3.js ya que necesito un poco de personalización. Hasta ahora, la muestra de d3.js más cercana que encontré es this, pero el código es muy largo y espero encontrar algo más simple.

Answer 1

¿Está buscando un mapa de coropletas? Aquí hay un recent example in 28 lines of code.

Este ejemplo utiliza la proyección predeterminada, d3.geo.albersUsa, que es una proyección compuesta para los Estados Unidos, incluidos Alaska, Hawai y Puerto Rico. Si desea cambiar la región visible, probablemente también desee cambiar la proyección; d3.geo.albers es bueno para los mapas de coropletas porque es de área equitativa. La proyección albers le permite configurar el origin para que pueda enfocarse en una parte específica del mundo, y todas las proyecciones le permiten especificar scale y translate para posicionar el mapa en pantalla.

Si desea ver un mapa del mundo, también me gustaría ver el desarrollo en curso de la extended projections plugin. Esto agrega varias proyecciones de mapas útiles, particularmente para mapas mundiales, como el Winkel Tripel. La próxima versión de D3 también incluirá algunas características nuevas y emocionantes, como la rotación tridimensional para cualquier proyección (incluido corte antemeridiano, prueba dragging this example), adaptive resampling y recorte mejorado.

En cuanto a la coloración del coroplete, puede, por supuesto, colorear las características geográficas como quiera redefiniendo el estilo de "relleno" en función de los datos.

Answer 2

Con todo el respeto debido a @mbostock y su respuesta, pensé que podría agregar algunos recursos adicionales para cualquier persona que se encuentre con esta pregunta.

El ejemplo en el enlace proporcionado por @Yaron Naveh parece ser Mercator projection. Puede encontrar más información sobre las instalaciones de proyección de Mercator de d3.js en el d3.js API. @mbostock también ha tenido la amabilidad de crear bloques/ideas para cada una de las proyecciones en la API (haga clic en la imagen en miniatura de la proyección para ver el ejemplo). Aquí están los enlaces a una simple proyección de Mercator block/gist.

En cuanto al "El arte de preguntar: ¿Cómo te sientes?" link, aquí hay un pequeño código para ir con lo que @mbostock dijo sobre colorear usando el estilo de relleno en función de los datos. En este ejemplo, simplemente selecciono el valor Unicode para el primer carácter del nombre del país en el archivo JSON y hago un color CSS a partir de ese valor usando "steelblue" (# 4682B4 = 4620980) como una especie de semilla (probablemente quiere calcular tonos/tintes).

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); }); 
}); 

Se puede extraer el ejemplo completo aquí como block/gist.

(@mbostock - Gracias por una gran herramienta!)