Skip to content

Commit 86efa63

Browse files
johnkiernanderjohnkiernander
committed
New Examples
1 parent 3f6ec49 commit 86efa63

12 files changed

Lines changed: 157 additions & 87 deletions

‎adhoc/adhoc_bar_custom_tooltips.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
4+
<script type="text/javascript">
5+
var svg = dimple.newSvg("#chartContainer", 590, 400);
6+
d3.tsv("/data/example_data.tsv", function (data) {
7+
var myChart = new dimple.chart(svg, data);
8+
myChart.setBounds(75, 30, 480, 330)
9+
myChart.addMeasureAxis("x", "Unit Sales");
10+
myChart.addCategoryAxis("y", "Brand");
11+
var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
12+
mySeries.getTooltipText = function (e) {
13+
return [
14+
"Hey you hovered over " + e.aggField[0] + "!",
15+
"Each element in the array becomes a new line."
16+
];
17+
};
18+
myChart.addLegend(60, 10, 510, 20, "right");
19+
myChart.draw();
20+
});
21+
</script>
22+
</div>

‎adhoc/adhoc_bar_labels.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
4+
<script type="text/javascript">
5+
// This is the simple vertical grouped stacked 100% bar example
6+
var svg = dimple.newSvg("#chartContainer", 590, 400);
7+
d3.tsv("/data/example_data.tsv", function (data) {
8+
var myChart = new dimple.chart(svg, data);
9+
myChart.setBounds(65, 45, 505, 315)
10+
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
11+
var y = myChart.addPctAxis("y", "Unit Sales");
12+
var s = myChart.addSeries("Owner", dimple.plot.bar);
13+
// Using the afterDraw callback means this code still works with animated
14+
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
15+
// also be used to clear the text from the previous frame)
16+
s.afterDraw = function (shape, data) {
17+
// Get the shape as a d3 selection
18+
var s = d3.select(shape),
19+
rect = {
20+
x: parseFloat(s.attr("x")),
21+
y: parseFloat(s.attr("y")),
22+
width: parseFloat(s.attr("width")),
23+
height: parseFloat(s.attr("height"))
24+
};
25+
// Only label bars where the text can fit
26+
if (rect.height >= 8) {
27+
// Add a text label for the value
28+
svg.append("text")
29+
// Position in the centre of the shape (vertical position is
30+
// manually set due to cross-browser problems with baseline)
31+
.attr("x", rect.x + rect.width / 2)
32+
.attr("y", rect.y + rect.height / 2 + 3.5)
33+
// Centre align
34+
.style("text-anchor", "middle")
35+
.style("font-size", "10px")
36+
.style("font-family", "sans-serif")
37+
// Make it a little transparent to tone down the black
38+
.style("opacity", 0.6)
39+
// Format the number
40+
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
41+
}
42+
};
43+
myChart.addLegend(200, 10, 380, 20, "right");
44+
myChart.draw(2000);
45+
});
46+
</script>
47+
</div>

