streamgraph

streamgraph that changes between two random datasets.

by Mike Rawling

HTML

<script src="http://d3js.org/d3.v2.js"></script>
    <body onload="graphplot()">
    
    <h4 id="Heading">Streamgraph</h4>
    
    <div style="text-align:center;">
        <button class="buttons" id="button_d1">Dataset 1</button>
        <button class="buttons" id="button_d2">Dataset 2</button>
    </div>
    
    <div id="graph_area"></div>

CSS

#Heading {
    text-align: center;
}

body {
  font-family: "Proxima";
  position: relative;
}

.buttons {
    background: radial-gradient(#e8f0ff, #a0e3ff);
    border: 1px solid #136;
    box-shadow: 3px 3px 6px #136;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    top: -15px;
    color: black;
    margin: 5px 10px;
}

button::-moz-focus-inner {
    border: 0;
}

#graph_area {
    width: 95%;
    box-shadow: 3px 3px 12px #124;
    margin: 0 auto;
    text-align: left;
    border-radius: 4px;
    background: #f0f8f8;
}

#graph_area svg {
    margin: 0px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-size: 11px;
}

JavaScript

function graphplot(){

    var time_format = d3.time.format("%d-%m-%Y");
    
    
    //create dummy data in json form
    var lData=[];
    //construct as many different datasets with differnt number of layers and datapoints
    //number of different datasets
    for (var count_d=0; count_d<2; count_d++) {
        lData[count_d] = [];
        
        //number of datapoints
        for (var count_pt=0; count_pt <20; count_pt++) {
            
            //number of layers
            lLayers = [];
            for (count_l=0; count_l<5; count_l++) {
                var dLayer = {};
                dLayer["Layer_" + (count_l+1)] = Math.random();
                lLayers.push(dLayer)
            }
            
            lData[count_d].push(
            {
                "title":"This is dataset "+(count_d+1), 
                    "x_value": time_format.parse((count_pt+1) + "-" + (1) + "-2014"),
                    "values": lLayers
        });
        }
    
    }
    
    var data = lData[0]; //for plot lTest_data0 on load
    
    $("#button_d1").bind('click', function(){
        data = lData[0];
        Draw_streamgraph(data);
    })
    
    $("#button_d2").bind('click', function(){
        data = lData[1];
        Draw_streamgraph(data);
    })
    
    
    var margin = {top: 50, right: 250, bottom: 20, left: 25},
        width = ($("#graph_area").width() - 20),
        height = 500;
    
    var stack = d3.layout.stack().offset("wiggle") //streamgraph of all layers
        .x(function(d) {return d.x})
        .y(function (d) {return d.y});
        
        
        
    //add streamgraph to htm graph area with width and height
    var svg = d3.select("#graph_area").append("svg")  //"svg" is dom element, and contains everything d3js
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate("+(margin.left)+"," + (-margin.bottom) + ")");  //makes space for axes labels; not supported on chrome
    
    
   ...