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

Copy across examples

gh-pages
John Kiernander 2013-05-21 13:26:41 +01:00
parent 966b23d81e
commit 3c64bf0418
56 changed files with 3255 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.gitattributes vendored Normal file
View File

@ -0,0 +1,22 @@
# Auto detect text files and perform LF normalization
* text=auto
# Custom for Visual Studio
*.cs diff=csharp
*.sln merge=union
*.csproj merge=union
*.vbproj merge=union
*.fsproj merge=union
*.dbproj merge=union
# Standard to msysgit
*.doc diff=astextplain
*.DOC diff=astextplain
*.docx diff=astextplain
*.DOCX diff=astextplain
*.dot diff=astextplain
*.DOT diff=astextplain
*.pdf diff=astextplain
*.PDF diff=astextplain
*.rtf diff=astextplain
*.RTF diff=astextplain

5
.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
node_modules
.komodotools
*.komodo*
help
image_creator

2240
dist/dimple.v1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
dist/dimple.v1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

79
examples/advanced_lollipop_with_hover.html Normal file
View File

@ -0,0 +1,79 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<style type="text/css">
.hoverBox {
fill: #FFFFE2;
stroke: #808080;
shape-rendering: crispEdges;
}
.hoverText {
font-family: sans-serif;
font-size: 10px;
shape-rendering: crispEdges;
}
</style>
<script type="text/javascript">
var hoverBoxDuration = 200;
var barOpacity = 0.6;
var box = null;
var label = null;
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", "Brand");
var y = myChart.addMeasureAxis("y", "Unit Sales");
var z = myChart.addMeasureAxis("z", "Sales Value");
var s = myChart.addSeries("SKU", dimple.plot.bubble);
s.addEventHandler("mouseover", onHover);
s.addEventHandler("mouseleave", onLeave);
myChart.draw();
s.shapes.attr("opacity", barOpacity);
});
function onHover(e) {
e.selectedShape
.transition()
.duration(hoverBoxDuration)
.attr("opacity", 1);
if (label == null) {
box = svg.append("rect").attr("class", "hoverBox");
label = svg.append("text").attr("class", "hoverText");
}
label.attr("x", parseInt(e.selectedShape.attr("cx")) + 25)
.attr("y", parseInt(e.selectedShape.attr("cy")) + 25)
.attr("opacity", 0)
.text(e.seriesValue);
box.attr("x", parseInt(e.selectedShape.attr("cx")) + 20)
.attr("y", parseInt(e.selectedShape.attr("cy")) + 14)
.attr("opacity", 0)
.attr("width", label.node().getComputedTextLength() + 10)
.attr("height", 15);
label
.transition()
.duration(hoverBoxDuration)
.attr("opacity", 1);
box
.transition()
.duration(hoverBoxDuration)
.attr("opacity", 1);
};
function onLeave(e) {
e.seriesShapes
.transition()
.duration(hoverBoxDuration)
.attr("opacity", barOpacity);
if (label != null) {
label
.transition()
.duration(hoverBoxDuration)
.attr("opacity", 0);
box
.transition()
.duration(hoverBoxDuration)
.attr("opacity", 0);
}
};
</script>
</div>

22
examples/advanced_price_range_lollipop.html Normal file
View File

@ -0,0 +1,22 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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-12");
data = dimple.filterData(data, "Channel", "Hypermarkets");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(40, 30, 420, 320)
var x = myChart.addCategoryAxis("x", "Brand");
var y1 = myChart.addMeasureAxis("y", "Price");
var y2 = myChart.addMeasureAxis("y", "Sales Value");
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
myChart.addSeries("Min", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.min;
myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.avg;
myChart.addSeries("Max", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.max;
myChart.draw();
});
</script>
</div>

