vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

Version 2.0

gh-pages
johnkiernander 2014-04-28 23:16:59 +01:00
parent b36930f336
commit 6ecc5c9f95
236 changed files with 7057 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
adhoc/adhoc_bar_custom_tooltips.html Normal file
View File

@ -0,0 +1,22 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Brand");
var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
mySeries.getTooltipText = function (e) {
return [
"Hey you hovered over " + e.aggField[0] + "!",
"Each element in the array becomes a new line."
];
};
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

47
adhoc/adhoc_bar_labels.html Normal file
View File

@ -0,0 +1,47 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// This is the simple vertical grouped stacked 100% bar example
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(65, 45, 505, 315)
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
var y = myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.bar);
// Using the afterDraw callback means this code still works with animated
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
// also be used to clear the text from the previous frame)
s.afterDraw = function (shape, data) {
// Get the shape as a d3 selection
var s = d3.select(shape),
rect = {
x: parseFloat(s.attr("x")),
y: parseFloat(s.attr("y")),
width: parseFloat(s.attr("width")),
height: parseFloat(s.attr("height"))
};
// Only label bars where the text can fit
if (rect.height >= 8) {
// Add a text label for the value
svg.append("text")
// Position in the centre of the shape (vertical position is
// manually set due to cross-browser problems with baseline)
.attr("x", rect.x + rect.width / 2)
.attr("y", rect.y + rect.height / 2 + 3.5)
// Centre align
.style("text-anchor", "middle")
.style("font-size", "10px")
.style("font-family", "sans-serif")
// Make it a little transparent to tone down the black
.style("opacity", 0.6)
// Format the number
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
}
};
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw(2000);
});
</script>
</div>

32
adhoc/adhoc_bar_scroll.html Normal file
View File

@ -0,0 +1,32 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// Start off with a couple of rows of data
var data = [
{ "Date": Date.now(), "Value": 2000000 * Math.random() }
];
var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, [].concat(data));
myChart.setBounds(60, 50, 480, 250)
x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
myChart.addMeasureAxis("y", "Value");
myChart.addSeries("Sales", dimple.plot.bar);
myChart.ease = "linear";
window.setInterval(function () {
// Let 60 bars accumulate and then start slicing them off the front
if (data.length > 60) { data = data.slice(1); }
// Keep a day's gap at each end of the axis
x.overrideMin = data[0]["Date"] - 86400000;
x.overrideMax = data[data.length - 1]["Date"] + 86400000;
data.push({
"Date": data[data.length - 1]["Date"] + 86400000,
"Value": 2000000 * Math.random() });
// Update the data, using a clone to maintain order
myChart.data = [].concat(data);
// Draw with an animation. Each bar will take 1 second to draw and a new
// one is added every 500ms so there will be a few animating at once
myChart.draw(1000);
}, 500);
</script>
</div>

20
adhoc/adhoc_bounce_stagger.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 50, 480, 280)
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Owner", dimple.plot.bar);
myChart.setStoryboard("Price Tier");
myChart.ease = "bounce"
myChart.staggerDraw = true;
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw(800);
});
</script>
</div>

22
adhoc/adhoc_composite_axis_category.html Normal file
View File

@ -0,0 +1,22 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 50, 480, 280);
var priceTierAxis = myChart.addCategoryAxis("x", "Price Tier");
var monthAxis = myChart.addCategoryAxis(priceTierAxis, "Month");
monthAxis.addOrderRule("Date");
var packTypeAxis = myChart.addCategoryAxis(priceTierAxis, "Pack Type");
var volumeAxis = myChart.addPctAxis("y", "Unit Sales");
myChart.addSeries("Owner", dimple.plot.bar, [priceTierAxis, volumeAxis]);
myChart.addSeries("Owner", dimple.plot.area, [monthAxis, volumeAxis]);
myChart.addSeries("Owner", dimple.plot.bar, [packTypeAxis, volumeAxis]);
myChart.addLegend(200, 10, 380, 20, "right");
priceTierAxis.title = null;
myChart.draw();
});
</script>
</div>

20
adhoc/adhoc_composite_axis_measure.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 50, 480, 280);
var monthAxis = myChart.addCategoryAxis("x", "Month");
monthAxis.addOrderRule("Date");
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
myChart.addLegend(200, 10, 380, 20, "right");
volumeAxis.title = "£";
myChart.draw();
});
</script>
</div>

