CODEWITHSUNDEEP
jsoncsvd3.jsgeocoding
kabr
kabr

Reputation: 1339

D3.js: How to combine 2 datasets in order to create a map and show values on.mouseover?

I would like to combine two datasets on a map in D3.js.

For example:

1st dataset: spatial data in .json.

2nd dataset: Data to the areas in .csv

--> When you hover on the map a tooltip should show a sentences with some data from the 2nd dataset.

I am able to make the map and show a tooltip with data within the .json-file, but how do I insert the 2nd dataset?

I appreciate any thoughts! :)

Upvotes: 6

Views: 5082

Answers (1)

reblace
reblace

Reputation: 4195

So, I think what you're asking is how to take spatial data from json and join it with some csv data that is loaded separately?

I did something similar with a choropleth map I was drawing and basically I just created a map of topology element ids to data objects and then I did a lookup using the topology element id to get whatever I wanted to associate with the actual drawn map element (I was using this method to set the color for the choropleth based on the fips country code).

So basically, draw the map so that you have an id associated with each map element that you want to be able to hover over. Then, in your mouseover/mouseout handlers, you will use that id to lookup the data you want to show in the tooltip and either use the svg title element or tipsy or manually draw an svg text element or whatever to show the tooltip.

Here's a couple useful references for drawing tooltips: https://gist.github.com/biovisualize/1016860 http://jsfiddle.net/reblace/6FkBd/2/

From the fiddle:

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

Basically, it's appending an SVG text element and offsetting it from the position of the element being hovered over.

And here's a sample of how I look up data in an external map:

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

If your data is static, you can join it into your topojson file (if that's what you're using). https://github.com/mbostock/topojson/wiki/Command-Line-Reference

The client could change my data, so I kept it separate and redrew the map each time the data changed so that the colors would update. Since my data was topojson, I could access the feature id from the map data using d.properties.code (because I had joined the codes into the topojson file using the topojson tool I reference above... but you could use whatever unique id is in the spatial data file you have).

Upvotes: 4

Related Questions