Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@bessiec

bessiec/index.html

Last active November 26, 2016 07:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bessiec/b716bfa5d1be406e09474cf0b64bbc62 to your computer and use it in GitHub Desktop.
Save bessiec/b716bfa5d1be406e09474cf0b64bbc62 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Steamgraph Example on Media Impressions
Raw
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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment