D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
giguerre
Full window
Github gist
gripe fr
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 = 980, height = 780; var color = d3.scaleLinear() .range(["pink","brown"]); 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.domain([0, 1500]); d3.json("regions.json", function(json) { /* Fusionner les donnees avec le GeoJSON des regions: */ 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); svg.selectAll("path") .style("fill", function(d) { var value = d.properties.value; return color(value); }); }); }); //Encapsulation: </script> </body> Popular / About Aurélien’s Block 3bd4b19b6706617c1f4e4d53d3a5725e Updated November 28, 2017 3bd4b19b6706617c1f4e4d53d3a5725e Open Built with blockbuilder.org forked from aurelient's block: forked from aurelient's block: forked from aurelient's block: index.html# <!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 ); // On rajoute un groupe englobant toute la visualisation pour plus tard var g = svg.append( "g" ); var projection = d3.geoAlbersUsa() .translate([width/2, height/2]) .scale([500]); // On definie une echelle de couleur var color = d3.scaleQuantize() .range(["rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]); var path = d3.geoPath() .projection(projection); // Chargement des donnees d3.csv("us-ag-productivity-2004.csv", function(data) { //Set input domain for color scale color.domain([ d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; }) ]); d3.json("us-states.json", function(json) { //On fusionne les donnees avec le GeoJSON for (var i = 0; i < data.length; i++) { //Nom de l'etat var dataState = data[i].state; //Valeur associee a l'etat var dataValue = parseFloat(data[i].value); //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.name; if (dataState == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; //Pas besoin de chercher plus loin break; } } } g.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style("fill", function(d) { //on prend la valeur recupere plus haut var value = d.properties.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#ccc"; } }); }); }); </script> </body> us-ag-productivity-2004.csv# state,value Alabama,1.1791 Arkansas,1.3705 Arizona,1.3847 California,1.7979 Colorado,1.0325 Connecticut,1.3209 Delaware,1.4345 Florida,1.6304 Georgia,1.3891 Iowa,1.5297 Idaho,1.4285 Illinois,1.5297 Indiana,1.4220 Kansas,1.0124 Kentucky,0.9403 Louisiana,0.9904 Maine,1.3877 Maryland,1.2457 Massachusetts,1.1458 Michigan,1.1058 Minnesota,1.2359 Missouri,1.0212 Mississippi,1.1306 Montana,0.8145 North Carolina,1.3554 North Dakota,1.0278 Nebraska,1.1619 New Hampshire,1.0204 New Jersey,1.2831 New Mexico,0.8925 Nevada,0.9640 New York,1.1327 Ohio,1.2075 Oklahoma,0.7693 Oregon,1.3154 Pennsylvania,1.0601 Rhode Island,1.4192 South Carolina,1.1247 South Dakota,1.0760 Tennessee,0.7648 Texas,0.8873 Utah,0.9638 Virginia,0.9660 Vermont,1.0762 Washington,1.1457 Wisconsin,1.1130 West Virginia,0.5777 Wyoming,0.5712 LICENSE# Released under the The MIT License.
https://d3js.org/d3.v4.min.js
https://d3js.org/d3.v4.min.js