D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Chmits
Full window
Github gist
Tp4
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; } </style> </head> <body> <script> var width = 700, height = 580; var color = d3.scaleLinear() .range(["white", "green"]); var svg = d3.select( "body" ) .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800) .translate([width/2, height/2]); var path = d3.geoPath() // d3.geo.path avec d3 version 3 .projection(projection); d3.json("france.json", function(json) { svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path); }); d3.csv("grippe.csv", function(data) { var mini=123456789; var maxi=0; data.forEach(function(d) { if(d.somme2014<mini){ mini=d.somme2014; } if(d.somme2014>maxi){ maxi=d.somme2014; } }); console.log(mini); //var max = d3.min(d3.values(data)); color.domain([0, maxi]); data.forEach(function(d) { //console.log(d); }); d3.json("regions.json", function(json) { //On fusionne les donnees avec le GeoJSON des regions svg.selectAll("path") .style("fill", function(d) { console.log(d); var code; var value = d.properties.nom; data.forEach(function(dd) { if(dd.region == value){ code=dd.somme2014; } }); return color(code); }); }); }); </script> </body>
https://d3js.org/d3.v4.min.js