19
adhoc/adhoc_dual_axis.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 50, 460, 280);
var monthAxis = myChart.addCategoryAxis("x", "Month");
monthAxis.addOrderRule("Date");
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

72
adhoc_meta.json Normal file
View File

@ -0,0 +1,72 @@
[
{
"id":"adhoc_bar_custom_tooltips",
"title":"Custom Tooltip",
"shortTitle":"Custom Tooltip",
"desc":"Hover over a segment to see a custom tooltip",
"prev":{
"name":"Release Notes",
"url":"https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
},
{
"id":"adhoc_bar_labels",
"title":"Bar Labels",
"shortTitle":"Bar Labels",
"desc":"This shows how the bar labels example can be done with a starting animation",
"prev": {
"name": "Release Notes",
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
},
{
"id": "adhoc_bar_scroll",
"title": "Bar Scroll",
"shortTitle": "Bar Scroll",
"desc": "A linear transition example. Once the chart fills up it will begin to scroll sideways.",
"prev": {
"name": "Release Notes",
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
},
{
"id": "adhoc_bounce_stagger",
"title": "Bounce Stagger",
"shortTitle": "Bounce Stagger",
"desc": "Dimple v2.0 supports far more robust transitions and flexibility, for example this is how to make bouncy bars in a couple of lines of code.",
"prev": {
"name": "Release Notes",
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
},
{
"id": "adhoc_composite_axis_category",
"title": "Composite Categories",
"shortTitle": "Composite Categories",
"desc": "Example of 3 categories plotted on the same x axis",
"prev": {
"name": "Release Notes",
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
},
{
"id": "adhoc_composite_axis_measure",
"title": "Composite Measures",
"shortTitle": "Composite Measures",
"desc": "Example of 2 measures plotted on the same y axis",
"prev": {
"name": "Release Notes",
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
},
{
"id": "adhoc_dual_axis",
"title": "Dual Y Axis",
"shortTitle": "Dual Y Axis",
"desc": "Example of 2 measures plotted on different y axes",
"prev": {
"name": "Release Notes",
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
}
}
]

156
adhoc_viewer.html Normal file
View File

@ -0,0 +1,156 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title id="title"></title>
<script type="application/javascript" src="/lib/d3.v3.min.js"></script>
<script type="application/javascript" src="/dist/dimple.v2.0.0.min.js"></script>
<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">
<script type="application/javascript">
window.opener = null;
</script>
<!--[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="wrapper">
<header>
<h2 id="heading"></h2>
<p>
<span id="desc"></span><br/>
<table style="width:100%">
<tr>
<td style="width:50%" align="left"><a style="text-align:left" id="prev"></a></td>
<td style="width:50%" align="right"><a style="text-align:right" id="next"></a></td>
</tr>
</table>
</p>
<h3>Libraries</h3>
<p>
<a href="/dist/dimple.v2.0.0.js">
Full Javascript Library With Comments
</a><br/>
<a href="/dist/dimple.v2.0.0.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>
<div id="chartBox" style="height:410px" class="chartWindow">
<img src="/images/wait.gif" style="display: table; margin: 0 auto; margin-top: 75px;"></img>
</div>
<pre><code id="codeContainer">
<img src="/images/wait.gif" style="display: table; margin: 0 auto;"></img>
</code></pre>
<div id="disqus_thread"></div>
</section>
<footer>
<p>
This is an open-source project by <br/>
<a href="http://www.align-alytics.com">
PMSI-AlignAlytics</a>
</p>
</footer>
</div>
<script src="/javascripts/scale.fix.js"></script>
<script type="text/javascript">
// Get the query string as an object
function queryStringObj() {
var result = {}, keyValuePairs = location.search.slice(1).split('&');
keyValuePairs.forEach(function(keyValuePair) {
keyValuePair = keyValuePair.split('=');
result[keyValuePair[0]] = keyValuePair[1] || '';
});
return result;
}
// Load the page from the examples.json based on the query string
var id = queryStringObj().id;
// Prompt if no query string is passed. Mainly useful for debugging.
if (id == undefined) { id = window.prompt("Please enter an example id","bars_vertical"); }
$.getJSON("/adhoc_meta.json", function(data) {
data.forEach(function (spec, i) {
if (spec.id == id) {
// Set the text elements
$("#title").text(spec.title);
$("#heading").text(spec.title);
$("#desc").text(spec.desc);
// Set the code display
$.get("adhoc/" + spec.id + ".html", function (page) {
$("#codeContainer").text(
page.slice(page.indexOf("<div"))
.replace("src=\"/dist/dimple.v2.0.0.js\"", "src=\"http://dimplejs.org/dist/dimple.v2.0.0.min.js\"")
.replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
);
$("#chartBox").html(
page.slice(page.indexOf("<div"))
.replace("src=\"/dist/dimple.v2.0.0.js\"", "")
.replace("src=\"/lib/d3.v3.min.js\"", "")
);
});
// adhoc_bouncSet the previous links
if (data[i].prev) {
$("#prev").attr("href",data[i].prev.url);
$("#prev").text("< " + data[i].prev.name);
} else {
$("#prev").remove();
}
// Set the next links
if (data[i].next) {
$("#next").attr("href",data[i].next.url);
$("#next").text(data[i].next.name + " >");
} else {
$("#next").remove();
}
}
});
});
</script>
<script type="text/javascript">
var disqus_shortname = 'dimplejs';
var disqus_identifier = id;
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</body>
</html>

4
advanced_examples_index.html
View File

@ -39,10 +39,10 @@
</table>
<h3>Libraries</h3>
<p>
<a href="/dist/dimple.v1.1.5.js">
<a href="/dist/dimple.v2.0.0.js">
Full Javascript Library With Comments
</a><br/>
<a href="/dist/dimple.v1.1.5.min.js">
<a href="/dist/dimple.v2.0.0.min.js">
Minified Javascript Library
</a><br/>
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">

6
advanced_examples_meta.json
View File

@ -83,12 +83,6 @@
"shortTitle":"Responsive Size",
"desc":"Example of the new responsive sizing functionality, meaning charts no longer have to have a fixed pixel size. Click the button to open a resizeable chart."
},
{
"id":"advanced_christmas_tree",
"title":"Seasons Greetings",
"shortTitle":"Seasons Greetings",
"desc":"While analysing festive cheer we found these surprising results..."
},
{
"id":"advanced_change_bubbles",
"title":"Ghost Bubbles",

10
advanced_examples_viewer.html
View File

@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title id="title"></title>
<script type="application/javascript" src="/lib/d3.v3.min.js"></script>
<script type="application/javascript" src="/dist/dimple.v1.1.5.min.js"></script>
<script type="application/javascript" src="/dist/dimple.v2.0.0.min.js"></script>
<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">
@ -43,10 +43,10 @@
</p>
<h3>Libraries</h3>
<p>
<a href="/dist/dimple.v1.1.5.js">
<a href="/dist/dimple.v2.0.0.js">
Full Javascript Library With Comments
</a><br/>
<a href="/dist/dimple.v1.1.5.min.js">
<a href="/dist/dimple.v2.0.0.min.js">
Minified Javascript Library
</a><br/>
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
@ -115,12 +115,12 @@
$.get("examples/" + spec.id + ".html", function (page) {
$("#codeContainer").text(
page.slice(page.indexOf("<div"))
.replace("src=\"/dist/dimple.v1.1.5.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"")
.replace("src=\"/dist/dimple.v2.0.0.js\"", "src=\"http://dimplejs.org/dist/dimple.v2.0.0.min.js\"")
.replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
);
$("#chartBox").html(
page.slice(page.indexOf("<div"))
.replace("src=\"/dist/dimple.v1.1.5.js\"", "")
.replace("src=\"/dist/dimple.v2.0.0.js\"", "")
.replace("src=\"/lib/d3.v3.min.js\"", "")
);
});

63
data/christmas_data.tsv
View File

@ -1,63 +0,0 @@
Festivity Countdown Tree Tinsel Baubles Cheer Sparkle Magic
-10 09/12/2013 00:00 left trunk none none 0 0 0
10 09/12/2013 00:00 right trunk none none 0 0 0
-10 11/12/2013 02:00 left trunk none none 0 0 0
10 11/12/2013 02:00 right trunk none none 0 0 0
-100 11/12/2013 03:00 left none none 0 0 0
100 11/12/2013 03:00 right none none 0 0 0
-60 13/12/2013 00:00 left none none 0 0 0
60 13/12/2013 00:00 right none none 0 0 0
-90 13/12/2013 03:00 left none none 0 0 0
90 13/12/2013 03:00 right none none 0 0 0
-50 15/12/2013 00:00 left none none 0 0 0
50 15/12/2013 00:00 right none none 0 0 0
-80 15/12/2013 03:00 left none none 0 0 0
80 15/12/2013 03:00 right none none 0 0 0
-40 17/12/2013 00:00 left none none 0 0 0
40 17/12/2013 00:00 right none none 0 0 0
-70 17/12/2013 03:00 left none none 0 0 0
70 17/12/2013 03:00 right none none 0 0 0
-30 19/12/2013 00:00 left none none 0 0 0
30 19/12/2013 00:00 right none none 0 0 0
-60 19/12/2013 03:00 left none none 0 0 0
60 19/12/2013 03:00 right none none 0 0 0
-20 21/12/2013 00:00 left none none 0 0 0
20 21/12/2013 00:00 right none none 0 0 0
-50 21/12/2013 03:00 left none none 0 0 0
50 21/12/2013 03:00 right none none 0 0 0
-10 23/12/2013 00:00 left none none 0 0 0
10 23/12/2013 00:00 right none none 0 0 0
-40 23/12/2013 03:00 left none none 0 0 0
40 23/12/2013 03:00 right none none 0 0 0
0 25/12/2013 00:00 left none none 0 0 0
0 25/12/2013 00:00 right none none 0 0 0
0 24/12/2013 00:00 none tinsel 1 none 55 -50 0
0 25/12/2013 00:00 none tinsel 1 none -65 -100 0
0 24/12/2013 00:00 none tinsel 2 none 45 -5 0
0 25/12/2013 00:00 none tinsel 2 none -60 -50 0
0 24/12/2013 00:00 none tinsel 3 none 38 42 0
0 25/12/2013 00:00 none tinsel 3 none -50 0 0
0 24/12/2013 00:00 none tinsel 4 none 30 90 0
0 25/12/2013 00:00 none tinsel 4 none -45 50 0
0 24/12/2013 00:00 none tinsel 5 none 25 135 0
0 25/12/2013 00:00 none tinsel 5 none -40 100 0
0 18/12/2013 00:00 none none bauble 1 -100 -150 15
0 19/12/2013 00:00 none none bauble 1 75 -50 14
0 20/12/2013 00:00 none none bauble 1 0 0 15
0 21/12/2013 00:00 none none bauble 1 50 50 13
0 22/12/2013 00:00 none none bauble 1 -40 150 15
0 18/12/2013 00:00 none none bauble 2 -100 -150 15
0 19/12/2013 00:00 none none bauble 2 -25 75 14
0 20/12/2013 00:00 none none bauble 2 -70 5 15
0 21/12/2013 00:00 none none bauble 2 40 -50 13
0 22/12/2013 00:00 none none bauble 2 -25 -125 15
0 18/12/2013 00:00 none none bauble 3 40 150 15
0 19/12/2013 00:00 none none bauble 3 5 120 14
0 20/12/2013 00:00 none none bauble 3 20 50 15
0 21/12/2013 00:00 none none bauble 3 -25 -50 13
0 22/12/2013 00:00 none none bauble 3 100 -150 15
0 18/12/2013 00:00 none none bauble 4 40 -100 15
0 19/12/2013 00:00 none none bauble 4 -50 -75 14
0 20/12/2013 00:00 none none bauble 4 40 -10 15
0 21/12/2013 00:00 none none bauble 4 -10 45 13
0 22/12/2013 00:00 none none bauble 4 0 175 15
1 Festivity Countdown Tree Tinsel Baubles Cheer Sparkle Magic
2 -10 09/12/2013 00:00 left trunk none none 0 0 0
3 10 09/12/2013 00:00 right trunk none none 0 0 0
4 -10 11/12/2013 02:00 left trunk none none 0 0 0
5 10 11/12/2013 02:00 right trunk none none 0 0 0
6 -100 11/12/2013 03:00 left none none 0 0 0
7 100 11/12/2013 03:00 right none none 0 0 0
8 -60 13/12/2013 00:00 left none none 0 0 0
9 60 13/12/2013 00:00 right none none 0 0 0
10 -90 13/12/2013 03:00 left none none 0 0 0
11 90 13/12/2013 03:00 right none none 0 0 0
12 -50 15/12/2013 00:00 left none none 0 0 0
13 50 15/12/2013 00:00 right none none 0 0 0
14 -80 15/12/2013 03:00 left none none 0 0 0
15 80 15/12/2013 03:00 right none none 0 0 0
16 -40 17/12/2013 00:00 left none none 0 0 0
17 40 17/12/2013 00:00 right none none 0 0 0
18 -70 17/12/2013 03:00 left none none 0 0 0
19 70 17/12/2013 03:00 right none none 0 0 0
20 -30 19/12/2013 00:00 left none none 0 0 0
21 30 19/12/2013 00:00 right none none 0 0 0
22 -60 19/12/2013 03:00 left none none 0 0 0
23 60 19/12/2013 03:00 right none none 0 0 0
24 -20 21/12/2013 00:00 left none none 0 0 0
25 20 21/12/2013 00:00 right none none 0 0 0
26 -50 21/12/2013 03:00 left none none 0 0 0
27 50 21/12/2013 03:00 right none none 0 0 0
28 -10 23/12/2013 00:00 left none none 0 0 0
29 10 23/12/2013 00:00 right none none 0 0 0
30 -40 23/12/2013 03:00 left none none 0 0 0
31 40 23/12/2013 03:00 right none none 0 0 0
32 0 25/12/2013 00:00 left none none 0 0 0
33 0 25/12/2013 00:00 right none none 0 0 0
34 0 24/12/2013 00:00 none tinsel 1 none 55 -50 0
35 0 25/12/2013 00:00 none tinsel 1 none -65 -100 0
36 0 24/12/2013 00:00 none tinsel 2 none 45 -5 0
37 0 25/12/2013 00:00 none tinsel 2 none -60 -50 0
38 0 24/12/2013 00:00 none tinsel 3 none 38 42 0
39 0 25/12/2013 00:00 none tinsel 3 none -50 0 0
40 0 24/12/2013 00:00 none tinsel 4 none 30 90 0
41 0 25/12/2013 00:00 none tinsel 4 none -45 50 0
42 0 24/12/2013 00:00 none tinsel 5 none 25 135 0
43 0 25/12/2013 00:00 none tinsel 5 none -40 100 0
44 0 18/12/2013 00:00 none none bauble 1 -100 -150 15
45 0 19/12/2013 00:00 none none bauble 1 75 -50 14
46 0 20/12/2013 00:00 none none bauble 1 0 0 15
47 0 21/12/2013 00:00 none none bauble 1 50 50 13
48 0 22/12/2013 00:00 none none bauble 1 -40 150 15
49 0 18/12/2013 00:00 none none bauble 2 -100 -150 15
50 0 19/12/2013 00:00 none none bauble 2 -25 75 14
51 0 20/12/2013 00:00 none none bauble 2 -70 5 15
52 0 21/12/2013 00:00 none none bauble 2 40 -50 13
53 0 22/12/2013 00:00 none none bauble 2 -25 -125 15
54 0 18/12/2013 00:00 none none bauble 3 40 150 15
55 0 19/12/2013 00:00 none none bauble 3 5 120 14
56 0 20/12/2013 00:00 none none bauble 3 20 50 15
57 0 21/12/2013 00:00 none none bauble 3 -25 -50 13
58 0 22/12/2013 00:00 none none bauble 3 100 -150 15
59 0 18/12/2013 00:00 none none bauble 4 40 -100 15
60 0 19/12/2013 00:00 none none bauble 4 -50 -75 14
61 0 20/12/2013 00:00 none none bauble 4 40 -10 15
62 0 21/12/2013 00:00 none none bauble 4 -10 45 13
63 0 22/12/2013 00:00 none none bauble 4 0 175 15

4876
dist/dimple.v2.0.0.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

3
dist/dimple.v2.0.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

34
examples/advanced_bar_labels.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// This is the simple vertical grouped stacked 100% bar example
var svg = dimple.newSvg("#chartContainer", 590, 400);
@ -13,24 +13,26 @@
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
var y = myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
// After drawing we can access the shapes and their associated data
// to add labels.
s.shapes.each(function(d) {
// Using the afterDraw callback means this code still works with animated
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
// also be used to clear the text from the previous frame)
s.afterDraw = function (shape, data) {
// Get the shape as a d3 selection
var shape = d3.select(this),
// Get the height and width from the scales
height = myChart.y + myChart.height - y._scale(d.height);
width = x._scale(d.width);
var s = d3.select(shape),
rect = {
x: parseFloat(s.attr("x")),
y: parseFloat(s.attr("y")),
width: parseFloat(s.attr("width")),
height: parseFloat(s.attr("height"))
};
// Only label bars where the text can fit
if (height >= 8) {
if (rect.height >= 8) {
// Add a text label for the value
svg.append("text")
// Position in the centre of the shape (vertical position is
// manually set due to cross-browser problems with baseline)
.attr("x", parseFloat(shape.attr("x")) + width / 2)
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
.attr("x", rect.x + rect.width / 2)
.attr("y", rect.y + rect.height / 2 + 3.5)
// Centre align
.style("text-anchor", "middle")
.style("font-size", "10px")
@ -38,9 +40,11 @@
// Make it a little transparent to tone down the black
.style("opacity", 0.6)
// Format the number
.text(d3.format(",.1f")(d.yValue / 1000) + "k");
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
}
});
};
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

44
examples/advanced_bullet.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// Create the svg and set the dimensions
@ -13,7 +13,7 @@
// Add a bullet chart to the svg
function addBullet(x, y, height, width, measure, lowMark,
highMark, axisMax, compareField, keyVal,
highMark, compareField, keyVal,
compareVal, color) {
// This is a custom algorithm to lighten the passed color, I find I can't
@ -62,22 +62,12 @@
var bX = bullet.addMeasureAxis("x", "Value");
// Add a separate x axis for each measure, this is required
// where we want to do a series for each measure
var lX = bullet.addMeasureAxis("x", "Low Value");
var hX = bullet.addMeasureAxis("x", "High Value");
var cX = bullet.addMeasureAxis("x", "Compare Value");
// Fix all max values so that a single x axis will read correctly
// for all 4. Without this all axes would scale differently
bX.overrideMax = axisMax;
lX.overrideMax = axisMax;
hX.overrideMax = axisMax;
cX.overrideMax = axisMax;
// Hide the additional axes
lX.hidden = true;
hX.hidden = true;
cX.hidden = true;
// where we want to do a series for each measure. By passing
// another axis in place of the position we combine them to create
// a 4 measure composite.
var lX = bullet.addMeasureAxis(bX, "Low Value");
var hX = bullet.addMeasureAxis(bX, "High Value");
var cX = bullet.addMeasureAxis(bX, "Compare Value");
// Add a series for the marks first (the order defines)
// document z position - first at back, last on top
@ -88,7 +78,11 @@
// Add the main series - keyVal is for color and tooltip
var b = bullet.addSeries(keyVal, dimple.plot.bar, [bY, bX]);
// Add the comparison series - compareVal is for color and tooltip
var m = bullet.addSeries(compareVal, dimple.plot.bubble, [bY, cX]);
var m = bullet.addSeries(compareVal, dimple.plot.bar, [bY, cX]);
// Configure the markers as floating bars
m.stacked = false;
cX.floatingBarWidth = 2;
// Set the gaps for the bar series with a narrow main series and full
// width for the markers
@ -119,17 +113,17 @@
// means to determine axis bounds would be better but I don't want to
// bloat this example.
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
3000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
"Owner", "Aperture", "Black Mesa", "#FB8072");
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
"Owner", "Aperture", "Black Mesa", "#FB8072");
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
});
</script>

6
examples/advanced_change_bubbles.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
@ -73,8 +73,8 @@
// Reduce all opacity and remove once opacity drops below 5%
d3.selectAll(".historic")
.each(function () {
var shape = d3.select(this);
var opacity = shape.style("opacity") - 0.02;
var shape = d3.select(this),
opacity = shape.style("opacity") - 0.02;
if (opacity < 0.1) {
shape.remove();
} else {

74
examples/advanced_christmas_tree.html
View File

@ -1,74 +0,0 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
// Unlike other dimple charts this relies on some special Christmas
// data collated from Santa's Naughty:Nice data store
d3.tsv("/data/christmas_data.tsv", function (data) {
// Create the chart as usual
var chart = new dimple.chart(svg, data);
chart.setMargins(80, 50, 60, 40);
// Add a measure axis on x for Festivity
var festivity = chart.addMeasureAxis("x", "Festivity");
festivity.overrideMin = -200;
festivity.overrideMax = 200;
// Add a secondary x axis for Good Cheer
var cheer = chart.addMeasureAxis("x", "Cheer");
cheer.overrideMin = -200;
cheer.overrideMax = 200;
// We need to view these metrics against the Countdown to Christmas,
// this is visualised with the dimple time axis
var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
// Add a final Y axis for sparkle
var sparkle = chart.addMeasureAxis("y", "Sparkle");
sparkle.overrideMin = -200;
sparkle.overrideMax = 200;
// Bauble size will be based on Magic (everyone knows that)
var magic = chart.addMeasureAxis("z", "Magic");
magic.overrideMax = 100;
// Add the three series for this visualisation
// First, a vertical area chart plotting festivity through December
// (I knew I'd find an application for that chart type eventually!)
chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
// Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
tinsel.lineWeight = 5;
// Add a bubble chart showing how Cheer and Sparkle are affected by Magic
chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
// Map colors to different series values
chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
chart.assignColor("left", "Green", "DarkGreen");
chart.assignColor("right", "Green", "DarkGreen");
chart.assignColor("left trunk", "Sienna", "SaddleBrown");
chart.assignColor("right trunk", "Sienna", "SaddleBrown");
chart.assignColor("tinsel 1", "Gold", "Gold", 1);
chart.assignColor("tinsel 2", "Red", "Red", 1);
chart.assignColor("tinsel 3", "Gold", "Gold", 1);
chart.assignColor("tinsel 4", "Red", "Red", 1);
chart.assignColor("tinsel 5", "Gold", "Gold", 1);
chart.assignColor("bauble 1", "Gold", "Gold", 1);
chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
chart.assignColor("bauble 3", "Red", "Crimson", 1);
chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
// Sprinkle the magic dust
chart.draw();
});
</script>
</div>

2
examples/advanced_dynamic_line_color.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/advanced_grouped_mekko.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/advanced_interactive_legends.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/advanced_lollipop_with_hover.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);

4
examples/advanced_matrix.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// Create the svg and set the dimensions
@ -74,7 +74,7 @@
// Position the chart inside the shape
subChart.setBounds(
parseFloat(shape.attr("x")),
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
parseFloat(shape.attr("y")),
parseFloat(shape.attr("width")),
parseFloat(shape.attr("height")));

2
examples/advanced_pong.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [

2
examples/advanced_price_range_lollipop.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

11
examples/advanced_responsive_sizing.html
View File

@ -3,11 +3,11 @@
<!----------------------------------------------------------------->
<div id="chartContainer" style="height: 100%">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// In version 1.1.0 it's possible to initialise any size parameter with a
// % value as well as pixels
var svg = dimple.newSvg("#chartContainer", "100%", "98%");
var svg = dimple.newSvg("#chartContainer", "100%", "100%");
// Decide whether to draw the button or the graph
if (window.opener !== null && window.opener !== undefined) {
@ -17,14 +17,15 @@
d3.tsv("/data/example_data.tsv", function (data) {
myChart = new dimple.chart(svg, data);
// Use the new set margins method to set partially fixed and
// partially proportional to the svg
myChart.setMargins("10%", "30px", "40px", "15%");
// Fix the margins
myChart.setMargins("60px", "30px", "110px", "70px");
// Continue to set up a standard chart
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
// Set the legend using negative values to set the co-ordinate from the right
myChart.addLegend("-100px", "30px", "100px", "-70px");
myChart.draw();
});
// Add a method to draw the chart on resize of the window

2
examples/advanced_storyboard_control.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/advanced_time_axis.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);

2
examples/advanced_trellis_bar.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

4
examples/advanced_waterfall.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
// This code should support any data in this structure changing the data here
@ -109,7 +109,7 @@
});
// Remove the padding elements entirely
svg.selectAll(".pad").remove();
svg.selectAll(".dimple-pad").remove();
// Change the measure name and the category names for the tooltips
s.y.measure = yLabel;

22
examples/area_steps_horizontal.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.draw();
});
</script>
</div>

23
examples/area_steps_horizontal_grouped.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

24
examples/area_steps_horizontal_grouped_100pct.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, 340, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

24
examples/area_steps_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 350, 330)
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_horizontal_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_horizontal_stacked_100pct.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(65, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

22
examples/area_steps_vertical.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.draw();
});
</script>
</div>

23
examples/area_steps_vertical_grouped.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 470, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

24
examples/area_steps_vertical_grouped_100pct.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 320, 330);
myChart.addPctAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

24
examples/area_steps_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 320, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_vertical_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_vertical_stacked_100pct.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330);
myChart.addPctAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

22
examples/areas_curvy.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

21
examples/areas_dual_measure.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(50, 40, 500, 310)
var x = myChart.addMeasureAxis("x", "Distribution");
var y = myChart.addMeasureAxis("y", "Price");
var s = myChart.addSeries(["SKU", "Price Tier"], dimple.plot.area);
s.aggregate = dimple.aggregateMethod.avg;
s.lineMarkers = true;
myChart.addLegend(30, 10, 500, 35, "right");
myChart.draw();
});
</script>
</div>

