xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> h1 { text-align : center; } body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { position:relative; left: 0px; border: 1px solid #B0E0E6; } svgR { position: relative; left: 0px; border: 3px solid #B0E0E6; } .province { fill: #000; stroke: #fff; stroke-width: 1px; } .province:hover { opacity: 0.5; } .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; } div.tooltipR { color: #222; background-color: #fff; padding: .5em; text-shadow: #f5f5f5 0 1px 0; border-radius: 2px; opacity: 0.9; position: absolute; } .provinceR { fill: #000; stroke: #fff; stroke-width: 1px; } .provinceR:hover { opacity: 0.5; } </style></head><body> <div class="container"> <div class="svgL" style="float:left;width:50%;"> <div> <input id="sliderYear" type="range" value="1" min="1" max="5" step="1" /> <span id="year">year </span> </div> <div> <input id="slider" type="range" value="1" min="1" max="12" step="1" /> <span id="month">month </span> </div> </div> <div class="svgR" style="float:left;width:50%;"> <div> <input id="sliderYearR" type="range" value="1" min="1" max="5" step="1" /> <span id="yearR">year </span> </div> <div> <input id="sliderR" type="range" value="1" min="1" max="12" step="1" /> <span id="monthR">month </span> </div> </div> </div> <script> /***************************** FIRST *******************************/ var width = 500, height = 580; var svg = d3.select( "body" ).selectAll("div.svgL") .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var carte; var minG,maxG,pas; // French map var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2500) .translate([300,300]); // On definie une echelle de couleur var color = d3.scaleQuantize() .range(["rgb(213,239,204)", "rgb(169,221,160)", "rgb(94,186,97)", "rgb(42,141,71)", "rgb(0,91,36)"]); var nbrColors =5; /*Area containing the name and the value of each region*/ var tooltip = d3.select('body') .append('div') .attr('class', 'hidden tooltip'); var path = d3.geoPath() // d3.geo.path avec d3 version 3 .projection(projection); // On rajoute un groupe englobant toute la visualisation pour plus tard var g = svg.append( "g" ); d3.csv("TER_France2013_2017.csv", function(data) { var jsonF; var listDates = Object.keys(data[0]); var listYears = []; // Will contain [2013,2014,2015,2016] var listMonths = []; // Will contain [Janvier,...,Decembre] var currentYear = 1; //"2013"; var currentMonth = 1; //"Janvier"; /*Begin legend*/ var element; minG = parseFloat(Object.values(data[0])[1]); maxG = parseFloat(Object.values(data[0])[1]); for (var i = 0; i < data.length; i++) { for(var j = 1; j < listDates.length-4; j++){ element = parseFloat(Object.values(data[i])[j]); if (element < minG ){ minG = element; } if (element > maxG ){ maxG = element; } } } pas = (maxG - minG)/nbrColors; drawLegende(minG, maxG,pas); /*End legend*/ for(var m = 1; m< listDates.length; m++){ var datee = listDates[m].split(" "); //console.log("Date ====> "+ datee[1]);//listMonths // console.log("Date ====> "+ listMonths) if (listYears.findIndex(p => p == datee[1]) === (-1)) { listYears.push(datee[1]); } if (listMonths.findIndex(p => p == datee[0]) === (-1)) { if(datee[0] != "Somme2013" && datee[0] != "Somme2014" && datee[0] != "Somme2015" && datee[0] != "Somme2016" && datee[0] != "Somme2017"){ listMonths.push(datee[0]); } } } //console.log("YEa?????????rs : ==>" + listYears[0]); //console.log("YEa?????????rs : ==>" + listMonths[1]); d3.json("regions.json", function(json) { // first value for slider var first = listDates[1].split(" "); // first value for sliderYear var firstYear = listYears[0]; var firstMonth = listMonths[0]; //d3.select('#month').html(first[0]); d3.select('#month').html(firstMonth); d3.select('#year').html(firstYear); // update the month in slider d3.select("#slider").on("input", function() { //currentMonth = listMonths[this.value-1]; currentMonth = +this.value; //console.log("currentMonth" + currentMonth); updateViz(+this.value); }); d3.select("#sliderYear").on("input", function() { //currentYear = listYears[this.value-1]; currentYear = +this.value; // console.log("currentYear" + currentYear); updateViz2(+this.value); }); //On fusionne les donnees avec le GeoJSON des regions for (var i = 0; i < data.length; i++) { // Find the name of the region in csv file var dataState = data[i].region; //console.log("DataState : " + dataState ) for (var j = 0; j< json.features.length; j++){ // Find the name of the region in json file var jsonState = json.features[j].properties.nom;// if (dataState == jsonState) { json.features[j].properties.tab = Object.values(data[i]); //console.log(json.features[j].properties.tab); //stop because result found break; } } } svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path); jsonF = json; drawMap(currentMonth, currentYear); }); // End of "regions.json" //update elements function updateViz(val){ d3.select('#month').html(listMonths[val-1]); drawMap(currentMonth, currentYear); }; function updateViz2(valY){ d3.select('#year').html(listYears[valY-1]); drawMap(currentMonth, currentYear); }; // Draw the map function drawMap(monthBis, yearBis){ var nbr; var currentDate = 12*(yearBis-1)+monthBis ; //fevrier 2017 => 2017 = 5 fevrier 2 ====> 12*(yearBis-1)+monthBis // console.log("cu rrentDate ==========> " + currentDate); //Set input domain for color scale color.domain([ minG,maxG]); carte = svg.selectAll("path") .data(jsonF.features); carte .on('mousemove', function(d) { if(d.properties.tab == undefined || d.properties.tab == "NaN"){ nbr = "undefined"; }else { nbr = d.properties.tab[currentDate]; } var mouse = d3.mouse(svg.node()).map(function(d) { return parseInt(d); }); //console.log(" 1 : =>" + mouse[0]); tooltip.classed('hidden', false) .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px') .html(d.properties.nom + ":" + parseFloat(nbr).toFixed(2)+ " %"); }) .on('mouseout', function() { tooltip.classed('hidden', true); }); //code in case of update of the map / change of month carte .attr('class', function(d) { return 'province ' + d.properties.code; }) .attr('d', path) .style("fill", function(d) { // get value found above var tab = d.properties.tab; if (tab && tab[currentDate] != "") { // console.log("tabbbbb ==>" + tab[currentDate]); return color(tab[currentDate]); } else { // if no value then color with Grey return "#ccc"; } }); //fist time of coloring the map carte.selectAll("path") .enter() .data(jsonF.features) .append("path") .attr("class", "enter") .attr("d", path) .style("fill", function(d) { // get value found above var tab = d.properties.tab; // console.log("tabbbb ==>" + tab[currentDate]); if (tab && tab[currentDate] != "") { return color(tab[currentDate]); } else { // if no value then color with Grey return "#ccc"; } }); }; // End of drawMap// /*Function to add legende */ function drawLegende(min, max,pas){ var c = color; var limites = []; c.domain([min,max]); //console.log("limites Avant : "+ limites); var bool; for(var it=min; it<max; it = it+pas){ limites.push(it); } //console.log("limites Apres : "+ limites);// var legend = svg.selectAll(".legend") .data(limites) .enter() .append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", function(d) { return color(d); }); legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { var dPas = d+ pas; return parseFloat(d).toFixed(2) + " %-" + parseFloat(dPas).toFixed(2)+ " %" ; }); } }); // End of "d3.csv.. /***************************** 2nd *******************************/ var svgR = d3.select( "body" ).selectAll("div.svgR") .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var carteR; // French map var projectionR = d3.geoConicConformal().center([2.454071,46.279229]).scale(2500).translate([300,300]); /*Area containing the name and the value of each region*/ var tooltipR = d3.select('body') .append('div') .attr('class', 'hiddenR tooltipR'); var pathR = d3.geoPath() // d3.geo.path avec d3 version 3 .projection(projectionR); d3.csv("TER_France2013_2017.csv", function(dataR) { var jsonFR; var listDatesR = Object.keys(dataR[0]); var listYearsR = []; // Will contain [2013,2014,2015,2016] var listMonthsR = []; // Will contain [Janvier,...,Decembre] var currentYearR = 1; //"2013"; var currentMonthR = 1; //"Janvier"; for(var m = 1; m< listDatesR.length; m++){ var dateeR = listDatesR[m].split(" "); if (listYearsR.findIndex(p => p == dateeR[1]) === (-1)) { listYearsR.push(dateeR[1]); } if (listMonthsR.findIndex(p => p == dateeR[0]) === (-1)) { if(dateeR[0] != "Somme2013" && dateeR[0] != "Somme2014" && dateeR[0] != "Somme2015" && dateeR[0] != "Somme2016" && dateeR[0] != "Somme2017"){ listMonthsR.push(dateeR[0]); } } } d3.json("regions.json", function(jsonR) { // first value for slider var firstR = listDatesR[1].split(" "); // first value for sliderYear var firstYearR = listYearsR[0]; var firstMonthR = listMonthsR[0]; //d3.select('#month').html(first[0]); d3.select('#monthR').html(firstMonthR); d3.select('#yearR').html(firstYearR); // update the month in slider d3.select("#sliderR").on("input", function() { //currentMonth = listMonths[this.value-1]; currentMonthR = +this.value; //console.log("currentMonth" + currentMonth); updateVizR(+this.value); }); d3.select("#sliderYearR").on("input", function() { //currentYear = listYears[this.value-1]; currentYearR = +this.value; // console.log("currentYear" + currentYear); updateViz2R(+this.value); }); //On fusionne les donnees avec le GeoJSON des regions for (var i = 0; i < dataR.length; i++) { // Find the name of the region in csv file var dataStateR = dataR[i].region; //console.log("DataState : " + dataState ) for (var j = 0; j< jsonR.features.length; j++){ // Find the name of the region in json file var jsonStateR = jsonR.features[j].properties.nom;// if (dataStateR == jsonStateR) { jsonR.features[j].properties.tab = Object.values(dataR[i]); //console.log(json.features[j].properties.tab); //stop because result found break; } } } svgR.selectAll("path") .data(jsonR.features) .enter() .append("path") .attr("d", path); jsonFR = jsonR; drawMapR(currentMonthR, currentYearR); }); // End of "regions.json" //update elements function updateVizR(val){ d3.select('#monthR').html(listMonthsR[val-1]); drawMapR(currentMonthR, currentYearR); }; function updateViz2R(valY){ d3.select('#yearR').html(listYearsR[valY-1]); drawMapR(currentMonthR, currentYearR); }; // Draw the map function drawMapR(monthBisR, yearBisR){ var nbrR; var pasR; var minR = 0, maxR=0; var currentDateR = 12*(yearBisR-1)+monthBisR ; //fevrier 2017 => 2017 = 5 fevrier 2 ====> 12*(yearBis-1)+monthBis // console.log("cu rrentDate ==========> " + currentDate); //Set input domain for color scale color.domain([minG,maxG]); carteR = svgR.selectAll("path") .data(jsonFR.features); carteR .on('mousemove', function(d) { if(d.properties.tab == undefined || d.properties.tab == "NaN"){ nbrR = "undefined"; }else { nbrR = d.properties.tab[currentDateR]; } var mouse = d3.mouse(svgR.node()).map(function(d) { return parseInt(d); }); tooltipR.classed('hidden', false) .attr('style', 'left:' + (mouse[0] + width) + 'px; top:' + (mouse[1] - 35) + 'px') .html(d.properties.nom + ":" + parseFloat(nbrR).toFixed(2)+ " %"); }) .on('mouseout', function() { tooltipR.classed('hidden', true); }); //code in case of update of the map / change of month carteR .attr('class', function(d) { return 'provinceR ' + d.properties.code; }) .attr('d', path) .style("fill", function(d) { // get value found above var tabR = d.properties.tab; if (tabR && tabR[currentDateR] != "") { // console.log("tabbbbb ==>" + tab[currentDate]); return color(tabR[currentDateR]); } else { // if no value then color with Grey return "#ccc"; } }); //fist time of coloring the map carteR.selectAll("path") .enter() .data(jsonFR.features) .append("path") .attr("class", "enter") .attr("d", path) .style("fill", function(d) { // get value found above var tabR = d.properties.tab; // console.log("tabbbb ==>" + tab[currentDate]); if (tabR && tabR[currentDateR] != "") { return color(tabR[currentDateR]); } else { // if no value then color with Grey return "#ccc"; } }); }; // End of drawMap// }); // End of "d3.csv.. </script></body> https://d3js.org/d3.v4.min.js