D3 Examples - sabkey project

xxxxxxxxxx
 
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,500,700" rel="stylesheet">
​
  <style>
      body {
        margin: 0;
        font-family: "Helvetica Neue", sans-serif;
      }
​
        h21{
        margin:0;position:absolute;top:40px;right:50px;left:0;
        }
        h22{
          margin:0;position:absolute;top:100px;right:50px;left:0;
        }
      .node rect {
        cursor: move;
        fill-opacity: .9;
        shape-rendering: crispEdges;
      }
      .node text {
        pointer-events: none;
        text-shadow: 0px 0px 2px #fff;
        font-size: 1.2em;
        font-weight: 680 ;
​
      }
​
      .link {
        fill: none;
        stroke: #000;
        stroke-opacity: 0.25;
      }
      .link:hover {
        cursor: pointer;
        stroke-opacity: 1;
      }
​
      div.tooltip {
        color: #222;
        background-color: #fff;
        padding: 9px 14px 6px 14px;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
          }
   Path:hover {
  stroke: #003284 !important;
  stroke-width:2px;
  stroke-linejoin: round;
  fill: #002868 !important;
  cursor: pointer;
}
    .hidden {
      display: none;}
      .menu {
        position: absolute;
      top: 15px;
      left: 15px;
    }
    
    text {
      text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }
            .axis {
font: 15px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}
​
  .toolTip {
  pointer-events: none;
    position: absolute;
  display: none;
  min-width: 50px;
  height: auto;
  background: none repeat scroll 0 0 #ffffff;
  padding: 9px 14px 6px 14px;
  border-radius: 2px;
  text-align: center;
  line-height: 1.3;
  color: #5B6770;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, .15);
}
.toolTip:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -12px;
}  
.toolTip span {
    font-weight: 500;
  color: #081F2C;
}
   
​
  
      
  </style>
</head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="sankey.js"></script>
    <script src="RadarChart.js"></script>
​
     <HR size=2 align=center width="100%">
​
    <div style="background-color :wheat;">
            <img src="https://upload.wikimedia.org/wikipedia/fr/7/77/Logo_enedis_header.png"  width="25%" >         
      <h21   style= " font-size:250%;font-family:verdana;color:BLack; text-align:center;"> 
        <b>     
                 Projet ConsoElec
            </b>
        </h21>
            <h22   style= " font-size:80%;font-family:verdana;color:BLack; text-align:center;"> 
        <b>     
                 Visualisation de la consommation d'électricité en France
            </b>
        </h22>
        <img align ="right" src="https://www.developpez.com/public/images/ecoles/centrale-lyon.png" width="32%"  >
    
  </div>
    <HR size=2 align=center width="100%">
    
    <div>
             <div id="mapzone" style="background-color: snow;  display: inline-block;border: solid black 2px;"></div>
         <div id="area2" style="background-color: snow;  display: inline-block;border: solid black 2px;"></div>
     <div id="Sankeydiag" style="background-color: snow; display: inline-block; border: solid black 2px;"></div>
  </div>     
​
​
    
    
    <script>
      // set the dimensions and margins of the graph
      var margin = {top: 10, right: 10, bottom: 10, left: 10},
      width = 560
        height = 420
​
    var cite ="";
        var color2 = d3.scaleOrdinal(d3.schemeCategory20b);
        
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
​
        var svg2 = d3.select( "#mapzone" )
        .append( "svg" )
          .attr( "width", 590 )
          .attr( "height", 440 );
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2500)
                    .translate([width/2, height/1.85]);
    var path2 = d3.geoPath() 
                 .projection(projection);
                 
    
    d3.csv("data_t.csv", function(data) {
    color2.domain([0,2000]);
   
    d3.json("regions.geojson", function(json) {
  
      for (var i = 0; i < data.length; i++) {
                    for(var j=0; j<json.features.length; j++) {
          if(data[i].Nom_region == json.features[j].properties.nom) {
                var dataValue = parseFloat(data[i].sum_Nombre_d_habitants);
            json.features[j].properties.value= dataValue;
        }
        
        }
      }
      svg2.selectAll("path")
         .data(json.features)
         .enter()
         .append("path")
         .attr("d", path2)
         .style("stroke", "#ffffff")
         .style("stroke-width", "2")
         .style("fill", function(d) {
                
        
        var value = d.properties.value;
             
        return color2(value);});
      
  
      svg2.selectAll("path")
         .on('mousemove', function(d) {   
        
                    var mouse = d3.mouse(svg2.node()).map(function(d) {
                      return  parseInt(d);
​
                    });
                      
                    tooltip.classed('hidden', false)
                             .attr('style', 'left:' + (mouse[0] + 15) + 
                                 'px; top:' + (mouse[1] + 100 ) + "px; border: 2px solid ")
                           .html("<p><strong>"+ d.properties.nom + " : "  +"</strong></p><p>"+ d.properties.value);
                })
            .on('mouseout', function() {
                    tooltip.classed('hidden', true);
​
         })
            
                .on('click',function(d){
​
                    cite= d.properties.nom;
d3.json(cite+".json", function(error, data) {
var config = {
    w: 490,
    h: 440,
    maxValue:900,
    levels: 4,  
    ExtraWidthX: 100
}
​
    if (error) throw error;
    RadarChart.draw("#area2", data, config);
});
​
var svg = d3.select('#area2')
    .selectAll('svg')
    .append('svg')
    .attr("width", 560)
    .attr("height", 440);
                        })
   
    });
}); 
                    
