D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Npfn
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; } div.tooltip { color: #222; background-color: #fff; padding: .5em; text-shadow: #f5f5f5 0 1px 0; border-radius: 2px; opacity: 0.9; position: absolute; } .hidden { display: none; } </style> </head> <body> <div> <input id="slider" type="range" value="1" min="0" max="51" step="1" /> <span id="week">week</span> </div> <script> var width = 700, height = 580; var svg = d3.select( "body" ) .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var tooltip = d3.select('body').append('div') .attr('class', 'tooltip'); 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)"]); // See formats https://bl.ocks.org/zanarmstrong/raw/05c1e95bf7aa16c4768e/ var parseDate = d3.timeParse("%d/%m/%y"); 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) { //Set input domain for color scale color.domain([0,200]); /*color.domain([ d3.min(data, function(d) { return d.value; }), d3.sum(data, function(d) { return d.value; }) ])*/ var weeksArray = Object.keys(data[0]).filter(parseDate) //remove region name and sum on the year w/ filter d3.json("regions.json", function(json) { //On fusionne les donnees avec le GeoJSON des regions for (var i = 0; i < data.length; i++) { var dataRegion = data[i].region var dataValue = parseFloat(data[i].somme2014); var dataValueNov = SommeNov(data[i]); for(var j = 0; j <json.features.length; j++){//pour chaque region var jsonRegion = json.features[j].properties.nom; if (dataRegion == jsonRegion) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValueNov; break; } } }//end for drawMap(json,0) d3.select("#slider").on("input", function() { updateViz(weeksArray,+this.value,json); }); }); }); function HandleMouseOn(d){ tooltip.classed('hiden',false) .html(d.properties.nom +"<br/>"+ d.properties.value) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); } function HandleMouseOut(){ tooltip.classed('hiden',true); } function SommeNov(d) { var dataValueNov = 0; dateSet = Object.keys(d).filter(parseDate) for(k=0 ; k<dateSet.length ; k++){ if(parseDate(dateSet[k]).getMonth()+1==11){//parce que get.month renvoie un indice entre 0 et 11 dataValueNov += parseFloat(d[dateSet[k]]); } } return dataValueNov } function updateViz(weeksArray,value,json){ //console.log("update "+ weeksArray[value] + " value " + value); d3.select('#week').html(weeksArray[value]); drawMap(json,value); } function drawMap(json, currentWeek) { carte = svg.selectAll("path") .data(json.features); if(currentWeek != 0) // code en cas de mise a jour de la carte / de changement de semaine carte.attr("class", "update") .attr("fill", function(d) { /* je n'ai pas reussi cette partie var value = d[currentWeek].properties.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#ccc"; }*/ }) // code pour la creation de la carte quand les donnees sont chargees la 1e fois. else{ carte.enter() .append("path") .attr("class", "enter") .attr("d", path) .attr("class", function(d){return 'Region'+ d.properties.nom;}) .style("fill", function(d) { var value = d.properties.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#ccc"; } }) .on('mousemove', HandleMouseOn) .on('mouseout', HandleMouseOut) } } </script> </body>
https://d3js.org/d3.v4.min.js