39 lines
2.2 KiB
Plaintext
39 lines
2.2 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 segment example-segment'>
|
|
<div class='ui top attached purple label'>Level 1</div>
|
|
<div>
|
|
<a href='/examples/basic.html'><img src='/images/ex-basic.png' style='float: left; margin-right: 20px;'></a>
|
|
<a href='/examples/basic.html'><h2>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 teal horizontal label'>plugins: earth</span>
|
|
<span class='ui black horizontal label'>d3: projections</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='ui segment example-segment'>
|
|
<div class='ui top attached orange label'>Level 2</div>
|
|
<div>
|
|
<a href='/examples/rotating.html'><img src='/images/ex-rotating.png' style='float: left; margin-right: 20px;'></a>
|
|
<a href='/examples/rotating.html'><h2>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 teal horizontal label'>plugins: earth, pings, drag, zoom</span>
|
|
<span class='ui orange horizontal label'>custom plugins</span>
|
|
<span class='ui black horizontal label'>d3: projections</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='ui segment example-segment'>
|
|
<div class='ui top attached red label'>Level 3</div>
|
|
<div>
|
|
<a href='/examples/quake.html'><img src='/images/ex-quake.png' style='float: left; margin-right: 20px;'></a>
|
|
<a href='/examples/quake.html'><h2>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 teal horizontal label'>plugins: earth, pings, drag, zoom</span>
|
|
<span class='ui orange horizontal label'>custom plugins</span>
|
|
<span class='ui black horizontal label'>d3: projections, scales, selections, events, external data</span>
|
|
</div>
|
|
</div>
|