Iniciar el mapa de datos D3.js con nuevos datos - json, d3.js

Voy con el ejemplo básico en aquí Excepto que necesito poder actualizar el mapa basadoen datos nuevos (un archivo json). No pude encontrar una manera de cargar los datos directamente dentro del objeto Datamap, así que lo estoy cargando con D3.json y usando el comando para actualizar el mapa. Por alguna razón, la función popupTemplate está recibiendo un objeto de datos nulos y no sé cómo solucionarlo.

¿Cuál es la mejor manera de hacer esto?

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<script src="http://datamaps.github.io/scripts/topojson.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<script>
var data;

var map = new Datamap({
element: document.getElementById("container"),
fills: {
HIGH: "#afafaf",
LOW: "#123456",
MEDIUM: "blue",
UNKNOWN: "#FFFFFF",
defaultFill: "green"
},
geographyConfig: {
popupTemplate: function(geo, data) {
console.log(data)
return ["<div class="hoverinfo"><strong>",
"Number of things in " + geo.properties.name,
": " + data[geo.id].numberOfThings,
"</strong></div>"].join("");
}
}
});
map.legend();


d3.json("path/to/data.json", function(error, json) {
if (error) return console.warn(error);

data = json;
map.updateChoropleth(data);
});
</script>

Este es mi archivo json:

{
"IRL": {
"fillKey": "LOW",
"numberOfThings": "2002"
},
"USA": {
"fillKey": "MEDIUM",
"numberOfThings": "10381"
}
}

Para facilitar la depuración, me puse jsfiddle

Respuestas

No tuve problemas para cargar los datos directamenteDentro de Datamap. En cualquier caso, también simulé una actualización de datos ... el color se actualiza pero no el valor (numberOfThings). En el ejemplo del tutorial, no está claro si se puede hacer esto, aunque tendría sentido que uno pudiera actualizar los valores.

Te dejo con el VIOLÍN Mostrando los resultados de mi experimento.

Un par de notas:

• Creo que tu ventana emergente no se mostraba porque su cadena de retorno necesita ser data.numberOfThings.
• Si no me equivoco cuando jugué con esto antes, si no tiene datos para un país, entonces la ventana emergente no se actualiza y se muestra el mismo valor que para el último país con datos.

@Kiarash, hay dos problemas aquí:

1. Está utilizando los Datamaps del sitio datamaps.github.io, que no recomiendo ya que no puedo garantizar la fiabilidad (tiempo de actividad) o la compatibilidad con versiones anteriores. Lo mejor es descargarlo desde el Página del proyecto Github
2. data no tiene una propiedad con el nombre del país, se debe acceder como data.numberOfThings.

Aquí está una versión de trabajo del código que proporcionó