D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
MohamedZaki
Full window
Github gist
Grippe en France
Built with
blockbuilder.org
forked from
aurelient
's block:
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .province { fill: #000; stroke: #fff; stroke-width: 1px; } .province:hover { fill: #666; } .hidden { display: none; } div.tooltip { color: #222; background-color: #fff; padding: .5em; text-shadow: #f5f5f5 0 1px 0; border-radius: 2px; opacity: 0.9; position: absolute; } </style> </head> <body> <script> var width = 1000, height = 580; var svg = d3.select( "body" ) .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); var projection = d3.geo.conicConformal().center([3, 47]).scale(3000) var path = d3.geo.path() .projection(projection); var color = d3.scale.quantize() .range(['rgb(255,245,240)','rgb(254,224,210)','rgb(252,187,161)','rgb(252,146,114)','rgb(251,106,74)','rgb(239,59,44)','rgb(203,24,29)','rgb(165,15,21)','rgb(103,0,13)']); d3.csv("grippe.csv", function(data) { color.domain([0,200]); d3.json("regions.json",function(json){ for (var i=0; i<data.length; i++){ //Nom de la region var dataRegion= data[i].region; // valeur de la region var dataValue= parseInt(data[i]["02/11/14"])+ parseInt(data[i]["09/11/14"])+ parseInt(data[i]["16/11/14"])+ parseInt(data[i]["23/11/14"])+ parseInt(data[i]["30/11/14"]); for(var j=0; j<json.features.length; j++){ var jsonRegion = json.features[j].properties.nom; if(dataRegion == jsonRegion){ json.features[j].properties.value=dataValue; break; } } } svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d",path) .style("fill",function(d){ var val = d.properties.value; if(val){ return color(val); }else { return "#ccc"; } }) .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); }) .on('mouseout', function() { tooltip.classed('hidden', true); }) }); }); </script> </body>
https://d3js.org/d3.v3.min.js