mirror of https://github.com/vitalif/dimple
185 lines
8.9 KiB
HTML
185 lines
8.9 KiB
HTML
<!----------------------------------------------------------------->
|
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
|
<!----------------------------------------------------------------->
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta http-equiv="content-language" content="en-gb">
|
|
<meta name="description" content="dimple.js is a powerful and flexible open-source charting API for d3 letting you quickly and easily create and combine bar, line, area and scatter charts.">
|
|
<title>dimple - A simple charting API for d3 data visualisations</title>
|
|
<link rel="stylesheet" href="/stylesheets/styles.css">
|
|
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-47450855-1', 'dimplejs.org');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="banner">
|
|
</div>
|
|
<div class="wrapper">
|
|
<header>
|
|
<h1>dimple</h1>
|
|
<p>An object-oriented API for business analytics powered by d3.</p>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=pmsi-alignalytics&repo=dimple&type=watch&count=true"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
|
|
<a href="https://twitter.com/share?url=dimplejs.org" class="twitter-share-button" data-lang="en">Tweet</a>
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
|
<p></p>
|
|
<h3>Libraries</h3>
|
|
<p>
|
|
<a href="/dist/dimple.v2.1.6.js">
|
|
Full Javascript Library With Comments
|
|
</a><br/>
|
|
<a href="/dist/dimple.v2.1.6.min.js">
|
|
Minified Javascript Library
|
|
</a><br/>
|
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
|
Zip File
|
|
</a><br/>
|
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/tarball/master">
|
|
Tar Ball
|
|
</a><br/>
|
|
</p>
|
|
<h3>Resources</h3>
|
|
<p>
|
|
<a href="/examples_index.html">
|
|
Examples
|
|
</a><br/>
|
|
<a href="/advanced_examples_index.html">
|
|
Advanced Examples
|
|
</a><br/>
|
|
<a href="https://github.com/PMSI-AlignAlytics/dimple">
|
|
View On GitHub
|
|
</a><br/>
|
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">
|
|
Full API Documentation
|
|
</a><br/>
|
|
</p>
|
|
</header>
|
|
<section>
|
|
<h3>Simply Powerful</h3>
|
|
<p>
|
|
The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.
|
|
</p>
|
|
<h3>Examples</h3>
|
|
<p>
|
|
<div id="examples">
|
|
</div>
|
|
<a href="examples_index.html">See More Examples</a>
|
|
</p>
|
|
<h3>Getting Started</h3>
|
|
<p>
|
|
Before you can do anything, you must link d3. Simply add the following to your html:
|
|
</p>
|
|
<pre><code><script src="http://d3js.org/d3.v3.min.js"></script></code></pre>
|
|
<p>
|
|
That's the organ grinder taken care of, next you need the monkey. Add dimple as follows:
|
|
</p>
|
|
<pre><code><script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script></code></pre>
|
|
<p>
|
|
That's it, you're ready to get creative! If you don't know where to start, why not create a blank text document, drop the following in and save it as an html.
|
|
</p>
|
|
<pre><code><head>
|
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
|
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
var svg = dimple.newSvg("body", 800, 600);
|
|
var data = [
|
|
{ "Word":"Hello", "Awesomeness":2000 },
|
|
{ "Word":"World", "Awesomeness":3000 }
|
|
];
|
|
var chart = new dimple.chart(svg, data);
|
|
chart.addCategoryAxis("x", "Word");
|
|
chart.addMeasureAxis("y", "Awesomeness");
|
|
chart.addSeries(null, dimple.plot.bar);
|
|
chart.draw();
|
|
</script>
|
|
</body></code></pre>
|
|
<p>
|
|
Congratulations, you are now the proud owner of a dimple bar chart! Start playing and see where you end up. You might get some extra inspiration from the <a href="examples_index.html">examples</a> section.
|
|
</p>
|
|
|
|
<h3>What's up Doc(umentation)!</h3>
|
|
<p>
|
|
To understand how to use a particular dimple object or method please see the <a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">Full API Documentation</a><br/>
|
|
</p>
|
|
|
|
<h3>Author</h3>
|
|
|
|
<p><a href="https://twitter.com/jkiernander" class="user-mention">John Kiernander</a></p>
|
|
|
|
<h3>Contributors</h3>
|
|
|
|
<p>
|
|
<a href="https://github.com/laxgeek" class="user-mention">Laxgeek</a><br>
|
|
<a href="https://github.com/jjimenez" class="user-mention">Jose Jimenez</a><br>
|
|
<a href="https://github.com/kenips" class="user-mention">Ken Ip</a><br>
|
|
<a href="https://github.com/robertstettner" class="user-mention">Robert Stettner</a><br>
|
|
<a href="https://github.com/bbirand" class="user-mention">Berk Birand</a><br>
|
|
<a href="https://github.com/sfrantsuzov" class="user-mention">Stanislav Frantsuzov</a><br>
|
|
<a href="https://github.com/sajith" class="user-mention">Sajith Sasidharan</a><br>
|
|
<a class="user-mention">Robert Paskowitz</a><br>
|
|
<a href="https://github.com/guilhermesimoes" class="user-mention">Guilherme Simões</a><br>
|
|
<a href="https://github.com/younesben" class="user-mention">Younesben</a><br>
|
|
<a href="https://github.com/artsyca" class="user-mention">Alex Kessaris</a><br>
|
|
<a href="https://github.com/ses4j" class="user-mention">Scott Stafford</a><br>
|
|
<a href="https://github.com/ne8il" class="user-mention">Neil Ahrendt</a><br>
|
|
<a href="https://github.com/stephen-james" class="user-mention">Stephen James</a><br>
|
|
<a href="https://github.com/fjsj" class="user-mention">Flávio Juvenal</a><br>
|
|
<a href="https://github.com/davidzhaozz" class="user-mention">David Zhao</a><br>
|
|
<a href="https://github.com/hxu" class="user-mention">Han Xu</a><br>
|
|
<a href="https://github.com/dule" class="user-mention">Dan Le</a><br>
|
|
<a href="https://github.com/kbuchanan" class="user-mention">Keith Buchanan</a><br>
|
|
</p>
|
|
|
|
|
|
</section>
|
|
<footer>
|
|
<p>
|
|
This is an open-source project by <br/>
|
|
<a href="http://www.align-alytics.com">
|
|
PMSI-AlignAlytics</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/fork">
|
|
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
|
|
</a>
|
|
<script type="text/javascript">
|
|
$.getJSON("/examples_meta.json", function(data) {
|
|
// Get 6 random charts
|
|
var chartCount = 6;
|
|
// Limit the array to the max length of the data
|
|
chartCount = (chartCount < data.length ? chartCount : data.length);
|
|
// Shuffle the reports
|
|
for (var i = 0; i < chartCount; i++) {
|
|
var j = i + Math.round(Math.random() * (data.length - (i + 1)));
|
|
var s = data[i];
|
|
data[i] = data[j];
|
|
data[j] = s;
|
|
}
|
|
// Chop the array to the correct length
|
|
data = data.slice(0, chartCount);
|
|
// Add the elements in the new random array
|
|
data.forEach(function (spec, i) {
|
|
$("#examples").append("<a class=\"example\" href=\"/examples_viewer.html?id=" + spec.id + "\"><img src=\"/images/" + spec.id + ".jpg\"></a>");
|
|
});
|
|
});
|
|
</script>
|
|
<script src="/javascripts/scale.fix.js"></script>
|
|
</body>
|
|
</html> |