2013-09-12 13:56:11 +04:00
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
2013-05-21 16:10:22 +04:00
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
2013-06-19 18:13:28 +04:00
< 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." >
2013-05-21 18:31:28 +04:00
< title > dimple - A simple charting API for d3 data visualisations< / title >
2013-05-21 16:49:16 +04:00
< link rel = "stylesheet" href = "/stylesheets/styles.css" >
< link rel = "stylesheet" href = "/stylesheets/pygment_trac.css" >
2013-05-21 16:10:22 +04:00
< 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]-->
2013-05-21 16:49:16 +04:00
< script type = "application/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > < / script >
2014-01-24 14:46:07 +04:00
< 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');
2013-09-06 13:59:56 +04:00
< / script >
2013-05-21 16:10:22 +04:00
< / head >
< body >
2013-05-21 16:49:16 +04:00
< div class = "banner" >
< / div >
2013-05-21 16:10:22 +04:00
< div class = "wrapper" >
< header >
< h1 > dimple< / h1 >
2013-05-21 16:49:16 +04:00
< p > An object-oriented API for business analytics powered by d3.< / p >
2014-07-04 15:48:53 +04:00
< 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 >
2013-05-21 16:49:16 +04:00
< h3 > Libraries< / h3 >
< p >
2016-03-23 18:34:55 +03:00
< a href = "/dist/dimple.v2.1.6.js" >
2013-09-06 13:59:56 +04:00
Full Javascript Library With Comments
< / a > < br / >
2016-03-23 18:34:55 +03:00
< a href = "/dist/dimple.v2.1.6.min.js" >
2013-09-06 13:59:56 +04:00
Minified Javascript Library
< / a > < br / >
2014-01-24 14:46:07 +04:00
< a href = "https://github.com/PMSI-AlignAlytics/dimple/zipball/master" >
2013-09-06 13:59:56 +04:00
Zip File
< / a > < br / >
2014-01-24 14:46:07 +04:00
< a href = "https://github.com/PMSI-AlignAlytics/dimple/tarball/master" >
2013-09-06 13:59:56 +04:00
Tar Ball
< / a > < br / >
2013-05-21 16:49:16 +04:00
< / p >
< h3 > Resources< / h3 >
< p >
2013-09-06 13:59:56 +04:00
< a href = "/examples_index.html" >
Examples
< / a > < br / >
< a href = "/advanced_examples_index.html" >
Advanced Examples
< / a > < br / >
2014-01-24 14:46:07 +04:00
< a href = "https://github.com/PMSI-AlignAlytics/dimple" >
2013-09-06 13:59:56 +04:00
View On GitHub
< / a > < br / >
2014-01-24 14:46:07 +04:00
< a href = "https://github.com/PMSI-AlignAlytics/dimple/wiki" >
2013-09-06 13:59:56 +04:00
Full API Documentation
< / a > < br / >
2013-05-21 16:49:16 +04:00
< / p >
2013-05-21 16:10:22 +04:00
< / header >
< section >
2013-05-21 18:31:28 +04:00
< h3 > Simply Powerful< / h3 >
2013-05-21 16:49:16 +04:00
< 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 >
2016-03-23 18:34:55 +03:00
< / p >
2013-05-21 16:49:16 +04:00
< h3 > Getting Started< / h3 >
2014-07-04 15:48:53 +04:00
< p >
2013-05-21 16:49:16 +04:00
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 >
2016-03-23 18:34:55 +03:00
< pre > < code > < script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"> < /script> < / code > < / pre >
2013-05-21 16:49:16 +04:00
< 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>
2016-03-23 18:34:55 +03:00
< script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"> < /script>
2013-05-21 16:49:16 +04:00
< /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 >
2014-01-24 14:46:07 +04:00
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 / >
2013-05-21 16:49:16 +04:00
< / p >
2014-01-28 19:51:40 +04:00
< h3 > Author< / h3 >
< p > < a href = "https://twitter.com/jkiernander" class = "user-mention" > John Kiernander< / a > < / p >
< h3 > Contributors< / h3 >
< p >
2016-03-23 18:34:55 +03:00
< 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 >
2015-07-10 19:41:31 +03:00
< 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 >
2014-12-16 05:15:00 +03:00
< 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 >
2014-07-24 13:58:51 +04:00
< a href = "https://github.com/stephen-james" class = "user-mention" > Stephen James< / a > < br >
2014-02-14 14:17:29 +04:00
< a href = "https://github.com/fjsj" class = "user-mention" > Flávio Juvenal< / a > < br >
2014-01-28 19:51:40 +04:00
< a href = "https://github.com/davidzhaozz" class = "user-mention" > David Zhao< / a > < br >
2014-01-28 20:54:51 +04:00
< a href = "https://github.com/hxu" class = "user-mention" > Han Xu< / a > < br >
2014-01-28 19:51:40 +04:00
< a href = "https://github.com/dule" class = "user-mention" > Dan Le< / a > < br >
2014-01-28 20:54:51 +04:00
< a href = "https://github.com/kbuchanan" class = "user-mention" > Keith Buchanan< / a > < br >
2014-01-28 19:51:40 +04:00
< / p >
2014-01-28 20:54:51 +04:00
2013-05-21 16:10:22 +04:00
< / section >
2013-09-06 13:59:56 +04:00
< footer >
< p >
This is an open-source project by < br / >
2014-01-24 14:46:07 +04:00
< a href = "http://www.align-alytics.com" >
2013-09-06 13:59:56 +04:00
PMSI-AlignAlytics< / a >
< / p >
< / footer >
2013-05-21 16:10:22 +04:00
< / div >
2014-01-24 14:46:07 +04:00
< a href = "https://github.com/PMSI-AlignAlytics/dimple/fork" >
2013-09-06 13:18:07 +04:00
< 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 >
2013-05-21 16:49:16 +04:00
< 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) {
2014-07-24 13:58:51 +04:00
$("#examples").append("< a class = \"example\" href = \"/examples_viewer.html?id=" + spec . id + " \ " > < img src = \"/images/" + spec . id + " . jpg \ " > < / a > ");
2013-05-21 16:49:16 +04:00
});
});
< / script >
< script src = "/javascripts/scale.fix.js" > < / script >
2013-05-21 16:10:22 +04:00
< / body >
< / html >