d3
Version:
A small, free JavaScript library for manipulating documents based on data.
83 lines (77 loc) • 9.51 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js ~ Choropleth</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>
<b><a href="../ex/">Examples</a></b>
<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='choropleth'>Choropleth</h1>
<div class='gallery' id='chart'> </div><link href='choropleth.css' rel='stylesheet' type='text/css' /><link href='colorbrewer.css' rel='stylesheet' type='text/css' /><script src='../d3.geo.js?1.12.0' type='text/javascript'> </script><script src='choropleth.js' type='text/javascript'> </script>
<p>Choropleth design invented by <a href='http://en.wikipedia.org/wiki/Charles_Dupin'>Charles Dupin</a>. Colors by <a href='http://colorbrewer.org/'>Cynthia Brewer</a>. Data from the <a href='http://www.bls.gov/'>Bureau of Labor Statistics</a>, by way of <a href='http://flowingdata.com/2009/11/12/how-to-make-a-us-county-thematic-map-using-free-tools/'>Nathan Yau</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>.</p>
<h3 id='source_code'>Source Code</h3>
<div class='highlight'><pre><code class='js'><span class='lineno'> 1</span> <span class='kd'>var</span> <span class='nx'>data</span><span class='p'>;</span> <span class='c1'>// loaded asynchronously</span>
<span class='lineno'> 2</span>
<span class='lineno'> 3</span> <span class='kd'>var</span> <span class='nx'>path</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>geo</span><span class='p'>.</span><span class='nx'>path</span><span class='p'>();</span>
<span class='lineno'> 4</span>
<span class='lineno'> 5</span> <span class='kd'>var</span> <span class='nx'>svg</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>select</span><span class='p'>(</span><span class='s2'>"#chart"</span><span class='p'>)</span>
<span class='lineno'> 6</span> <span class='p'>.</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>"svg:svg"</span><span class='p'>);</span>
<span class='lineno'> 7</span>
<span class='lineno'> 8</span> <span class='kd'>var</span> <span class='nx'>counties</span> <span class='o'>=</span> <span class='nx'>svg</span><span class='p'>.</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>"svg:g"</span><span class='p'>)</span>
<span class='lineno'> 9</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"id"</span><span class='p'>,</span> <span class='s2'>"counties"</span><span class='p'>)</span>
<span class='lineno'>10</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"class"</span><span class='p'>,</span> <span class='s2'>"Blues"</span><span class='p'>);</span>
<span class='lineno'>11</span>
<span class='lineno'>12</span> <span class='kd'>var</span> <span class='nx'>states</span> <span class='o'>=</span> <span class='nx'>svg</span><span class='p'>.</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>"svg:g"</span><span class='p'>)</span>
<span class='lineno'>13</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"id"</span><span class='p'>,</span> <span class='s2'>"states"</span><span class='p'>);</span>
<span class='lineno'>14</span>
<span class='lineno'>15</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>json</span><span class='p'>(</span><span class='s2'>"us-counties.json"</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>)</span> <span class='p'>{</span>
<span class='lineno'>16</span> <span class='nx'>counties</span><span class='p'>.</span><span class='nx'>selectAll</span><span class='p'>(</span><span class='s2'>"path"</span><span class='p'>)</span>
<span class='lineno'>17</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>.</span><span class='nx'>features</span><span class='p'>)</span>
<span class='lineno'>18</span> <span class='p'>.</span><span class='nx'>enter</span><span class='p'>().</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>"svg:path"</span><span class='p'>)</span>
<span class='lineno'>19</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"class"</span><span class='p'>,</span> <span class='nx'>data</span> <span class='o'>?</span> <span class='nx'>quantize</span> <span class='o'>:</span> <span class='kc'>null</span><span class='p'>)</span>
<span class='lineno'>20</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"d"</span><span class='p'>,</span> <span class='nx'>path</span><span class='p'>);</span>
<span class='lineno'>21</span> <span class='p'>});</span>
<span class='lineno'>22</span>
<span class='lineno'>23</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>json</span><span class='p'>(</span><span class='s2'>"us-states.json"</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>)</span> <span class='p'>{</span>
<span class='lineno'>24</span> <span class='nx'>states</span><span class='p'>.</span><span class='nx'>selectAll</span><span class='p'>(</span><span class='s2'>"path"</span><span class='p'>)</span>
<span class='lineno'>25</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>.</span><span class='nx'>features</span><span class='p'>)</span>
<span class='lineno'>26</span> <span class='p'>.</span><span class='nx'>enter</span><span class='p'>().</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>"svg:path"</span><span class='p'>)</span>
<span class='lineno'>27</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"d"</span><span class='p'>,</span> <span class='nx'>path</span><span class='p'>);</span>
<span class='lineno'>28</span> <span class='p'>});</span>
<span class='lineno'>29</span>
<span class='lineno'>30</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>json</span><span class='p'>(</span><span class='s2'>"unemployment.json"</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>)</span> <span class='p'>{</span>
<span class='lineno'>31</span> <span class='nx'>data</span> <span class='o'>=</span> <span class='nx'>json</span><span class='p'>;</span>
<span class='lineno'>32</span> <span class='nx'>counties</span><span class='p'>.</span><span class='nx'>selectAll</span><span class='p'>(</span><span class='s2'>"path"</span><span class='p'>)</span>
<span class='lineno'>33</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"class"</span><span class='p'>,</span> <span class='nx'>quantize</span><span class='p'>);</span>
<span class='lineno'>34</span> <span class='p'>});</span>
<span class='lineno'>35</span>
<span class='lineno'>36</span> <span class='kd'>function</span> <span class='nx'>quantize</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span>
<span class='lineno'>37</span> <span class='k'>return</span> <span class='s2'>"q"</span> <span class='o'>+</span> <span class='nb'>Math</span><span class='p'>.</span><span class='nx'>min</span><span class='p'>(</span><span class='mi'>8</span><span class='p'>,</span> <span class='o'>~~</span><span class='p'>(</span><span class='nx'>data</span><span class='p'>[</span><span class='nx'>d</span><span class='p'>.</span><span class='nx'>id</span><span class='p'>]</span> <span class='o'>*</span> <span class='mi'>9</span> <span class='o'>/</span> <span class='mi'>12</span><span class='p'>))</span> <span class='o'>+</span> <span class='s2'>"-9"</span><span class='p'>;</span>
<span class='lineno'>38</span> <span class='p'>}</span>
</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>