Cubism example with trading volume of various technology stocks.
Data from Yahoo Finance.
forked from syntagmatic‘s block: Historical Volumes
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 30px auto;
width: 960px;
position: relative;
}
header {
padding: 6px 0;
}
.group {
margin-bottom: 1em;
}
.axis {
font: 10px sans-serif;
position: fixed;
pointer-events: none;
z-index: 2;
}
.axis text {
-webkit-transition: fill-opacity 250ms linear;
}
.axis path {
display: none;
}
.axis line {
stroke: #000;
shape-rendering: crispEdges;
}
.axis.top {
top: 0px;
padding: 0 0 24px 0;
}
.axis.bottom {
bottom: 0px;
padding: 24px 0 0 0;
}
.horizon {
border-bottom: solid 1px #000;
overflow: hidden;
position: relative;
}
.horizon {
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
.horizon + .horizon {
border-top: none;
}
.horizon canvas {
display: block;
}
.horizon .title,
.horizon .value {
bottom: 0;
line-height: 30px;
margin: 0 6px;
position: absolute;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
white-space: nowrap;
}
.horizon .title {
left: 0;
}
.horizon .value {
right: 0;
}
.line {
background: #000;
z-index: 2;
}
</style>
<script src="//d3js.org/d3.v3.js"></script>
<script src="cubism.v1.js"></script>
<body id="demo">
<script>
var context = cubism.context()
.step(24*60*60*1000)
.size(document.body.clientWidth)
.stop();
d3.select("#demo").selectAll(".axis")
.data(["top", "bottom"])
.enter().append("div")
.attr("class", function(d) { return d + " axis"; })
.each(function(d) { d3.select(this).call(context.axis().orient(d)); });
d3.select("body").append("div")
.attr("class", "rule")
.call(context.rule());
d3.select("body").selectAll(".horizon")
.data(["AAPL", "TSLA", "GOOG", "INTC", "MSFT", "FB", "TWTR", "LNKD", "YHOO", "T", "S", "VZ"].map(stock))
.enter().insert("div", ".bottom")
.attr("class", "horizon")
.call(context.horizon())
context.on("focus", function(i) {
d3.selectAll(".value").style("right",
i == null
? null
: context.size() - i + "px");
});
function stock(name) {
var format = d3.time.format("%Y-%m-%d");
return context.metric(function(start, stop, step, callback) {
d3.csv(name + ".csv", function(rows) {
var values = [],
lookup = {},
i = start.getTime();
rows.forEach(function(d) {
d.Volume = +d.Volume;
lookup[d.Date] = d;
});
while ((i += step) < stop) {
var key = format(new Date(i));
var value = key in lookup ? lookup[key].Volume: null;
values.push(value);
}
callback(null, values);
});
}, name);
}
</script>
curl "http://real-chart.finance.yahoo.com/table.csv?s=AAPL&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > AAPL.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=TSLA&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > TSLA.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=GOOG&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > GOOG.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=INTC&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > INTC.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=MSFT&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > MSFT.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=FB&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > FB.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=TWTR&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > TWTR.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=LNKD&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > LNKD.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=YELP&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > YELP.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=YHOO&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > YHOO.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=T&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > T.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=S&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > S.csv
curl "http://real-chart.finance.yahoo.com/table.csv?s=VZ&a=1&b=1&c=2013&d=07&e=15&f=2015&g=d&ignore=.csv" > VZ.csv