d3.chart
Version:
A framework for creating reusable charts with D3.js
111 lines (87 loc) • 2.98 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>D3.chart examples</title>
<script src="scripts/lib/d3.v3.js"></script>
<script src="../d3.chart.js"></script>
<script src="scripts/datasrc.js"></script>
<script src="scripts/bar-chart.js"></script>
<script src="scripts/fading-bar-chart.js"></script>
<script src="scripts/chord-diagram.js"></script>
<script src="scripts/improved-chord-diagram.js"></script>
<script src="scripts/hybrid.js"></script>
<link rel="stylesheet" href="styles/index.css"></link>
</head>
<body>
<img src="images/logo.png" />
<p>Miso is an open source toolkit designed to expedite the creation of high-quality interactive storytelling and data visualisation content. <a href="http://misoproject.com/">Learn more.</a></p>
<h2>D3.Chart Examples</h2>
<!-- quick anchor menu -->
<ol>
<li><a href="#miso_bar_chart">Reusable Bar Chart</a></li>
<li><a href="#miso_circle_chart">Extending a Chart</a></li>
<li><a href="#bar_chart">Bar Chart</a></li>
<li><a href="#custom_bar_chart">Custom Bar Chart</a></li>
<li><a href="#fading_bar_chart">Fading Bar Chart</a></li>
<li><a href="#chord_diagram">Chord Diagram</a></li>
<li><a href="#custom_chord_diagram">Custom Chord Diagram</a></li>
<li><a href="#improved_chord_diagram">Improved Chord Diagram</a></li>
<li><a href="#hybrid_chart">Hybrid</a></li>
</ol>
<!-- examples -->
<ol>
<li>
<a name="miso_bar_chart">Reusable Bar Chart</a>
<div class="description">
<p>In this <a href="http://misoproject.com/d3-chart/examples/basic.html">example</a> we create a basic circle chart and then extend it to add labels above the circles showing their exact value.
</p>
</div>
</li>
<hr />
<li>
<a name="miso_circle_chart">Extending a Chart</a>
<div class="description">
<p>In this <a href="http://misoproject.com/d3-chart/examples/extending.html">example</a> we create a basic circle chart and then extend it to add labels above the circles showing their exact value.</p>
</div>
</li>
<hr />
<li>
<a name="bar_chart">Bar Chart</a>
<div id="barChart"></div>
</li>
<hr />
<li>
<a name="custom_bar_chart">Custom Bar Chart</a>
<div id="barChartCustom"></div>
</li>
<hr />
<li>
<a name="fading_bar_chart">Fading Bar Chart ( more modular code base )</a>
<div id="barChartFading"></div>
</li>
<hr />
<li>
<a name="chord_diagram">Chord Diagram</a>
<div id="chordDiagram"></div>
</li>
<hr />
<li>
<a name="custom_chord_diagram">Custom Chord Diagram</a>
<div id="chordDiagramCustom"></div>
</li>
<hr />
<li>
<a name="improved_chord_diagram">Improved Chord Diagrams</a>
<div id="chordDiagramImproved"></div>
</li>
<hr />
<li>
<a name="hybrid_chart">Hybrid</a>
<div id="hybrid"></div>
</li>
<hr />
</ol>
<script src="scripts/app.js"></script>
</body>
</html>