Permalink
Browse files

Add population example.

  • Loading branch information...
1 parent d8d892a commit 1ade58a6f120c3a33da73e2d09ba0f199202d6b4 @mbostock mbostock committed Aug 1, 2011
View
@@ -63,7 +63,10 @@ EX_FILES = \
../ex/bullet.css \
../ex/bullets.json \
../ex/tree.js \
- ../ex/tree.css
+ ../ex/tree.css \
+ ../ex/population.js \
+ ../ex/population.csv \
+ ../ex/population.css
INCLUDE_FILES = \
box.js \
@@ -85,7 +88,8 @@ INCLUDE_FILES = \
bullets.json \
bubble.js \
pack.js \
- tree.js
+ tree.js \
+ population.js
.PHONY all: $(SRC_FILES) $(EX_FILES) $(INCLUDE_FILES)
@@ -281,3 +285,15 @@ $(SRC_FILES):
../ex/sunburst.js sunburst.js:
@rm -rf $@
git cat-file blob master:examples/partition/partition-sunburst.js > $@
+
+../ex/population.css:
+ @rm -rf $@
+ git cat-file blob master:examples/population/population.css > $@
+
+../ex/population.js population.js:
+ @rm -rf $@
+ git cat-file blob master:examples/population/population.js > $@
+
+../ex/population.csv:
+ @rm -rf $@
+ git cat-file blob master:examples/population/population.csv > $@
View
@@ -0,0 +1,124 @@
+var w = 960,
+ h = 500,
+ x = d3.scale.linear().range([0, w - 30]),
+ y = d3.scale.linear().range([0, h - 40]);
+
+// An SVG element with a bottom-right origin.
+var svg = d3.select("#chart").append("svg:svg")
+ .attr("width", w)
+ .attr("height", h)
+ .append("svg:g")
+ .attr("transform", "translate(" + x(1) + "," + (h - 20) + ")scale(-1,-1)");
+
+// A sliding container to hold the bars.
+var body = svg.append("svg:g")
+ .attr("transform", "translate(0,0)");
+
+// A container to hold the y-axis rules.
+var rules = svg.append("svg:g");
+
+// A label for the current year.
+var title = svg.append("svg:text")
+ .attr("class", "title")
+ .attr("dy", ".71em")
+ .attr("transform", "translate(" + (x(1) - 20) + "," + y(1) + ")scale(-1,-1)")
+ .text(2000);
+
+d3.csv("population.csv", function(data) {
+
+ // Convert strings to numbers.
+ data.forEach(function(d) {
+ d.people = +d.people;
+ d.year = +d.year;
+ d.age = +d.age;
+ });
+
+ // Compute the extent of the data set in age and years.
+ var age0 = 0,
+ age1 = d3.max(data, function(d) { return d.age; }),
+ year0 = d3.min(data, function(d) { return d.year; }),
+ year1 = d3.max(data, function(d) { return d.year; }),
+ year = year1;
+
+ // Update the scale domains.
+ x.domain([0, age1 + 5]);
+ y.domain([0, d3.max(data, function(d) { return d.people; })]);
+
+ // Add rules to show the population values.
+ rules = rules.selectAll(".rule")
+ .data(y.ticks(10))
+ .enter().append("svg:g")
+ .attr("class", "rule")
+ .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
+
+ rules.append("svg:line")
+ .attr("x2", w);
+
+ rules.append("svg:text")
+ .attr("x", 4)
+ .attr("dy", ".35em")
+ .attr("transform", "rotate(180)")
+ .text(function(d) { return Math.round(d / 1e6) + "M"; });
+
+ // Add labeled rects for each birthyear.
+ var years = body.selectAll("g")
+ .data(d3.range(year0 - age1, year1 + 5, 5))
+ .enter().append("svg:g")
+ .attr("transform", function(d) { return "translate(" + x(year1 - d) + ",0)"; });
+
+ years.selectAll("rect")
+ .data(d3.range(2))
+ .enter().append("svg:rect")
+ .attr("width", x(5) - 2)
+ .attr("height", 1e-6);
+
+ years.append("svg:text")
+ .attr("y", -6)
+ .attr("x", -x(5) / 2)
+ .attr("transform", "rotate(180)")
+ .attr("text-anchor", "middle")
+ .style("fill", "#fff")
+ .text(String);
+
+ // Add labels to show the age.
+ svg.append("svg:g").selectAll("text")
+ .data(d3.range(0, age1 + 5, 5))
+ .enter().append("svg:text")
+ .attr("text-anchor", "middle")
+ .attr("transform", function(d) { return "translate(" + (x(d) + x(5) / 2) + ",-4)scale(-1,-1)"; })
+ .attr("dy", ".71em")
+ .text(String);
+
+ // Nest by year then birthyear.
+ data = d3.nest()
+ .key(function(d) { return d.year; })
+ .key(function(d) { return d.year - d.age; })
+ .rollup(function(v) { return v.map(function(d) { return d.people; }); })
+ .map(data);
+
+ // Allow the arrow keys to change the displayed year.
+ d3.select(window).on("keydown", function() {
+ switch (d3.event.keyCode) {
+ case 37: year = Math.max(year0, year - 10); break;
+ case 39: year = Math.min(year1, year + 10); break;
+ }
+ redraw();
+ });
+
+ redraw();
+
+ function redraw() {
+ if (!(year in data)) return;
+ title.text(year);
+
+ body.transition()
+ .duration(750)
+ .attr("transform", function(d) { return "translate(" + x(year - year1) + ",0)"; });
+
+ years.selectAll("rect")
+ .data(function(d) { return data[year][d] || [0, 0]; })
+ .transition()
+ .duration(750)
+ .attr("height", y);
+ }
+});
View
@@ -41,6 +41,16 @@ title: Examples
</div>
<div class="list">
+ <a href="population.html">
+ <img src="../population.png"/>
+ </a>
+ <h4><a href="population.html">Population Pyramid</a></h4>
+
+ <p>This diagram shows the distribution of age groups in the United States over
+ the last 150 years. Use the arrow keys to observe the changing population.</p>
+</div>
+
+<div class="list">
<a href="cartogram.html">
<img src="../cartogram.png"/>
</a>
@@ -262,7 +272,7 @@ title: Examples
</a>
<h4><a href="http://keminglabs.com/ukuni/">University Admissions Statistics</a></h4>
- <p><a href="http://keminglabs.com">Kevin Lynagh</a> created this linked treemap &amp; line chart
+ <p><a href="http://keminglabs.com">Kevin Lynagh</a> created this linked treemap &amp; line chart
to show trends in admission and acceptance rates at UK universities by age, ethnicity, gender, and subject.</p>
</div>
View
@@ -0,0 +1,28 @@
+svg {
+ font: 10px sans-serif;
+}
+
+text.title {
+ font: 300 78px Helvetica Neue;
+ fill: #666;
+}
+
+.rule line {
+ stroke: #fff;
+ stroke-opacity: .2;
+ shape-rendering: crispEdges;
+}
+
+.rule:first-child line {
+ stroke: #000;
+ stroke-opacity: 1;
+}
+
+rect {
+ fill-opacity: .6;
+ fill: #e377c2;
+}
+
+rect:first-child {
+ fill: #1f77b4;
+}
Oops, something went wrong.

0 comments on commit 1ade58a

Please sign in to comment.