Old school D3 from simpler times

All examples By author By category About

jeremygnfsk

Full window Github gist

projet

Built with blockbuilder.org

forked from aurelient's block:

forked from aurelient's block:

<!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;
    
  </style>
</head>

<body>
  <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', 'hidden tooltip');
        d3.json('regions.json', function(err, fr) {
            if (err) return console.error(err);
      
    var projection = d3.geoConicConformal() 
    			.translate([width/2, height/2])
					.center([2.454071, 46.279229]).scale(2137);
    var path = d3.geoPath() 
                 .projection(projection);
   
         
            var region = svg.selectAll('.region')
                .data(fr.features).enter();
            region.append('path')
                .attr('class', function(d) {
                    return 'region ' + d.properties.nom;
                })
                .attr('d', path)
                .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);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
        });						
    
    
    
    
    
   	 var parseDate = d3.timeParse("%Y-%m"); 
		   	 var parseDate = d3.timeParse("%Y-%m");
         var date_mois = []; //va contenir toute les dates
         var nom_regions= [];
    			var list_regu ={};
  // Chargement du jeu de données stock market
  d3.text('regularite-mensuelle-ter.csv', function(error, raw) {
       var dsv = d3.dsvFormat(';')
    var data = dsv.parse(raw);

var reg = d3.nest()
        .key(function(d) { return d.Région; })
        .entries(data);
		
    
    
		// Parse and caculate some values for each symbols
    reg.forEach(function(s) {
      s.values.forEach(function(d) {
        d.mois = parseDate(d.Date);
				d.regu=+d["Taux de régularité"];
      });	
      			      
				
					s.moy_reg = d3.mean(s.values, function(d) { return d.regu; });
						for(let i of s.values ){
              date_mois.push(i["Date"]) ; //ajoute la date dans array 
               nom_regions.push(i["Région"]);
							//console.log(i["Taux de régularité"]);
              if (i["Région"] in list_regu){
                list_regu[i["Région"]][i["Date"]]=i["Taux de régularité"];
                
              }
              
              else {
                list_regu[i["Région"]]={};
                list_regu[i["Région"]][i["Date"]]=i["Taux de régularité"];

}
            }
        list_regu[s.key]["regularité_moyenne"]=s.moy_reg;

});
    
  //  console.log(list_regu[nom_regions[0]]);
    			//fonction qui enleve les duplicate 	
    function removeDuplicates(arr){
    let unique_array = []
    for(let i = 0;i < arr.length; i++){
        if(unique_array.indexOf(arr[i]) == -1){
            unique_array.push(arr[i])
        }
    }
    return unique_array
}
  var mois_uniq  = removeDuplicates(date_mois).sort(); //enleve les date dupliquercomme ça on a la liste des dates 
  nom_regions= removeDuplicates(nom_regions).sort();//nom des régions
    //	console.log(nom_regions);

console.log(nom_regions.length);
    		d3.json("regions.json", function(json) {
			for (var i = 0; i < nom_regions.length; i++) {
        var dataRegion =nom_regions[i];
	
				
        
        
     
      }
   
			
          });

});

</script>
</body>

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