D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
giguerre
Full window
Github gist
my try for map
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 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() // d3.geo.path avec d3 version 3 .projection(projection); d3.csv("GrippeFrance2014.csv", function(data){ // color scale var colors = d3.scaleLinear() .domain([0,2000]) .range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#d43e50", "#9E0142"]); d3.json("regions.json", function(json) { // lier les données du deprtm avec la zone geo for (var i = 0; i < data.length; i++) { for ( var j = 0; j<json.length;j++){ if (json[j].features == data[i].name) { } } } svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path); // creation de color scale // coloriser le depart selon la gripe //appliquer la couleur }); }); </script> </body>
https://d3js.org/d3.v4.min.js