Skip to content

Instantly share code, notes, and snippets.

@bewest

bewest/README.md

Forked from mbostock/.block
Created December 17, 2012 08:38
Show Gist options
  • Save bewest/4316717 to your computer and use it in GitHub Desktop.
Save bewest/4316717 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Note: this uses the d3.chart module, which is deprecated. I need to rewrite the horizon component!

Raw
index.html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<div id="chart"></div>
<div id="controls">
<span id="mode">
<button class="first active">Offset</button
><button class="last">Mirror</button>
</span>
<span id="bands">
<button class="first">&#x2212;</button
><button class="last">+</button>
</span>
</div>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.chart.js?2.7.0"></script>
<script type="text/javascript">
var w = 960,
h = 120;
var chart = d3.chart.horizon()
.width(w)
.height(h)
.bands(5)
.mode("offset")
.interpolate("basis");
var svg = d3.select("#chart").append("svg")
.attr("width", w)
.attr("height", h);
d3.json("unemployment.json", function(data) {
// Offset so that positive is above-average and negative is below-average.
var mean = data.rate.reduce(function(p, v) { return p + v; }, 0) / data.rate.length;
// Transpose column values to rows.
data = data.rate.map(function(rate, i) {
return [Date.UTC(data.year[i], data.month[i] - 1), rate - mean];
});
// Render the chart.
svg.data([data]).call(chart);
// Enable mode buttons.
d3.selectAll("#mode button")
.data(["offset", "mirror"])
.on("click", function(m) {
svg.call(chart.duration(0).mode(m));
d3.selectAll("#mode button")
.classed("active", function(d) { return d == m; });
});
// Enable bands buttons.
d3.selectAll("#bands button")
.data([-1, 1])
.on("click", function bands(db) {
svg.call(chart.duration(1000).bands(Math.max(1, chart.bands() + db)));
});
});
</script>
<style type="text/css">
button.active {
background-color: rgb(65,102,133);
}
#controls {
position: relative;
width: 960px;
}
#bands {
position: absolute;
right: 0;
}
</style>
Raw
unemployment.json
{"year":[2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2001,2001,2001,2001,2001,2001,2001,2001,2001,2001,2001,2001,2002,2002,2002,2002,2002,2002,2002,2002,2002,2002,2002,2002,2003,2003,2003,2003,2003,2003,2003,2003,2003,2003,2003,2003,2004,2004,2004,2004,2004,2004,2004,2004,2004,2004,2004,2004,2005,2005,2005,2005,2005,2005,2005,2005,2005,2005,2005,2005,2006,2006,2006,2006,2006,2006,2006,2006,2006,2006,2006,2006,2007,2007,2007,2007,2007,2007,2007,2007,2007,2007,2007,2007,2008,2008,2008,2008,2008,2008,2008,2008,2008,2008,2008,2008,2009,2009,2009,2009,2009,2009,2009,2009,2009,2009,2009,2009,2010,2010],"month":[1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2],"rate":[4.5,4.4,4.3,3.7,3.8,4.1,4.2,4.1,3.8,3.6,3.7,3.7,4.7,4.6,4.5,4.2,4.1,4.7,4.7,4.9,4.7,5,5.3,5.4,6.3,6.1,6.1,5.7,5.5,6,5.9,5.7,5.4,5.3,5.6,5.7,6.5,6.4,6.2,5.8,5.8,6.5,6.3,6,5.8,5.6,5.6,5.4,6.3,6,6,5.4,5.3,5.8,5.7,5.4,5.1,5.1,5.2,5.1,5.7,5.8,5.4,4.9,4.9,5.2,5.2,4.9,4.8,4.6,4.8,4.6,5.1,5.1,4.8,4.5,4.4,4.8,5,4.6,4.4,4.1,4.3,4.3,5,4.9,4.5,4.3,4.3,4.7,4.9,4.6,4.5,4.4,4.5,4.8,5.4,5.2,5.2,4.8,5.2,5.7,6,6.1,6,6.1,6.5,7.1,8.5,8.9,9,8.6,9.1,9.7,9.7,9.6,9.5,9.5,9.4,9.7,10.6,10.4]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment