sabkey project

forked from giguerre's block: sabkey project

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>

<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>

var cite ="";
		var color2 = d3.scaleOrdinal(d3.schemeCategory20b);
        
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');

});
                      
                    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>

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