D3 Steamgraph Example on Media Impressions by bessiec

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Steamgraph Showing Distribution of Media Impressions</title>  
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Steamgraph Showing Distribution of Media Impressions</title>  

  <script src="https://d3js.org/d3.v2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">


    <style>

        body {
          font-family: 'Open Sans';
          font-weight: 500;
          font-size: 12px;
          margin: 2% 2% 2% 2%;
        }

        .chart { 
          background: #fff;
        }

        p {
          font-family: 'Lato';
          font-size: 14px;
        }


        .axis path, .axis line {
          fill: none;
          stroke: #000;
          stroke-width: 1px;
          shape-rendering: crispEdges;
        }

        button {
          position: absolute;
          right: 50px;
          top: 10px;
        }

      .tooltip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
      }


    </style>

</head>

<body>
<h2>Steamgraph Example Showing Media Impressions Overtime During an Advertising Campaign</h2>


<div class="chart">
</div>

<script>

    chart("site_example.csv");

    var datearray = [];


    function chart(csvpath) {

    var format = d3.time.format("%m/%d/%Y");

    var thousands = d3.format(',')

    var margin = {top: 20, right: 100, bottom: 30, left: 100};
    var width = document.body.clientWidth - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;

    var tooltip = d3.select("body")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "20")
        .style("visibility", "hidden")
        .style("top", "30px")
        .style("left", "205px");

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height-10, 0]);

    var z = d3.scale.ordinal().range(["#0a2756","0080FF","#FFD17D", "#6ab975","#5687d1", "#45CFD7","#a173d1", "#0FF66A3","#e60024","#00FFFF", "#F5E94B", "bbbbbb", "#00B8E6"])

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(d3.time.weeks);

    var yAxis = d3.svg.axis()
        .scale(y);

    var yAxisr = d3.svg.axis()
        .scale(y);

    var stack = d3.layout.stack()
        .offset("silhouette")
        .values(function(d) { return d.values; })
        .x(function(d) { return d.date; })
        .y(function(d) { return d.value; });

    var nest = d3.nest()
        .key(function(d) { return d.key; });

    var area = d3.svg.area()
        .interpolate("cardinal")
        .x(function(d) { return x(d.date); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });

    var svg = d3.select(".chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    var graph = d3.csv(csvpath, function(data) {
      data.forEach(function(d) {
        d.date = format.parse(d.date);
        d.value = +d.value;
      });

      var layers = stack(nest.entries(data));


      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

      svg.selectAll(".layer")
          .data(layers)
        .enter().append("path")
          .attr("class", "layer")
          .attr("d", function(d) { return area(d.values); })
          .style("fill", function(d, i) { return z(i); });


      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + width + ", 0)")
          .call(yAxis.orient("right"));

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis.orient("left"));


      svg.selectAll(".layer")
        .attr("opacity", 1)
        .on("mouseover", function(d, i) {
          svg.selectAll(".layer").transition()
          .duration(250)
          .attr("opacity", function(d, j) {
            return j != i ? 0.2 : 1;
        })})
        .on("mousemove", function(d, i) {
          mousex = d3.mouse(this);
          mousex = mousex[0];
          var invertedx = x.invert(mousex);
          invertedx = invertedx.getMonth() + invertedx.getDate();
          var selected = (d.values);
          for (var k = 0; k < selected.length; k++) {
            datearray[k] = selected[k].date
            datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
          }

          mousedate = datearray.indexOf(invertedx);
          pro = thousands(d.values[mousedate].value);
          date = format(d.values[mousedate].date);

          d3.select(this)
          .classed("hover", true)
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px"), 
          tooltip.html( "<p><strong> <span style='color:#0080FF'>Site: </strong>" + d.key + "<span style='color:#0080FF'><br><strong>Visits: </strong></span>" + pro + "<span style='color:#0080FF'><strong><br>Date: </span></strong>" + date).style("visibility", "visible");
          
        })
        .on("mouseout", function(d, i) {
         svg.selectAll(".layer")
          .transition()
          .duration(250)
          .attr("opacity", "1");
          d3.select(this)
          .classed("hover", false)
          .attr("stroke-width", "0px"), tooltip.html( "<strong> <span style='color:#0080FF'><p>" + d.key + "<br>" + pro + "</p></span></strong>" ).style("visibility", "hidden");
      })
        
      var vertical = d3.select(".chart")
            .append("div")
            .attr("class", "remove")
            .style("position", "absolute")
            .style("z-index", "19")
            .style("width", "1px")
            .style("height", "380px")
            .style("top", "10px")
            .style("bottom", "30px")
            .style("left", "0px")
            .style("background", "#fff");

      d3.select(".chart")
          .on("mousemove", function(){  
             mousex = d3.mouse(this);
             mousex = mousex[0] + 5;
             vertical.style("left", mousex + "px" )})
          .on("mouseover", function(){  
             mousex = d3.mouse(this);
             mousex = mousex[0] + 5;
             vertical.style("left", mousex + "px")});
    });
    }

    </script>
  </body>
