d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

95 lines (89 loc) • 15.4 kB

HTML

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Non-Contiguous Cartogram</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='noncontiguous_cartogram'>Non-Contiguous Cartogram</h1> <div class='gallery' id='chart'> </div><link href='cartogram.css' rel='stylesheet' type='text/css' /><script src='../d3.geo.js?1.12.0' type='text/javascript'> </script><script src='../d3.geom.js?1.12.0' type='text/javascript'> </script><script src='cartogram.js' type='text/javascript'> </script> Inspired by <a href='http://indiemaps.com/blog/2011/02/noncontiguous-cartograms-in-openlayers-and-polymaps/'>Zachary Johnson</a>. Non-continguous cartogram design invented by <a href='http://onlinelibrary.wiley.com/doi/10.1111/j.0033-0124.1976.00371.x/abstract'>Judy Olsen</a>. Albers projection derived from work by <a href='http://gist.github.com/476238'>Tom Carden</a>. U.S. state and county boundaries from the <a href='http://www.census.gov/'>U.S. Census Bureau</a>, simplified using <a href='http://www.gdal.org/'>GDAL</a> and <a href='http://mapshaper.org/'>MapShaper</a>. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 1 // Ratio of Obese (BMI >= 30) in U.S. Adults, CDC 2008 2 var data = [ 3 , .187, .198, , .133, .175, .151, , .1, .125, .171, , .172, .133, , .108, 4 .142, .167, .201, .175, .159, .169, .177, .141, .163, .117, .182, .153, .195, 5 .189, .134, .163, .133, .151, .145, .13, .139, .169, .164, .175, .135, .152, 6 .169, , .132, .167, .139, .184, .159, .14, .146, .157, , .139, .183, .16, .143 7 ]; 8 9 var svg = d3.select("#chart") 10 .append("svg:svg"); 11 12 d3.json("us-states.json", function(json) { 13 var path = d3.geo.path(); 14 15 // A thick black stroke for the exterior. 16 svg.append("svg:g") 17 .attr("class", "black") 18 .selectAll("path") 19 .data(json.features) 20 .enter().append("svg:path") 21 .attr("d", path); 22 23 // A white overlay to hide interior black strokes. 24 svg.append("svg:g") 25 .attr("class", "white") 26 .selectAll("path") 27 .data(json.features) 28 .enter().append("svg:path") 29 .attr("d", path); 30 31 // The polygons, scaled! 32 svg.append("svg:g") 33 .attr("class", "grey") 34 .selectAll("path") 35 .data(json.features) 36 .enter().append("svg:path") 37 .attr("transform", function(d) { 38 var centroid = path.centroid(d), 39 x = centroid[0], 40 y = centroid[1]; 41 return "translate(" + x + "," + y + ")" 42 + "scale(" + Math.sqrt(data[+d.id] * 5 || 0) + ")" 43 + "translate(" + -x + "," + -y + ")"; 44 }) 45 .attr("stroke-width", function(d) { 46 return 1 / Math.sqrt(data[+d.id] * 5); 47 }) 48 .attr("d", path); 49 50 }); </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>