35
examples/advanced_random_bubble_animation.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>Random Bubbles</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("body", 1000, 600);
function getData() {
var returnVal = [];
var c = Math.ceil(Math.random() * 12);
for (var i = 1; i <= c; i++) {
returnVal.push({ "SKU":"SKU " + i, "Volume": 5000 - Math.floor(Math.random() * 10000), "Value": 5000 - Math.floor(Math.random() * 10000)});
}
return returnVal;
}
var myChart = new dimple.chart(svg, getData());
myChart.addMeasureAxis("x", "Volume");
myChart.addMeasureAxis("y", "Value");
myChart.addMeasureAxis("z", "Value");
myChart.addSeries("SKU", dimple.plot.bubble);
myChart.draw(1000);
setInterval(function () {
myChart.data = getData();
myChart.draw(1000);
}, 2000);
</script>
</script>
</body>
</html>

37
examples/advanced_random_mekko_animation.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Bed</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("body", 1000, 600);
function getData() {
var returnVal = [];
var bc = Math.ceil(Math.random() * 4);
var c = Math.ceil(Math.random() * 12);
for (var k = 1; k <= bc; k++) {
for (var i = 1; i <= c; i++) {
returnVal.push({ "Brand":"Brand " + k, "SKU":"SKU " + i, "Volume": 5000 - Math.floor(Math.random() * 10000), "Value": 5000 - Math.floor(Math.random() * 10000)});
}
}
return returnVal;
}
var myChart = new dimple.chart(svg, getData());
myChart.addAxis("x", "Brand", "Value").showPercent = true;
myChart.addPctAxis("y", "Value");
myChart.addSeries("SKU", dimple.plot.bar);
myChart.draw();
setInterval(function () {
myChart.data = getData();
myChart.draw(1000);
}, 2000);
</script>
</script>
</body>
</html>

16
examples/areas_horizontal.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 490, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.area);
myChart.draw();
});
</script>
</div>

18
examples/areas_horizontal_grouped.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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)
myChart.addCategoryAxis("x", ["Owner", "Month"]);
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

19
examples/areas_horizontal_grouped_100pct.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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)
myChart.addCategoryAxis("x", ["Owner", "Month"]);
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

19
examples/areas_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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)
myChart.addCategoryAxis("x", ["Owner", "Month"]);
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

17
examples/areas_horizontal_stacked.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 490, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.area);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/areas_horizontal_stacked_100pct.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 490, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addPctAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.area);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/areas_vertical.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
var s = myChart.addSeries(null, dimple.plot.area);
myChart.draw();
});
</script>
</div>

18
examples/areas_vertical_grouped.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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");
myChart.addCategoryAxis("y", ["Owner", "Month"]);
var s = myChart.addSeries("Owner", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

19
examples/areas_vertical_grouped_100pct.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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");
myChart.addCategoryAxis("y", ["Owner", "Month"]);
var s = myChart.addSeries("SKU", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

19
examples/areas_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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");
myChart.addCategoryAxis("y", ["Owner", "Month"]);
var s = myChart.addSeries("SKU", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

17
examples/areas_vertical_stacked.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
myChart.addSeries("Channel", dimple.plot.area);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/areas_vertical_stacked_100pct.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330);
myChart.addPctAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
myChart.addSeries("Channel", dimple.plot.area);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

15
examples/bars_horizontal.html Normal file
View File

@ -0,0 +1,15 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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", "Month");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
});
</script>
</div>

16
examples/bars_horizontal_grouped.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_horizontal_grouped_stacked_100pct.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addPctAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/bars_horizontal_mekko.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 510, 310)
myChart.addPctAxis("x", "Unit Sales");
var y = myChart.addAxis("y", "Channel", "Unit Sales");
y.showPercent = true;
myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(220, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_horizontal_stacked.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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", "Month");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_horizontal_stacked_100pct.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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.addPctAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_matrix.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(100, 50, 410, 310)
myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
myChart.addCategoryAxis("y", "Owner");
myChart.addSeries("Price Tier", dimple.plot.bar);
myChart.addLegend(240, 10, 330, 20, "right");
myChart.draw();
});
</script>
</div>

