Streamgraph

Built with blockbuilder.org

forked from ivanempire's block: Streamgraph

forked from codementum's block: Streamgraph

forked from ivanempire's block: Streamgraph

forked from anonymous's block: Streamgraph

forked from f94f's block: Streamgraph

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0 auto;}
        h1,h2,p {
      margin:0px;
    }
    svg {
	  margin-left:auto; margin-right:auto; display:block;
    }
    
    .axis {
	  font: 10px sans-serif;
		}
    
    .axis path,
	  .axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}
    .tooltip {
  position: absolute;
  width: 150px;
  height: 35px;
  pointer-events: none;
}
    
  </style>
  <h1 align="center">Cargos políticos que ha tenido mi "familia" a lo largo de los años</h1>
  <h2 align="center">¡¡¡Guau!!! no me esperaba esos resultados, o ¿sí los esperaba?</h2>
  <h3 align="center">Años</h3>
  <p align="center" id="major">!</p>
</head>

<body>
  <script>
    
    
d3.csv('trends.csv', function(err, d){
  if(err) console.log(err);
  //console.log(d)
  
  var nested_data = d3.nest()
		.key(function(d) { return d.year; })
		.entries(d);
  
  //console.log(nested_data);
  
  var mqpdata = nested_data.map(function(d){
    var obj = {
      month: new Date(d.key, 0, 1)
    }
    
    d.values.forEach(function(v){
      obj[v.elec_type] = v.paila;
      console.log(d.paila)
    })
    
    return obj;
  })
  
  buildStreamGraph(mqpdata);
  
})

function buildStreamGraph(mqpdata) {
var data = mqpdata;

var stack = d3.stack()
    .keys(["AE", "AREN", "BBT", "BC", "BME", "CE", "CH", "CM", "CS", "ECE", "EV", "HU", "ID", "IE", "IMGD", "MA", "ME", "MG", "PH", "RBE", "SSPS"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetWiggle);

var series = stack(data);

var width = 850,
    height = 500;

var x = d3.scaleTime()
    .domain(d3.extent(data, function(d){ return d.month; }))
    .range([100, width]);

// setup axis
var xAxis = d3.axisBottom(x);
  
var y = d3.scaleLinear()
    .domain([0, d3.max(series, function(layer) { return d3.max(layer, function(d){ return d[0] + d[1];}); })])
    .range([height/2, -200]);

var color = d3.scaleLinear()
    .range(["#51D0D7", "#31B5BB"]);

var color = d3.scaleOrdinal(d3.schemeCategory20);

var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip");
  
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("path")
    .data(series)
    .enter().append("path")
    .attr("d", area)
    .style("fill", function() { return color(Math.random()); })
    .on('mouseover', function(d){      
      d3.select(this).style('fill',d3.rgb( d3.select(this).style("fill") ).brighter());
  		d3.select("#major").text(d.key);
  tooltip.transition()
               .duration(700)
               .style("opacity", 1);
  			tooltip.html("Cantidad: " + "#familiares")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
    })
    .on('mouseout', function(d){      
      d3.select(this).style('fill', 
         d3.rgb( d3.select(this).style("fill") ).darker());
         d3.select("#major").text("Mouse over");
  tooltip.transition()
               .duration(500)
               .style("opacity", 0);
})

svg.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (height) + ")")
            .call(xAxis);  
  
  var xAxisGroup = svg.append("g").call(xAxis);
}
   
  </script>
</body>
</html>

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