</html>

site_example.csv

key,value,date
Magazine One,0,7/15/2015
Magazine One,0,7/16/2015
Magazine One,0,7/17/2015
Magazine One,0,7/18/2015
Magazine One,272382,7/19/2015
Magazine One,56763,7/20/2015
Magazine One,331577,7/21/2015
Magazine One,427350,7/22/2015
Magazine One,483400,7/23/2015
Magazine One,599465,7/24/2015
Magazine One,572222,7/25/2015
Magazine One,578626,7/26/2015
Magazine One,520651,7/27/2015
Magazine One,499877,7/28/2015
Magazine One,482501,7/29/2015
Magazine One,379775,7/30/2015
Magazine One,85617,7/31/2015
Magazine One,277568,8/1/2015
Magazine One,206008,8/2/2015
Magazine One,420253,8/3/2015
Magazine One,482666,8/4/2015
Magazine One,438622,8/5/2015
Magazine One,345963,8/6/2015
Magazine One,317391,8/7/2015
Magazine One,339225,8/8/2015
Magazine One,176985,8/9/2015
Magazine One,383802,8/10/2015
Magazine One,440485,8/11/2015
Magazine One,499633,8/12/2015
Magazine One,491543,8/13/2015
Magazine One,478928,8/14/2015
Magazine One,392708,8/15/2015
Retargeting Vendor,172200,7/15/2015
Retargeting Vendor,208618,7/16/2015
Retargeting Vendor,212260,7/17/2015
Retargeting Vendor,166308,7/18/2015
Retargeting Vendor,297381,7/19/2015
Retargeting Vendor,368991,7/20/2015
Retargeting Vendor,610315,7/21/2015
Retargeting Vendor,355231,7/22/2015
Retargeting Vendor,569797,7/23/2015
Retargeting Vendor,617402,7/24/2015
Retargeting Vendor,618271,7/25/2015
Retargeting Vendor,583224,7/26/2015
Retargeting Vendor,579871,7/27/2015
Retargeting Vendor,1531667,7/28/2015
Retargeting Vendor,1674837,7/29/2015
Retargeting Vendor,1499893,7/30/2015
Retargeting Vendor,1509717,7/31/2015
Retargeting Vendor,1398273,8/1/2015
Retargeting Vendor,1711196,8/2/2015
Retargeting Vendor,2237636,8/3/2015
Retargeting Vendor,2229582,8/4/2015
Retargeting Vendor,2403252,8/5/2015
Retargeting Vendor,2489519,8/6/2015
Retargeting Vendor,2196629,8/7/2015
Retargeting Vendor,1495610,8/8/2015
Retargeting Vendor,841698,8/9/2015
Retargeting Vendor,3204976,8/10/2015
Retargeting Vendor,3091216,8/11/2015
Retargeting Vendor,3219320,8/12/2015
Retargeting Vendor,2835042,8/13/2015
Retargeting Vendor,2427543,8/14/2015
Retargeting Vendor,2387666,8/15/2015
Magazine Two,0,7/15/2015
Magazine Two,0,7/16/2015
Magazine Two,0,7/17/2015
Magazine Two,0,7/18/2015
Magazine Two,0,7/19/2015
Magazine Two,95236,7/20/2015
Magazine Two,115870,7/21/2015
Magazine Two,563668,7/22/2015
Magazine Two,393047,7/23/2015
Magazine Two,457832,7/24/2015
Magazine Two,580930,7/25/2015
Magazine Two,468795,7/26/2015
Magazine Two,1533545,7/27/2015
Magazine Two,1869188,7/28/2015
Magazine Two,1822880,7/29/2015
Magazine Two,2301873,7/30/2015
Magazine Two,2046579,7/31/2015
Magazine Two,1662560,8/1/2015
Magazine Two,1550130,8/2/2015
Magazine Two,836404,8/3/2015
Magazine Two,842784,8/4/2015
Magazine Two,803768,8/5/2015
Magazine Two,751633,8/6/2015
Magazine Two,695614,8/7/2015
Magazine Two,686131,8/8/2015
Magazine Two,364641,8/9/2015
Magazine Two,1671520,8/10/2015
Magazine Two,1629461,8/11/2015
Magazine Two,1581057,8/12/2015
Magazine Two,1606862,8/13/2015
Magazine Two,1641625,8/14/2015
Magazine Two,1907248,8/15/2015
Retail Targeting,0,7/15/2015
Retail Targeting,0,7/16/2015
Retail Targeting,0,7/17/2015
Retail Targeting,0,7/18/2015
Retail Targeting,0,7/19/2015
Retail Targeting,786555,7/20/2015
Retail Targeting,1726430,7/21/2015
Retail Targeting,1757410,7/22/2015
Retail Targeting,1432961,7/23/2015
Retail Targeting,1403780,7/24/2015
Retail Targeting,1341585,7/25/2015
Retail Targeting,2220201,7/26/2015
Retail Targeting,1717281,7/27/2015
Retail Targeting,1614216,7/28/2015
Retail Targeting,1603459,7/29/2015
Retail Targeting,1289495,7/30/2015
Retail Targeting,1303611,7/31/2015
Retail Targeting,1228342,8/1/2015
Retail Targeting,1392348,8/2/2015
Retail Targeting,1547633,8/3/2015
Retail Targeting,1482395,8/4/2015
Retail Targeting,1402615,8/5/2015
Retail Targeting,1156920,8/6/2015
Retail Targeting,1096135,8/7/2015
Retail Targeting,1787099,8/8/2015
Retail Targeting,600368,8/9/2015
Retail Targeting,1322084,8/10/2015
Retail Targeting,1358323,8/11/2015
Retail Targeting,1247397,8/12/2015
Retail Targeting,1472922,8/13/2015
Retail Targeting,1286370,8/14/2015
Retail Targeting,995488,8/15/2015
Prospecting,0,7/15/2015
Prospecting,0,7/16/2015
Prospecting,6,7/17/2015
Prospecting,0,7/18/2015
Prospecting,1846851,7/19/2015
Prospecting,1903240,7/20/2015
Prospecting,2217486,7/21/2015
Prospecting,521747,7/22/2015
Prospecting,1561566,7/23/2015
Prospecting,1507394,7/24/2015
Prospecting,1445918,7/25/2015
Prospecting,1647652,7/26/2015
Prospecting,1515448,7/27/2015
Prospecting,2154954,7/28/2015
Prospecting,2577960,7/29/2015
Prospecting,84077,7/30/2015
Prospecting,239091,7/31/2015
Prospecting,1569140,8/1/2015
Prospecting,1383426,8/2/2015
Prospecting,914461,8/3/2015
Prospecting,1479900,8/4/2015
Prospecting,751494,8/5/2015
Prospecting,725295,8/6/2015
Prospecting,763889,8/7/2015
Prospecting,766059,8/8/2015
Prospecting,234706,8/9/2015
Prospecting,872685,8/10/2015
Prospecting,709429,8/11/2015
Prospecting,723405,8/12/2015
Prospecting,816222,8/13/2015
Prospecting,608487,8/14/2015
Prospecting,571707,8/15/2015
Magazine Three,0,7/15/2015
Magazine Three,0,7/16/2015
Magazine Three,5,7/17/2015
Magazine Three,0,7/18/2015
Magazine Three,0,7/19/2015
Magazine Three,23,7/20/2015
Magazine Three,0,7/21/2015
Magazine Three,0,7/22/2015
Magazine Three,255429,7/23/2015
Magazine Three,65555,7/24/2015
Magazine Three,175840,7/25/2015
Magazine Three,220919,7/26/2015
Magazine Three,231001,7/27/2015
Magazine Three,87713,7/28/2015
Magazine Three,249207,7/29/2015
Magazine Three,269260,7/30/2015
Magazine Three,467128,7/31/2015
Magazine Three,459894,8/1/2015
Magazine Three,658797,8/2/2015
Magazine Three,626293,8/3/2015
Magazine Three,477612,8/4/2015
Magazine Three,429501,8/5/2015
Magazine Three,364340,8/6/2015
Magazine Three,375283,8/7/2015
Magazine Three,755601,8/8/2015
Magazine Three,316598,8/9/2015
Magazine Three,377118,8/10/2015
Magazine Three,395330,8/11/2015
Magazine Three,392644,8/12/2015
Magazine Three,270085,8/13/2015
Magazine Three,168922,8/14/2015
Magazine Three,171504,8/15/2015
Radio Site One,0,7/15/2015
Radio Site One,0,7/16/2015
Radio Site One,0,7/17/2015
Radio Site One,0,7/18/2015
Radio Site One,0,7/19/2015
Radio Site One,0,7/20/2015
Radio Site One,206796,7/21/2015
Radio Site One,962938,7/22/2015
Radio Site One,712933,7/23/2015
Radio Site One,814299,7/24/2015
Radio Site One,640298,7/25/2015
Radio Site One,462996,7/26/2015
Radio Site One,473778,7/27/2015
Radio Site One,451535,7/28/2015
Radio Site One,448754,7/29/2015
Radio Site One,207548,7/30/2015
Radio Site One,461025,7/31/2015
Radio Site One,394533,8/1/2015
Radio Site One,410018,8/2/2015
Radio Site One,440440,8/3/2015
Radio Site One,255526,8/4/2015
Radio Site One,523735,8/5/2015
Radio Site One,311739,8/6/2015
Radio Site One,607577,8/7/2015
Radio Site One,2043690,8/8/2015
Radio Site One,501247,8/9/2015
Radio Site One,396756,8/10/2015
Radio Site One,541867,8/11/2015
Radio Site One,427478,8/12/2015
Radio Site One,534922,8/13/2015
Radio Site One,48603,8/14/2015
Radio Site One,377,8/15/2015
Radio Site Two,0,7/15/2015
Radio Site Two,0,7/16/2015
Radio Site Two,0,7/17/2015
Radio Site Two,0,7/18/2015
Radio Site Two,0,7/19/2015
Radio Site Two,0,7/20/2015
Radio Site Two,0,7/21/2015
Radio Site Two,0,7/22/2015
Radio Site Two,0,7/23/2015
Radio Site Two,0,7/24/2015
Radio Site Two,0,7/25/2015
Radio Site Two,0,7/26/2015
Radio Site Two,0,7/27/2015
Radio Site Two,0,7/28/2015
Radio Site Two,92,7/29/2015
Radio Site Two,36,7/30/2015
Radio Site Two,2138772,7/31/2015
Radio Site Two,3916107,8/1/2015
Radio Site Two,756357,8/2/2015
Radio Site Two,185953,8/3/2015
Radio Site Two,751541,8/4/2015
Radio Site Two,1681195,8/5/2015
Radio Site Two,1260801,8/6/2015
Radio Site Two,1075257,8/7/2015
Radio Site Two,1071054,8/8/2015
Radio Site Two,434007,8/9/2015
Radio Site Two,1096383,8/10/2015
Radio Site Two,1108485,8/11/2015
Radio Site Two,1072569,8/12/2015
Radio Site Two,999605,8/13/2015
Radio Site Two,996728,8/14/2015
Radio Site Two,1012472,8/15/2015
Demographic Buy One,0,7/15/2015
Demographic Buy One,0,7/16/2015
Demographic Buy One,0,7/17/2015
Demographic Buy One,0,7/18/2015
Demographic Buy One,0,7/19/2015
Demographic Buy One,0,7/20/2015
Demographic Buy One,0,7/21/2015
Demographic Buy One,34027,7/22/2015
Demographic Buy One,54473,7/23/2015
Demographic Buy One,58343,7/24/2015
Demographic Buy One,60298,7/25/2015
Demographic Buy One,59172,7/26/2015
Demographic Buy One,61483,7/27/2015
Demographic Buy One,58988,7/28/2015
Demographic Buy One,58912,7/29/2015
Demographic Buy One,53881,7/30/2015
Demographic Buy One,59970,7/31/2015
Demographic Buy One,62325,8/1/2015
Demographic Buy One,65154,8/2/2015
Demographic Buy One,67944,8/3/2015
Demographic Buy One,71310,8/4/2015
Demographic Buy One,61913,8/5/2015
Demographic Buy One,57777,8/6/2015
Demographic Buy One,52066,8/7/2015
Demographic Buy One,48797,8/8/2015
Demographic Buy One,39558,8/9/2015
Demographic Buy One,50359,8/10/2015
Demographic Buy One,49415,8/11/2015
Demographic Buy One,47292,8/12/2015
Demographic Buy One,46557,8/13/2015
Demographic Buy One,49223,8/14/2015
Demographic Buy One,46293,8/15/2015
Demographic Buy Two,0,7/15/2015
Demographic Buy Two,0,7/16/2015
Demographic Buy Two,6,7/17/2015
Demographic Buy Two,0,7/18/2015
Demographic Buy Two,0,7/19/2015
Demographic Buy Two,1,7/20/2015
Demographic Buy Two,2,7/21/2015
Demographic Buy Two,1887,7/22/2015
Demographic Buy Two,13981,7/23/2015
Demographic Buy Two,14771,7/24/2015
Demographic Buy Two,11625,7/25/2015
Demographic Buy Two,11207,7/26/2015
Demographic Buy Two,13227,7/27/2015
Demographic Buy Two,12165,7/28/2015
Demographic Buy Two,11609,7/29/2015
Demographic Buy Two,12136,7/30/2015
Demographic Buy Two,9495,7/31/2015
Demographic Buy Two,9964,8/1/2015
Demographic Buy Two,10192,8/2/2015
Demographic Buy Two,11541,8/3/2015
Demographic Buy Two,10999,8/4/2015
Demographic Buy Two,10120,8/5/2015
Demographic Buy Two,10825,8/6/2015
Demographic Buy Two,9966,8/7/2015
Demographic Buy Two,9693,8/8/2015
Demographic Buy Two,2785,8/9/2015
Demographic Buy Two,10938,8/10/2015
Demographic Buy Two,10216,8/11/2015
Demographic Buy Two,8683,8/12/2015
Demographic Buy Two,8707,8/13/2015
Demographic Buy Two,9395,8/14/2015
Demographic Buy Two,9174,8/15/2015