examples/templates/advanced_bar_scroll.html renamed to adhoc/adhoc_bar_scroll.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div id="chartContainer">
22
<script src="/lib/d3.v3.min.js"></script>
3-
<script src="/dist/dimple.{version}.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
44
<script type="text/javascript">
55
// Start off with a couple of rows of data
66
var data = [

examples/templates/advanced_bounce_stagger.html renamed to adhoc/adhoc_bounce_stagger.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div id="chartContainer">
22
<script src="/lib/d3.v3.min.js"></script>
3-
<script src="/dist/dimple.{version}.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
44
<script type="text/javascript">
55
var svg = dimple.newSvg("#chartContainer", 590, 400);
66
d3.tsv("/data/example_data.tsv", function (data) {

‎adhoc/adhoc_composite_axis_category.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
4+
<script type="text/javascript">
5+
var svg = dimple.newSvg("#chartContainer", 590, 400);
6+
d3.tsv("/data/example_data.tsv", function (data) {
7+
var myChart = new dimple.chart(svg, data);
8+
myChart.setBounds(60, 50, 480, 280);
9+
var priceTierAxis = myChart.addCategoryAxis("x", "Price Tier");
10+
var monthAxis = myChart.addCategoryAxis(priceTierAxis, "Month");
11+
monthAxis.addOrderRule("Date");
12+
var packTypeAxis = myChart.addCategoryAxis(priceTierAxis, "Pack Type");
13+
var volumeAxis = myChart.addPctAxis("y", "Unit Sales");
14+
myChart.addSeries("Owner", dimple.plot.bar, [priceTierAxis, volumeAxis]);
15+
myChart.addSeries("Owner", dimple.plot.area, [monthAxis, volumeAxis]);
16+
myChart.addSeries("Owner", dimple.plot.bar, [packTypeAxis, volumeAxis]);
17+
myChart.addLegend(200, 10, 380, 20, "right");
18+
priceTierAxis.title = null;
19+
myChart.draw();
20+
});
21+
</script>
22+
</div>

‎adhoc/adhoc_composite_axis_measure.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
4+
<script type="text/javascript">
5+
var svg = dimple.newSvg("#chartContainer", 590, 400);
6+
d3.tsv("/data/example_data.tsv", function (data) {
7+
var myChart = new dimple.chart(svg, data);
8+
myChart.setBounds(60, 50, 480, 280);
9+
var monthAxis = myChart.addCategoryAxis("x", "Month");
10+
monthAxis.addOrderRule("Date");
11+
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
12+
var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
13+
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
14+
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
15+
myChart.addLegend(200, 10, 380, 20, "right");
16+
volumeAxis.title = "£";
17+
myChart.draw();
18+
});
19+
</script>
20+
</div>

‎adhoc/adhoc_dual_axis.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div id="chartContainer">
2+
<script src="/lib/d3.v3.min.js"></script>
3+
<script src="/dist/dimple.v2.0.0.js"></script>
4+
<script type="text/javascript">
5+
var svg = dimple.newSvg("#chartContainer", 590, 400);
6+
d3.tsv("/data/example_data.tsv", function (data) {
7+
var myChart = new dimple.chart(svg, data);
8+
myChart.setBounds(60, 50, 460, 280);
9+
var monthAxis = myChart.addCategoryAxis("x", "Month");
10+
monthAxis.addOrderRule("Date");
11+
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
12+
var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
13+
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
14+
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
15+
myChart.addLegend(200, 10, 380, 20, "right");
16+
myChart.draw();
17+
});
18+
</script>
19+
</div>

‎examples/advanced_bar_scroll.html‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎examples/advanced_elastic_bubbles.html‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

examples/advanced_bounce_stagger.html renamed to examples/lines_curvy.html

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,16 @@
77
<script type="text/javascript">
88
var svg = dimple.newSvg("#chartContainer", 590, 400);
99
d3.tsv("/data/example_data.tsv", function (data) {
10+
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
1011
var myChart = new dimple.chart(svg, data);
11-
myChart.setBounds(60, 50, 480, 280)
12+
myChart.setBounds(60, 30, 505, 305);
1213
var x = myChart.addCategoryAxis("x", "Month");
1314
x.addOrderRule("Date");
1415
myChart.addMeasureAxis("y", "Unit Sales");
15-
myChart.addSeries("Owner", dimple.plot.bar);
16-
myChart.setStoryboard("Price Tier");
17-
myChart.ease = "bounce"
18-
myChart.staggerDraw = true;
19-
myChart.addLegend(200, 10, 380, 20, "right");
20-
myChart.draw(800);
16+
var s = myChart.addSeries("Channel", dimple.plot.line);
17+
s.interpolation = "cardinal";
18+
myChart.addLegend(60, 10, 500, 20, "right");
19+
myChart.draw();
2120
});
2221
</script>
2322
</div>

0 commit comments

Comments
 (0)