​
​
//-----------------------------------------------------------------------------------------------------------------------------------------------------
 // set the dimensions and margins of the graph
 var margin2 = {top: 10, right: 10, bottom: 10, left: 10}
      margin2.width = 600 ;
      margin2.height = 600 ;
​
      // format variables
      var formatNumber = d3.format(",.0f"),    // zero decimal places
          format = function(d) { return  formatNumber(d) + "MWH"; },
          color = d3.scaleOrdinal(d3.schemeCategory10);
​
      // dimensions sankey append the svg object to the body of the page
      var svg = d3.select("#Sankeydiag").append("svg")
          .attr("width", 590 )
          .attr("height", 440 )
        .append("g")
          .attr("transform", 
                "translate(" + margin2.left + "," + margin2.top + ")");
​
      // Set the sankey diagram properties
      var sankey = d3.sankey()
          .nodeWidth(10)
          .nodePadding(10)
          .size([width, height]);
​
      var path = sankey.link();
​
      // load the data
      d3.queue()
          .defer(d3.csv, "data.csv")
          .await(ready);
​
      function ready(error, csv){
​
        // create an array to push all sources and targets, before making them unique
        var arr = [];
        csv.forEach(function(d){
​
          arr.push(d.source);
          arr.push(d.target);
​
        });
​
        // create nodes array
        var nodes = arr.filter(onlyUnique).map(function(d,i){
          return {
            node: i,
            name: d
          }
        });
​
        // create links array
        var links = csv.map(function(csv_row){
          return {
            source: getNode("source"),
            target: getNode("target"),
            value: +csv_row.value
          }
​
          function getNode(type){
            return nodes.filter(function(node_object){ return node_object.name == csv_row[type]; })[0].node;
          }
​
        });
​
        sankey
            .nodes(nodes)
            .links(links)
            .layout(239);
​
        // add in the links
        var link = svg.append("g").selectAll(".link")
            .data(links)
            .enter().append("path")
            .attr("class", "link")
            .attr("d", path)
            .style("stroke", function(d){
              return color(d.source.name.replace(/ .*/, ""));
            })
            .style("stroke-width", function(d) { return Math.max(1, d.dy); })
            .sort(function(a, b) { return b.dy - a.dy; });
​
        // add the link titles
        link.append("title")
              .text(function(d) {
              return  d.source.name  
                          + "\n" + " Secteur : " 
                            + d.target.name 
                            + "\n Energie consommée : " 
                          + format(d.value) ; });
​
        // add in the nodes
        var node = svg.append("g").selectAll(".node")
            .data(nodes)
          .enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) { 
              return "translate(" + d.x + "," + d.y + ")"; 
            })
            .call(d3.drag()
              .subject(function(d) {
                return d;
              })
              .on("start", function() {
                this.parentNode.appendChild(this);
              })
              .on("drag", dragmove));
​
        // add the rectangles for the nodes
        node.append("rect")
            .attr("height", function(d) { return d.dy < 0 ? .1 : d.dy; })
            .attr("width", 2*sankey.nodeWidth())
            .style("fill", function(d) { 
              return d.color = color(d.name.replace(/ .*/, "")); 
            })
            .style("stroke", function(d) { 
              return d3.rgb(d.color).darker(2); 
            })
          .append("title")
            .text(function(d) { 
              return d.name + "\n" + format(d.value); 
            });
​
        // add in the title for the nodes
        node.append("text")
            .attr("x", -6)
            .attr("y", function(d) { return d.dy / 2; })
            .attr("dy", ".35em")
            .attr("text-anchor", "end")
            .attr("transform", null)
            .text(function(d) { return d.name; })
          .filter(function(d) { return d.x < width / 2; })
            .attr("x", 12 + sankey.nodeWidth())
            .attr("text-anchor", "start");
​
        // the function for moving the nodes
        function dragmove(d) {
          d3.select(this)
            .attr("transform", 
                  "translate(" 
                     + d.x + "," 
                     + (d.y = Math.max(
                        0, Math.min(height - d.dy, d3.event.y))
                       ) + ")");
          sankey.relayout();
          link.attr("d", path);
        }
​
      }
​
      // unique values of an array
      function onlyUnique(value, index, self) { 
          return self.indexOf(value) === index;
      }
        
        
    //-------------------------------------------------------------------------------------------------------------------------------
</script>
      <HR size=2 align=center width="100%">  
        <footer style="background-color :wheat;">
             <center><p>Posted by: Hicham EL-HADY _ Idriss ELBOUJDAINI _ Francis KUN </p>
             <p>For more information: <a href="https://github.com/hichamelhady/ConsoElec">
  https://github.com/hichamelhady/ConsoElec</a>.</p>
        </center>
         </footer>
    
</body>
</html>
    