Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add cartogram example.

  • Loading branch information...
commit e8f20d95cb559defaaef74326bcbe83314680ccf 1 parent fbe3956
@mbostock mbostock authored
View
11 _includes/Makefile
@@ -17,6 +17,8 @@ EX_FILES = \
../ex/calendar.css \
../ex/chord.css \
../ex/chord.js \
+ ../ex/cartogram.css \
+ ../ex/cartogram.js \
../ex/choropleth.css \
../ex/choropleth.js \
../ex/colorbrewer.css \
@@ -43,6 +45,7 @@ EX_FILES = \
../ex/voronoi.js
INCLUDE_FILES = \
+ cartogram.js \
chord.js \
choropleth.js \
dji.js \
@@ -68,6 +71,14 @@ $(SRC_FILES):
@rm -rf $@
git cat-file blob master:examples/calendar/calendar.css > $@
+../ex/cartogram.css:
+ @rm -rf $@
+ git cat-file blob master:examples/cartogram/cartogram.css > $@
+
+../ex/cartogram.js cartogram.js:
+ @rm -rf $@
+ git cat-file blob master:examples/cartogram/cartogram.js > $@
+
../ex/chord.css:
@rm -rf $@
git cat-file blob master:examples/chord/chord.css > $@
View
48 _includes/cartogram.js
@@ -0,0 +1,48 @@
+var data; // loaded asynchronously
+
+var svg = d3.select("#chart")
+ .append("svg:svg");
+
+d3.json("us-states.json", function(json) {
+ var path = d3.geo.path();
+
+ // Synthesize a random data variable to visualize…
+ // Note: This has a baked-in sqrt transform!
+ json.features.forEach(function(f) {
+ f.properties.value = Math.sqrt(.2 + .8 * Math.random());
+ });
+
+ // A thick black stroke for the exterior.
+ svg.append("svg:g")
+ .attr("class", "black")
+ .selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("d", path);
+
+ // A white overlay to hide interior black strokes.
+ svg.append("svg:g")
+ .attr("class", "white")
+ .selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("d", path);
+
+ // The polygons, scaled!
+ svg.append("svg:g")
+ .attr("class", "grey")
+ .selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("transform", function(d) {
+ var centroid = path.centroid(d),
+ x = centroid[0],
+ y = centroid[1];
+ return "translate(" + x + "," + y + ")"
+ + "scale(" + d.properties.value + ")"
+ + "translate(" + -x + "," + -y + ")";
+ })
+ .attr("stroke-width", function(d) { return 1 / d.properties.value; })
+ .attr("d", path);
+
+});
View
BIN  cartogram.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
20 ex/cartogram.css
@@ -0,0 +1,20 @@
+#chart {
+ width: 960px;
+ height: 500px;
+}
+
+.black path {
+ fill: none;
+ stroke: #ccc;
+ stroke-width: 3px;
+}
+
+.white path {
+ fill: #fff;
+ stroke: #fff;
+}
+
+.grey path {
+ fill: #ccc;
+ stroke: #666;
+}
View
48 ex/cartogram.js
@@ -0,0 +1,48 @@
+var data; // loaded asynchronously
+
+var svg = d3.select("#chart")
+ .append("svg:svg");
+
+d3.json("us-states.json", function(json) {
+ var path = d3.geo.path();
+
+ // Synthesize a random data variable to visualize…
+ // Note: This has a baked-in sqrt transform!
+ json.features.forEach(function(f) {
+ f.properties.value = Math.sqrt(.2 + .8 * Math.random());
+ });
+
+ // A thick black stroke for the exterior.
+ svg.append("svg:g")
+ .attr("class", "black")
+ .selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("d", path);
+
+ // A white overlay to hide interior black strokes.
+ svg.append("svg:g")
+ .attr("class", "white")
+ .selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("d", path);
+
+ // The polygons, scaled!
+ svg.append("svg:g")
+ .attr("class", "grey")
+ .selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("transform", function(d) {
+ var centroid = path.centroid(d),
+ x = centroid[0],
+ y = centroid[1];
+ return "translate(" + x + "," + y + ")"
+ + "scale(" + d.properties.value + ")"
+ + "translate(" + -x + "," + -y + ")";
+ })
+ .attr("stroke-width", function(d) { return 1 / d.properties.value; })
+ .attr("d", path);
+
+});
View
21 ex/cartogram.markdown
@@ -0,0 +1,21 @@
+---
+layout: ex
+title: Non-Contiguous Cartogram
+---
+
+# Non-Contiguous Cartogram
+
+<div class="gallery" id="chart"> </div>
+<link type="text/css" rel="stylesheet" href="cartogram.css"/>
+<script type="text/javascript" src="../d3.js"> </script>
+<script type="text/javascript" src="../d3.geo.js"> </script>
+<script type="text/javascript" src="../d3.geom.js"> </script>
+<script type="text/javascript" src="cartogram.js"> </script>
+
+Inspired by [Zachary Johnson](http://indiemaps.com/blog/2011/02/noncontiguous-cartograms-in-openlayers-and-polymaps/).
+
+### Source Code
+
+{% highlight js linenos %}
+{% include cartogram.js %}
+{% endhighlight %}
View
12 ex/index.markdown
@@ -41,6 +41,18 @@ title: Examples
</div>
<div class="list">
+ <a href="cartogram.html">
+ <img src="../cartogram.png"/>
+ </a>
+ <h4><a href="cartogram.html">Non-Contiguous Cartogram</a></h4>
+
+ <p>Unlike choropleth maps, cartograms encode data using area rather than
+ color, resulting in distorted geographic boundaries. In this example, states
+ are rescaled around their centroid, preserving local shape but not
+ topology.</p>
+</div>
+
+<div class="list">
<a href="force.html">
<img src="../force.png"/>
</a>
Please sign in to comment.
Something went wrong with that request. Please try again.