D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
giguerre
Full window
Github gist
Map visualisation
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } div.tooltip { color: #9b9b9b; background-color: #fff; padding: .5em; text-shadow: #bcbcbc 0 1px 0; border-radius: 2px; opacity: 0.9; position: absolute; } </style> </head> <body> <div> </div> <script> var width = 980, height = 800; var color = d3.scaleLinear() .range([d3.rgb("#e0efff"), d3.rgb('#a800ea')]); var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); var svg = d3.select( "body" ) .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800); var path = d3.geoPath() .projection(projection); d3.csv("GrippeFrance2014.csv", function(data) { color.domain([0,400]); d3.json("regions.json", function(json) { for (var i = 0; i < data.length; i++) { for(var j=0; j<json.features.length; j++) { if(data[i].region == json.features[j].properties.nom) { var dataValue = parseFloat(data[i].somme2014); json.features[j].properties.value= dataValue; } } } svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) //.style("stroke", "#ffffff") //.style("stroke-width", "1") .style("fill", function(d) { var value = d.properties.value; return color(value);}); ; svg.selectAll("path") .on('mousemove', function(d) { var mouse = d3.mouse(svg.node()).map(function(d) { return parseInt(d); }); tooltip.classed('hidden', false) .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px') .html(d.properties.nom + " : " + d.properties.value); }) }); }); </script> </body>
https://d3js.org/d3.v4.min.js