2
examples/areas_horizontal.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_horizontal_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_horizontal_grouped_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_horizontal_grouped_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

4
examples/areas_horizontal_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
@ -13,7 +13,7 @@
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.area);
var s = myChart.addSeries("Channel", dimple.plot.area);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});

2
examples/areas_horizontal_stacked_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_vertical.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_vertical_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_vertical_grouped_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_vertical_grouped_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_vertical_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/areas_vertical_stacked_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

21
examples/bars_dual_measure_floating.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Month", "Dec-11");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
myChart.addMeasureAxis("x", "Price Monthly Change");
myChart.addMeasureAxis("y", "Distribution Monthly Change");
var s = myChart.addSeries(["SKU", "Channel"], dimple.plot.bar);
s.stacked = false;
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

2
examples/bars_horizontal.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

21
examples/bars_horizontal_floating.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 480, 315);
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.bar);
s.stacked = false;
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

2
examples/bars_horizontal_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_horizontal_grouped_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_horizontal_grouped_stacked_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_horizontal_mekko.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_horizontal_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_horizontal_stacked_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_matrix.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_vertical.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

21
examples/bars_vertical_floating.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.bar);
s.stacked = false;
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

2
examples/bars_vertical_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_vertical_grouped_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_vertical_grouped_stacked_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_vertical_mekko.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_vertical_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bars_vertical_stacked_100pct.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bubbles_horizontal_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bubbles_horizontal_lollipop.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bubbles_matrix.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bubbles_standard.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bubbles_vertical_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/bubbles_vertical_lollipop.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

22
examples/lines_curvy.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

23
examples/lines_dual_measure.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(50, 55, 500, 310)
var x = myChart.addMeasureAxis("x", "Distribution");
x.overrideMin = 20;
var y = myChart.addMeasureAxis("y", "Price");
y.overrideMin = 50
var s = myChart.addSeries(["Month", "Owner"], dimple.plot.line);
s.addOrderRule("Date");
s.aggregate = dimple.aggregateMethod.avg;
myChart.addLegend(130, 10, 400, 35, "right");
myChart.draw();
});
</script>
</div>

2
examples/lines_horizontal.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_horizontal_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_horizontal_grouped_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_horizontal_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_vertical.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_vertical_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_vertical_grouped_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/lines_vertical_stacked.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/scatter_horizontal_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/scatter_horizontal_lollipop.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/scatter_matrix.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/scatter_standard.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/scatter_vertical_grouped.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

2
examples/scatter_vertical_lollipop.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

21
examples/steps_horizontal.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.line);
s.interpolation = "step";
myChart.draw();
});
</script>
</div>

22
examples/steps_horizontal_grouped.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

23
examples/steps_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v2.0.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 430, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

Some files were not shown because too many files have changed in this diff Show More