json - D3.js: ¿Cómo combinar 2 datasets para crear un mapa y mostrar valores en.mouseover?

csv geocoding

Question

Me gustaría combinar dos conjuntos de datos en un mapa en D3.js.

Por ejemplo:

1.er conjunto de datos: datos espaciales en .json.

2 ° conjunto de datos: datos a las áreas en .csv

-> Cuando desplaza el cursor sobre el mapa, la información sobre herramientas debe mostrar unas frases con algunos datos del segundo conjunto de datos.

Puedo hacer el mapa y mostrar una información sobre herramientas con datos dentro del archivo .json, pero ¿cómo puedo insertar el segundo conjunto de datos?

• ¿Una nueva función dentro de mi función que crea el mapa?
• ¿Tengo que tomar una forma completamente nueva?
• ¿Debo fusionar el archivo .json con mi segundo conjunto de datos antes de usar d3.js?

Aprecio cualquier pensamiento! :)

Answer 1

Entonces, creo que lo que estás preguntando es cómo tomar datos espaciales de json y unirlos con algunos datos de csv que se cargan por separado.

Hice algo similar con un mapa de coropletas que estaba dibujando y, básicamente, acabo de crear un mapa de identificadores de elementos de topología para objetos de datos y luego hice una búsqueda utilizando el id del elemento de topología para obtener todo lo que quería asociar con el elemento de mapa dibujado real ( Estaba usando este método para establecer el color de la coropleta según el código de país fips).

Así que, básicamente, dibuja el mapa para que tengas una identificación asociada con cada elemento del mapa sobre el que quieras pasar el cursor. Luego, en los manipuladores mouseover / mouseout, usará ese id para buscar los datos que desea mostrar en la información sobre herramientas y usar el elemento svg title o tipsy o dibujar manualmente un elemento de texto svg o lo que sea para mostrar la información sobre herramientas.

Aquí hay un par de referencias útiles para dibujar información sobre herramientas: https://gist.github.com/biovisualize/1016860 http://jsfiddle.net/reblace/6FkBd/2/

Del violín:

function mouseover(d) {
    d3.select(this).append("text")
        .attr("class", "hover")
        .attr(''transform'', function(d){ 
            return ''translate(5, -10)'';
        })
        .text(d.name + ": " + d.id);
}

// Toggle children on click.
function mouseout(d) {
    d3.select(this).select("text.hover").remove();
}

Básicamente, agrega un elemento de texto SVG y lo compensa desde la posición del elemento sobre el que se pasa el mouse.

Y aquí hay una muestra de cómo busco datos en un mapa externo:

// Update the bound data
data.svg.selectAll("g.map path").transition().duration(750)
    .style("fill", function(d) {
        // Get the feature data from the mapData using the feature code
        var val = mapData[d.properties.code];

        // Return the colorScale value for the state''s value
        return (val !== undefined)? data.settings.colorScale(val) : undefined;
});

Si sus datos son estáticos, puede unirlos a su archivo topojson (si eso es lo que está usando). https://github.com/mbostock/topojson/wiki/Command-Line-Reference

El cliente podía cambiar mis datos, así que los mantuve separados y redibujé el mapa cada vez que cambiaban los datos para que los colores se actualizaran. Como mis datos eran topojson, podía acceder a la identificación de función desde los datos del mapa usando d.properties.code (porque había unido los códigos en el archivo topojson utilizando la herramienta topojson que menciono arriba ... pero podría usar cualquier identificación única está en el archivo de datos espaciales que tienes).