15
examples/bars_vertical.html Normal file
View File

@ -0,0 +1,15 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
});
</script>
</div>

16
examples/bars_vertical_grouped.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 330)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(65, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 45, 510, 315)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_vertical_grouped_stacked_100pct.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 45, 510, 315)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addPctAxis("y", "Unit Sales");
myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/bars_vertical_mekko.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 510, 310)
var x = myChart.addAxis("x", "Channel", "Unit Sales");
x.showPercent = true;
myChart.addPctAxis("y", "Unit Sales");
myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(240, 10, 330, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_vertical_stacked.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/bars_vertical_stacked_100pct.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addPctAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/bubbles_horizontal_grouped.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("z", "Operating Profit");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

20
examples/bubbles_horizontal_lollipop.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, "Date", [
"01/07/2012", "01/08/2012", "01/09/2012",
"01/10/2012", "01/11/2012", "01/12/2012"]);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
myChart.addMeasureAxis("z", "Operating Profit");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>

19
examples/bubbles_matrix.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(100, 50, 410, 310)
myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
myChart.addCategoryAxis("y", "Owner");
var z = myChart.addMeasureAxis("z", "Distribution");
var s = myChart.addSeries("Price Tier", dimple.plot.bubble);
s.aggregate = dimple.aggregateMethod.max;
z.overrideMax = 200;
myChart.addLegend(240, 10, 330, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/bubbles_scatter.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, "Date", "01/12/2012");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
myChart.addLegend(200, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>

18
examples/bubbles_standard.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, "Date", "01/12/2012");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
myChart.addMeasureAxis("x", "Unit Sales Monthly Change");
myChart.addMeasureAxis("y", "Price Monthly Change");
myChart.addMeasureAxis("z", "Operating Profit");
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
myChart.addLegend(200, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/bubbles_vertical_grouped.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addMeasureAxis("z", "Operating Profit");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(70, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

20
examples/bubbles_vertical_lollipop.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, "Date", [
"01/07/2012", "01/08/2012", "01/09/2012",
"01/10/2012", "01/11/2012", "01/12/2012"]);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addMeasureAxis("z", "Operating Profit");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(140, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/lines_horizontal.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 490, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.line);
myChart.draw();
});
</script>
</div>

17
examples/lines_horizontal_grouped.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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)
myChart.addCategoryAxis("x", ["Owner", "Month"]);
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.line);
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

18
examples/lines_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 420, 330)
myChart.addCategoryAxis("x", ["Owner", "Month"]);
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

17
examples/lines_horizontal_stacked.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 490, 310)
myChart.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.line);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/lines_vertical.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330);
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
var s = myChart.addSeries(null, dimple.plot.line);
myChart.draw();
});
</script>
</div>

17
examples/lines_vertical_grouped.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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");
myChart.addCategoryAxis("y", ["Owner", "Month"]);
var s = myChart.addSeries("Owner", dimple.plot.line);
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

18
examples/lines_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, 400, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", ["Owner", "Month"]);
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

17
examples/lines_vertical_stacked.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", "Month");
myChart.addSeries("Channel", dimple.plot.line);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/scatter_horizontal_grouped.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/scatter_horizontal_lollipop.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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", "Month");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/scatter_matrix.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(100, 50, 410, 310)
myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
myChart.addCategoryAxis("y", "Owner");
myChart.addSeries("Price Tier", dimple.plot.bubble);
myChart.addLegend(240, 10, 330, 20, "right");
myChart.draw();
});
</script>
</div>

17
examples/scatter_standard.html Normal file
View File

@ -0,0 +1,17 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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, "Date", "01/12/2012");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
myChart.addMeasureAxis("x", "Unit Sales");
myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
myChart.addLegend(200, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/scatter_vertical_grouped.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>

16
examples/scatter_vertical_lollipop.html Normal file
View File

@ -0,0 +1,16 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.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.addCategoryAxis("x", "Month");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bubble);
myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>