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

<!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; }
        h1,h2,p {
      margin:0px;
    }
    svg {
      margin-top:-40px;
    }
  </style>
  <h1>MQP Majors over time 1990-2015</h1>
  <h2 id="major">Mouse over</h2>
  <p>The trend of WPI Major Qualifying Projects, grouped by major over time. The peak in the beginning shows the eCDR submission requirement creation.</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.date; })
		.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.key] = +v.value;
    })
    
    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 = 800,
    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 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);
    })
    .on('mouseout', function(d){      
      d3.select(this).style('fill', 
         d3.rgb( d3.select(this).style("fill") ).darker());
         d3.select("#major").text("Mouse over");
})

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

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