d3
Version:
A small, free JavaScript library for manipulating documents based on data.
79 lines (73 loc) • 11.3 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js ~ Voronoi Diagram</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='voronoi_diagram'>Voronoi Diagram</h1>
<div class='gallery' id='chart'> </div><link href='colorbrewer.css' rel='stylesheet' type='text/css' /><link href='voronoi.css' rel='stylesheet' type='text/css' /><script src='../d3.geom.js?1.12.0' type='text/javascript'> </script><script src='voronoi.js' type='text/javascript'> </script>
<p>Colors by <a href='http://colorbrewer.org/'>Cynthia Brewer</a>. Voronoi design commonly attributed to <a href='http://en.wikipedia.org/wiki/Lejeune_Dirichlet'>Lejeune Dirichlet</a> and <a href='http://en.wikipedia.org/wiki/Georgy_Voronoy'>Georgy Voronoy</a>. Voronoi algorithm by <a href='http://ect.bell-labs.com/who/sjf/'>Steven Fortune</a>; implementation based on work by <a href='http://blog.thejit.org/2010/02/12/voronoi-tessellation/'>Nicolas Garcia Belmonte</a>. Mouseover interaction inspired by <a href='http://www.raymondhill.net/blog/?p=9'>Raymond Hill</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'>w</span> <span class='o'>=</span> <span class='mi'>960</span><span class='p'>,</span>
<span class='lineno'> 2</span> <span class='nx'>h</span> <span class='o'>=</span> <span class='mi'>500</span><span class='p'>;</span>
<span class='lineno'> 3</span>
<span class='lineno'> 4</span> <span class='kd'>var</span> <span class='nx'>vertices</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>range</span><span class='p'>(</span><span class='mi'>100</span><span class='p'>).</span><span class='nx'>map</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span>
<span class='lineno'> 5</span> <span class='k'>return</span> <span class='p'>[</span><span class='nb'>Math</span><span class='p'>.</span><span class='nx'>random</span><span class='p'>()</span> <span class='o'>*</span> <span class='nx'>w</span><span class='p'>,</span> <span class='nb'>Math</span><span class='p'>.</span><span class='nx'>random</span><span class='p'>()</span> <span class='o'>*</span> <span class='nx'>h</span><span class='p'>];</span>
<span class='lineno'> 6</span> <span class='p'>});</span>
<span class='lineno'> 7</span>
<span class='lineno'> 8</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'> 9</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'>10</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"width"</span><span class='p'>,</span> <span class='nx'>w</span><span class='p'>)</span>
<span class='lineno'>11</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"height"</span><span class='p'>,</span> <span class='nx'>h</span><span class='p'>)</span>
<span class='lineno'>12</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'>"PiYG"</span><span class='p'>)</span>
<span class='lineno'>13</span> <span class='p'>.</span><span class='nx'>on</span><span class='p'>(</span><span class='s2'>"mousemove"</span><span class='p'>,</span> <span class='nx'>update</span><span class='p'>);</span>
<span class='lineno'>14</span>
<span class='lineno'>15</span> <span class='nx'>svg</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'>16</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>d3</span><span class='p'>.</span><span class='nx'>geom</span><span class='p'>.</span><span class='nx'>voronoi</span><span class='p'>(</span><span class='nx'>vertices</span><span class='p'>))</span>
<span class='lineno'>17</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'>18</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='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>,</span> <span class='nx'>i</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='nx'>i</span> <span class='o'>?</span> <span class='s2'>"q"</span> <span class='o'>+</span> <span class='p'>(</span><span class='nx'>i</span> <span class='o'>%</span> <span class='mi'>9</span><span class='p'>)</span> <span class='o'>+</span> <span class='s2'>"-9"</span> <span class='o'>:</span> <span class='kc'>null</span><span class='p'>;</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'>"d"</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='s2'>"M"</span> <span class='o'>+</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>join</span><span class='p'>(</span><span class='s2'>"L"</span><span class='p'>)</span> <span class='o'>+</span> <span class='s2'>"Z"</span><span class='p'>;</span> <span class='p'>});</span>
<span class='lineno'>20</span>
<span class='lineno'>21</span> <span class='nx'>svg</span><span class='p'>.</span><span class='nx'>selectAll</span><span class='p'>(</span><span class='s2'>"circle"</span><span class='p'>)</span>
<span class='lineno'>22</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>vertices</span><span class='p'>.</span><span class='nx'>slice</span><span class='p'>(</span><span class='mi'>1</span><span class='p'>))</span>
<span class='lineno'>23</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:circle"</span><span class='p'>)</span>
<span class='lineno'>24</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"transform"</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='s2'>"translate("</span> <span class='o'>+</span> <span class='nx'>d</span> <span class='o'>+</span> <span class='s2'>")"</span><span class='p'>;</span> <span class='p'>})</span>
<span class='lineno'>25</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>"r"</span><span class='p'>,</span> <span class='mi'>2</span><span class='p'>);</span>
<span class='lineno'>26</span>
<span class='lineno'>27</span> <span class='kd'>function</span> <span class='nx'>update</span><span class='p'>()</span> <span class='p'>{</span>
<span class='lineno'>28</span> <span class='nx'>vertices</span><span class='p'>[</span><span class='mi'>0</span><span class='p'>]</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>svg</span><span class='p'>.</span><span class='nx'>mouse</span><span class='p'>(</span><span class='k'>this</span><span class='p'>);</span>
<span class='lineno'>29</span> <span class='nx'>svg</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'>30</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>d3</span><span class='p'>.</span><span class='nx'>geom</span><span class='p'>.</span><span class='nx'>voronoi</span><span class='p'>(</span><span class='nx'>vertices</span><span class='p'>)</span>
<span class='lineno'>31</span> <span class='p'>.</span><span class='nx'>map</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='s2'>"M"</span> <span class='o'>+</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>join</span><span class='p'>(</span><span class='s2'>"L"</span><span class='p'>)</span> <span class='o'>+</span> <span class='s2'>"Z"</span><span class='p'>;</span> <span class='p'>}))</span>
<span class='lineno'>32</span> <span class='p'>.</span><span class='nx'>filter</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>getAttribute</span><span class='p'>(</span><span class='s2'>"d"</span><span class='p'>)</span> <span class='o'>!=</span> <span class='nx'>d</span><span class='p'>;</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'>"d"</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='nx'>d</span><span class='p'>;</span> <span class='p'>});</span>
<span class='lineno'>34</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>