Skip to content

Instantly share code, notes, and snippets.

@atmccann

atmccann/data.json

Created September 18, 2013 21:59
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 atmccann/6616358 to your computer and use it in GitHub Desktop.
Save atmccann/6616358 to your computer and use it in GitHub Desktop.
Download ZIP
bar chart transitions (can you tell i like bar charts?)
Raw
data.json
[{"network":"ABC","year_one":9860,"year_two":10596,"year_three":9989,"year_four":12217,"year_five":12281,"year_six":11913,"year_seven":12265,"year_eight":11050,"year_nine":9595,"year_ten":9871,"year_eleven":8339},
{"network":"AZA","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":213,"year_six":0,"year_seven":0,"year_eight":201,"year_nine":236,"year_ten":212,"year_eleven":0},
{"network":"CBS","year_one":13959,"year_two":13856,"year_three":13581,"year_four":12843,"year_five":13019,"year_six":11726,"year_seven":11274,"year_eight":11812,"year_nine":12538,"year_ten":12284,"year_eleven":10690},
{"network":"CW","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":2847,"year_six":2772,"year_seven":2911,"year_eight":2177,"year_nine":2481,"year_ten":1642,"year_eleven":688},
{"network":"ETV","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":0,"year_six":0,"year_seven":0,"year_eight":0,"year_nine":226,"year_ten":200,"year_eleven":231},
{"network":"FOX","year_one":7102,"year_two":6023,"year_three":5436,"year_four":6479,"year_five":7507,"year_six":6936,"year_seven":7734,"year_eight":7371,"year_nine":6526,"year_ten":8434,"year_eleven":7158},
{"network":"ION","year_one":1189,"year_two":811,"year_three":626,"year_four":561,"year_five":628,"year_six":488,"year_seven":369,"year_eight":628,"year_nine":1009,"year_ten":956,"year_eleven":920},
{"network":"MNT","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":847,"year_six":853,"year_seven":1257,"year_eight":1358,"year_nine":0,"year_ten":0,"year_eleven":0},
{"network":"NBC","year_one":13419,"year_two":12572,"year_three":10607,"year_four":9879,"year_five":11045,"year_six":9929,"year_seven":8325,"year_eight":7567,"year_nine":8172,"year_ten":7495,"year_eleven":8190},
{"network":"PBS","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":0,"year_six":0,"year_seven":0,"year_eight":0,"year_nine":0,"year_ten":1507,"year_eleven":1651},
{"network":"TEL","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":940,"year_six":962,"year_seven":1006,"year_eight":883,"year_nine":678,"year_ten":980,"year_eleven":1202},
{"network":"UMA","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":563,"year_six":679,"year_seven":638,"year_eight":839,"year_nine":727,"year_ten":403,"year_eleven":629},
{"network":"UNI","year_one":0,"year_two":0,"year_three":0,"year_four":0,"year_five":3516,"year_six":3302,"year_seven":3685,"year_eight":3659,"year_nine":4011,"year_ten":3695,"year_eleven":3537},
{"network":"UPN","year_one":4207,"year_two":3448,"year_three":3193,"year_four":4134,"year_five":0,"year_six":0,"year_seven":0,"year_eight":0,"year_nine":0,"year_ten":0,"year_eleven":0},
{"network":"WB","year_one":4532,"year_two":4008,"year_three":4243,"year_four":3289,"year_five":0,"year_six":0,"year_seven":0,"year_eight":0,"year_nine":0,"year_ten":0,"year_eleven":0}]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
width: 960px;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text {
font: 10px sans-serif;
}
/*.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}*/
.bar {
fill: steelblue;
/*fill-opacity: .9;*/
}
label {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<div id="option">
<select type='select' onchange='updateData(value);' style='color:steelblue;font-size:1.1em;'>
<option value='year_one' name='2002' selected='true' >2002</option>
<option value='year_two' name='2003'>2003</option>
<option value='year_three' name='2004'>2004</option>
<option value='year_four' name='2005'>2005</option>
<option value='year_five' name='2006'>2006</option>
<option value='year_six' name='2007'>2007</option>
<option value='year_seven' name='2008'>2008</option>
<option value='year_eight' name='2009'>2009</option>
<option value='year_nine' name='2010'>2010</option>
<option value='year_ten' name='2011'>2011</option>
<option value='year_eleven' name='2012'>2012</option>
</select>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 560 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").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 + ")");
//create line of values
var valueline = d3.svg.line()
.x(function(d) { return x(d.network); })
.y(function(d) { return y(d.variable); });
var json
d3.json("data.json", function(error, result){
json = result;
var data = [];
json.forEach(function(d){
data.push({variable: +d['year_one'], network: d['network']});
});
x.domain(data.map(function(d) { return d.network; }));
y.domain([d3.min(data, function(d) { return d.variable; }), d3.max(data, function(d) { return d.variable; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", 26)
.attr("dx", "50.71em")
.style("text-anchor", "end")
.text("network");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("viewers");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.network); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.variable); })
.attr("height", function(d) { return height - y(d.variable); });
});
//update data from combobox onChange
function updateData(value) {
var data = [];
json.forEach(function(d){
data.push({variable: +d[value], network: d['network']});
});
x.domain(data.map(function(d) { return d.network; }));
y.domain([d3.min(data, function(d) { return d.variable; }), d3.max(data, function(d) { return d.variable; })]);
// Select the section we want to apply our changes to
var trans = d3.select("body").transition();
// Make the changes
var transition = svg.transition().duration(750),
delay = function(d, i) { return i * 50; };
svg.selectAll(".bar")
.data(data)
.transition().duration(750)
.attr("x", function(d) { return x(d.network); })
.attr("y", function(d) { return y(d.variable); })
.attr("height", function(d) { return height - y(d.variable); });
transition.select(".y.axis") // change the y axis
.call(yAxis);
};
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment