36 lines
2.0 KiB
Plaintext
36 lines
2.0 KiB
Plaintext
<h1>Examples</h1>
|
|
|
|
<p>Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js.</p>
|
|
|
|
<div class='ui top attached segment example-segment'>
|
|
<div>
|
|
<a href='/examples/basic.html'><img src='/images/ex-basic.png'></a>
|
|
<a href='/examples/basic.html'><h2><i class='icon black globe'></i>Basic Globe</h2></a>
|
|
<p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p>
|
|
<span class='ui red horizontal label'>plugins: earth</span>
|
|
<span class='ui purple horizontal label'>d3: projections</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='ui attached segment example-segment'>
|
|
<div>
|
|
<a href='/examples/rotating.html'><img src='/images/ex-rotating.png'></a>
|
|
<a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>Rotating Globe with Pings</h2></a>
|
|
<p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p>
|
|
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
|
|
<span class='ui teal horizontal label'>custom plugins</span>
|
|
<span class='ui purple horizontal label'>d3: projections</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='ui bottom attached segment example-segment'>
|
|
<div>
|
|
<a href='/examples/quake.html'><img src='/images/ex-quake.png'></a>
|
|
<a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>2013 Seismic Activity Visualization</h2></a>
|
|
<p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p>
|
|
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
|
|
<span class='ui teal horizontal label'>custom plugins</span>
|
|
<span class='ui purple horizontal label'>d3: projections, scales, selections, events, external data</span>
|
|
</div>
|
|
</div>
|