Old school D3 from simpler times

All examples By author By category About

HectorDt

Full window Github gist

TestsTp4

Built with blockbuilder.org

forked from aurelient's block:

forked from aurelient's block: Tp4

forked from HectorDt's block: Tp4

<!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; }
    .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;
    }
    
    
.ticks {
  font: 10px sans-serif;
}

.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}

.track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 4px;
}

.track-inset {
  stroke: #ddd;
  stroke-width: 9px;
}

.track-overlay {
  pointer-events: stroke;
  stroke-width: 10px;
  stroke: transparent;
  cursor: crosshair;
}

.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width:2px;
}

</style>
</head>

<body>

<script>
		var width = 1000,
  		  height = 580;

var color = d3.scaleQuantize() //On utilise scaleQuantize qui attribue une valeur du range aux valeurs sur le domaine défini plus loin
 	.range(['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506']);

var svg = d3.select( "body" )
  							.append( "svg" )
		 						.attr( "width", width )
		 						.attr( "height", height );
    
    
    var slider = svg.append("g")
    .attr("class", "slider").attr("transform", "translate(" + 30 + "," + height / 2 + ")");
    
    var x = d3.scaleLinear()
    .domain([0, 180])
    .range([0, 150])
    .clamp(true);
        
    slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() { hue(x.invert(d3.event.x)); }));
    
    slider.insert("g", ".track-overlay")
    .attr("class", "ticks")
    .attr("transform", "translate(0," + 18 + ")")
  .selectAll("text")
  .data(x.ticks(5))
  .enter().append("text")
    .attr("x", x)
    .attr("text-anchor", "middle")
    .text(function(d) { return d + "°"; });
    
    
    
var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("r", 6);

slider.transition() // Gratuitous intro!
    .duration(750)
    .tween("hue", function() {
      var i = d3.interpolate(0, 70);
      return function(t) { hue(i(t)); };
    });

function hue(h) {
  handle.attr("cx", x(h));
  svg.style("background-color", d3.hsl(h, 0.8, 0.8));
}
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');

var projection = d3.geoConicConformal() //
    									.translate([width/2, height/2])
    									.center([-5, 45.313061]).scale(2374);

var path = d3.geoPath()
                 .projection(projection);
    
   
    d3.csv("GrippeFrance2014.csv", function(data) {
      				var maxtemp = 0 
      				var max = d3.max(data, function(d) { return parseFloat(d.somme2014); })
    					d3.json("francedept.json", function(json) {
      					svg.selectAll("path")
           					.data(json.features)
           					.enter()
          					.append("path")
           					.attr("d", path)
      							//On fusionne les donnees avec le GeoJSON des regions
      							for (var i = 0; i < data.length; i++) {
        								var datareg = data[i].region;
                        var datasumnov2014 = parseFloat(data[i]["02/11/14"])+parseFloat(data[i]["09/11/14"])+parseFloat(data[i]["16/11/14"])+parseFloat(data[i]["23/11/14"])+parseFloat(data[i]["30/11/14"]);
                        var datasum2014 = data[i].somme2014
                        var maxtemp = d3.max([maxtemp,datasumnov2014]); 
 												for (var j = 0; j < json.features.length; j++) {
														 var jsonregion = json.features[j].properties.nom;
														 if (datareg == jsonregion) {
															 json.features[j].properties.sommenov2014 = datasumnov2014;
                               json.features[j].properties.somme2014 = datasum2014;
															 break;
										 					}
                          }
      								}
                color.domain([0,maxtemp]);
                svg.selectAll("path")
                		.style("fill", function(d) {
 												var value = d.properties.sommenov2014;
 												if (value) {
 													return color(value);
 													} else {
 													return "#ccc";
 													}})
                		.on('mousemove',function(d){
                  			var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                   			 });
                  			tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom + "<br>" +"Malades en Novembre 2014 : "+d.properties.sommenov2014);
                				})
                    .on('click',update)
                    .on('mouseout', function() {
                        tooltip.classed('hidden', true);
                        });
                
                function update(){
                  color.domain([0,max]);
                  svg.selectAll("path")
                		.style("fill", function(d) {
 												var value = d.properties.somme2014;
 												if (value) {
 													return color(value);
 													} else {
 													// si pas de valeur alors en gris? oui gris est le mieux
 													return "#ccc";
 													}})                  
                }
               			
               });
});
  </script>
</body>

https://d3js.org/d3.v4.min.js