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

New Examples

master
johnkiernander 2014-04-27 09:57:26 +01:00
parent 15710109d9
commit 64e8302f24
21 changed files with 253 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/dimple.v1.2.0.js vendored
View File

@ -3453,8 +3453,7 @@ var dimple = {
return d3.svg.line()
.x(function (d) { return (series.x._hasCategories() || !originProperty ? d.x : series.x[originProperty]); })
.y(function (d) { return (series.y._hasCategories() || !originProperty ? d.y : series.y[originProperty]); })
.interpolate(inter)
.tension(series.interpolationTe);
.interpolate(inter);
};
// Handle the special interpolation handling for step

2
dist/dimple.v1.2.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
examples/animate_bounce_stagger.html → examples/advanced_bounce_stagger.html
View File

@ -13,12 +13,9 @@
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Owner", dimple.plot.bar);
// Set the ease to bounce and stagger drawing so that
// each bar is offset from the bar before
myChart.setStoryboard("Price Tier");
myChart.ease = "bounce"
myChart.staggerDraw = true;
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw(800);
});

7
examples/animate_elastic_bubbles.html → examples/advanced_elastic_bubbles.html
View File

@ -9,15 +9,14 @@
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 80, 480, 260)
myChart.addMeasureAxis("x", "Price");
myChart.addMeasureAxis("y", "Distribution");
myChart.addMeasureAxis("x", "Price Monthly Change");
myChart.addMeasureAxis("y", "Distribution Monthly Change");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.area);
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.setStoryboard("Date");
myChart.ease = "elastic";
myChart.draw(1000);
myChart.draw(2000);
myChart.legends = [];
});
</script>

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.v1.2.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.v1.2.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_stacked.html
View File

@ -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();
});

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.v1.2.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>

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.v1.2.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>

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.v1.2.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>

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.v1.2.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>

1
examples/templates/animate_bounce_stagger.html → examples/templates/advanced_bounce_stagger.html
View File

@ -10,6 +10,7 @@
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");

6
examples/templates/animate_elastic_bubbles.html → examples/templates/advanced_elastic_bubbles.html
View File

@ -6,14 +6,14 @@
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 80, 480, 260)
myChart.addMeasureAxis("x", "Price");
myChart.addMeasureAxis("y", "Distribution");
myChart.addMeasureAxis("x", "Price Monthly Change");
myChart.addMeasureAxis("y", "Distribution Monthly Change");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.setStoryboard("Date");
myChart.ease = "elastic";
myChart.draw(1000);
myChart.draw(2000);
myChart.legends = [];
});
</script>

19
examples/templates/areas_curvy.html Normal file
View File

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.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>

18
examples/templates/areas_dual_measure.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.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/templates/areas_horizontal_stacked.html
View File

@ -10,7 +10,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();
});

18
examples/templates/bars_dual_measure_floating.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.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>

18
examples/templates/bars_horizontal_floating.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.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>

18
examples/templates/bars_vertical_floating.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.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>

20
examples/templates/lines_dual_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.{version}.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>

3
tmp/dimple.js
View File

@ -3453,8 +3453,7 @@ var dimple = {
return d3.svg.line()
.x(function (d) { return (series.x._hasCategories() || !originProperty ? d.x : series.x[originProperty]); })
.y(function (d) { return (series.y._hasCategories() || !originProperty ? d.y : series.y[originProperty]); })
.interpolate(inter)
.tension(series.interpolationTe);
.interpolate(inter);
};
// Handle the special interpolation handling for step