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 >
2013-09-06 13:18:07 +04:00
< script type = "text/javascript" >
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-41100937-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< / script >
2013-09-06 13:59:56 +04:00
< script type = "text/javascript" >
function trackOutboundLink(link, category, action) {
try {
_gaq.push(['_trackEvent', category , action]);
} catch(err){}
setTimeout(function() {
document.location.href = link.href;
}, 100);
}
< / 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 >
< h3 > Libraries< / h3 >
< p >
2013-11-09 03:10:55 +04:00
< a href = "/dist/dimple.v1.1.2.js"
2013-09-06 13:59:56 +04:00
onClick="trackOutboundLink(this, 'Libraries', 'Full Javascript')">
Full Javascript Library With Comments
< / a > < br / >
2013-11-09 03:10:55 +04:00
< a href = "/dist/dimple.v1.1.2.min.js"
2013-09-06 13:59:56 +04:00
onClick="trackOutboundLink(this, 'Libraries', 'Minified Javascript')">
Minified Javascript Library
< / a > < br / >
< a href = "https://github.com/PMSI-AlignAlytics/dimple/zipball/master"
onClick="trackOutboundLink(this, 'Libraries', 'Zip Ball')">
Zip File
< / a > < br / >
< a href = "https://github.com/PMSI-AlignAlytics/dimple/tarball/master"
onClick="trackOutboundLink(this, 'Libraries', 'Tar Ball')">
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 / >
< a href = "https://github.com/PMSI-AlignAlytics/dimple"
onClick="trackOutboundLink(this, 'GitHub', 'Repository')">
View On GitHub
< / a > < br / >
< a href = "https://github.com/PMSI-AlignAlytics/dimple/wiki"
onClick="trackOutboundLink(this, 'GitHub', 'Wiki')">
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 >
< / 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 >
2013-11-09 03:10:55 +04:00
< pre > < code > < script src="http://dimplejs.org/dist/dimple.v1.1.2.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>
2013-11-09 03:10:55 +04:00
< script src="http://dimplejs.org/dist/dimple.v1.1.2.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 >
2013-09-06 13:59:56 +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" onClick = "trackOutboundLink(this, 'GitHub', 'Wiki')" > Full API Documentation< / a > < br / >
2013-05-21 16:49:16 +04:00
< / p >
< h3 > Authors and Contributors< / h3 >
2013-09-06 13:59:56 +04:00
< p > John Kiernander (< a href = "https://twitter.com/jkiernander" onClick = "trackOutboundLink(this, 'Twitter', '@jkiernander')" class = "user-mention" > @jkiernander< / a > )< / p >
2013-05-21 16:49:16 +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 / >
< a href = "http://www.pmsi-consulting.com"
onClick="trackOutboundLink(this, 'Outbound', 'PMSI')">
PMSI-AlignAlytics< / a >
< / p >
< / footer >
2013-05-21 16:10:22 +04:00
< / div >
2013-09-06 13:59:56 +04:00
< a href = "https://github.com/PMSI-AlignAlytics/dimple/fork" onClick = "trackOutboundLink(this, 'GitHub', '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) {
$("#examples").append("< a class = \"example\" href = \"/examples_viewer.html?id=" + spec . id + " \ " > < img src = \"/images/" + spec . id + " . png \ " > < / a > ");
});
});
< / script >
< script src = "/javascripts/scale.fix.js" > < / script >
2013-05-21 16:10:22 +04:00
< / body >
< / html >
