D3 Examples - projet

xxxxxxxxxx
 
<!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>
​
    