Copy over from d3Simple

master
John Kiernander 2013-05-21 12:42:17 +01:00
parent 992cb4fd40
commit a88d98e91e
125 changed files with 7278 additions and 17 deletions

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

19
.gitignore vendored
View File

@ -1,14 +1,5 @@
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
npm-debug.log
node_modules
.komodotools
*.komodo*
help
image_creator

53
Gruntfile.js Normal file
View File

@ -0,0 +1,53 @@
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
"src/begin.js",
"src/objects/axis/begin.js",
"src/objects/axis/methods/*.js",
"src/objects/axis/end.js",
"src/objects/chart/begin.js",
"src/objects/chart/methods/*.js",
"src/objects/chart/end.js",
"src/objects/color/begin.js",
"src/objects/color/end.js",
"src/objects/eventArgs/begin.js",
"src/objects/eventArgs/end.js",
"src/objects/legend/begin.js",
"src/objects/legend/methods/*.js",
"src/objects/legend/end.js",
"src/objects/series/begin.js",
"src/objects/series/methods/*.js",
"src/objects/series/end.js",
"src/objects/storyboard/begin.js",
"src/objects/storyboard/methods/*.js",
"src/objects/storyboard/end.js",
"src/objects/aggregateMethod/*.js",
"src/objects/plot/*.js",
"src/methods/*.js",
"src/end.js"
],
dest: 'dist/<%= pkg.name %>.v1.js'
}
},
uglify: {
dist: {
files: {
'dist/<%= pkg.name %>.v1.min.js': ['<%= concat.dist.dest %>']
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['concat', 'uglify']);
};

21
MIT-LICENSE.txt Normal file
View File

@ -0,0 +1,21 @@
Copyright 2013 PMSI-AlignAlytics
www.pmsi-consulting.com
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -1,4 +1,7 @@
dimple
======
### dimple ###
An object-oriented API for business analytics
An object-oriented API allowing you to create flexible axis-based charts using [d3.js](http://d3js.org "d3.js"). The intention of this project is to allow analysts who are not necessarily expert JavaScript programmers to create standard (and some not-so-standard) business analytics.
The API will also expose the core d3 objects where possible so that as users gain confidence they can extend the base functionality in whatever way they wish.
For full details and documentation the wiki is available [here](http://github.com/PMSI-AlignAlytics/dimple/wiki "Wiki").

6
app.js Normal file
View File

@ -0,0 +1,6 @@
var express = require('express');
var app = express();
app.use('/', express.static(__dirname));
app.listen(process.env.PORT || 3000);

1729
data/example_data.tsv Normal file

File diff suppressed because it is too large Load Diff

2240
dist/dimple.v1.js vendored Normal file

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

19
package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "dimple",
"version": "1.0.0",
"private": true,
"licenses": [
{
"type": "MIT",
"url": "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
}
],
"dependencies": {
"express": "3.x",
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib-concat": "~0.2.0",
"grunt-contrib-uglify": "~0.2.0"
}
}

14
src/begin.js Normal file
View File

@ -0,0 +1,14 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/begin.js
// Create the stub object
var dimple = {
version: "1.0.0",
plot: {},
aggregateMethod: {}
};
// Wrap all application code in a self-executing function
(function () {
"use strict";

2
src/end.js Normal file
View File

@ -0,0 +1,2 @@
})();
// End dimple

View File

@ -0,0 +1,46 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/_addGradient.js
var _addGradient = function (seriesValue, id, categoryAxis, data, chart, duration, colorProperty) {
var grad = chart.svg.select("#" + id);
var cats = [];
data.forEach(function (d) {
if (cats.indexOf(d[categoryAxis.categoryFields[0]]) == -1) {
cats.push(d[categoryAxis.categoryFields[0]]);
}
}, this);
var field = categoryAxis.position + "Field";
var transition = true;
if (grad.node() == null) {
transition = false;
grad = chart.svg.append("linearGradient")
.attr("id", id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", (categoryAxis.position == "x" ? categoryAxis._scale(cats[0]) + ((chart.width / cats.length) / 2) : 0))
.attr("y1", (categoryAxis.position == "y" ? categoryAxis._scale(cats[0]) - ((chart.height / cats.length) / 2) : 0))
.attr("x2", (categoryAxis.position == "x" ? categoryAxis._scale(cats[cats.length - 1]) + ((chart.width / cats.length) / 2) : 0))
.attr("y2", (categoryAxis.position == "y" ? categoryAxis._scale(cats[cats.length - 1]) - ((chart.height / cats.length) / 2) : 0));
}
var colors = [];
cats.forEach(function (cat, j) {
var row = {};
for (var k = 0; k < data.length; k++) { if (data[k].aggField == seriesValue && data[k][field] == cat) { row = data[k]; break; } }
colors.push({ offset: Math.round((j / (cats.length - 1)) * 100) + "%", color: row[colorProperty] });
}, this);
if (transition) {
grad.selectAll("stop")
.data(colors)
.transition().duration(duration)
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
}
else {
grad.selectAll("stop")
.data(colors)
.enter()
.append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
}
};

161
src/methods/_helpers.js Normal file
View File

@ -0,0 +1,161 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/_helpers.js
var _helpers = {
// Calculate the centre x position
cx: function (d, chart, series) {
if (series.x.measure != null && series.x.measure != undefined) {
return series.x._scale(d.cx);
}
else if (series.x.categoryFields != null && series.x.categoryFields != undefined && series.x.categoryFields.length >= 2) {
return series.x._scale(d.cx) + _helpers.xGap(d, chart, series) + ((d.xOffset + 0.5) * (((chart.width / series.x._max) - 2 * _helpers.xGap(d, chart, series)) * d.width));
}
else {
return series.x._scale(d.cx) + ((chart.width / series.x._max) / 2);
}
},
// Calculate the centre y position
cy: function (d, chart, series) {
if (series.y.measure != null && series.y.measure != undefined) {
return series.y._scale(d.cy);
}
else if (series.y.categoryFields != null && series.y.categoryFields != undefined && series.y.categoryFields.length >= 2) {
return (series.y._scale(d.cy) - (chart.height / series.y._max)) + _helpers.yGap(d, chart, series) + ((d.yOffset + 0.5) * (((chart.height / series.y._max) - 2 * _helpers.yGap(d, chart, series)) * d.height));
}
else {
return series.y._scale(d.cy) - ((chart.height / series.y._max) / 2);
}
},
// Calculate the radius
r: function (d, chart, series) {
if (series.z == null || series.z == undefined) {
return 5;
}
else if (series.z._hasMeasure()) {
return series.z._scale(d.r);
}
else {
return series.z._scale(chart.height / 100);
}
},
// Calculate the x gap for bar type charts
xGap: function (d, chart, series) {
if ((series.x.measure == null || series.x.measure == undefined) && series.barGap > 0) {
return ((chart.width / series.x._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
}
else {
return 0;
}
},
// Calculate the x gap for clusters within bar type charts
xClusterGap: function (d, chart, series) {
if (series.x.categoryFields != null && series.x.categoryFields != undefined && series.x.categoryFields.length >= 2 && series.clusterBarGap > 0) {
return (d.width * ((chart.width / series.x._max) - (_helpers.xGap(d, chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
}
else {
return 0;
}
},
// Calculate the y gap for bar type charts
yGap: function (d, chart, series) {
if ((series.y.measure == null || series.y.measure == undefined) && series.barGap > 0) {
return ((chart.height / series.y._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
}
else {
return 0;
}
},
// Calculate the y gap for clusters within bar type charts
yClusterGap: function (d, chart, series) {
if (series.y.categoryFields != null && series.y.categoryFields != undefined && series.y.categoryFields.length >= 2 && series.clusterBarGap > 0) {
return (d.height * ((chart.height / series.y._max) - (_helpers.yGap(d, chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
}
else {
return 0;
}
},
// Calculate the top left x position for bar type charts
x: function (d, chart, series) {
return series.x._scale(d.x)
+ _helpers.xGap(d, chart, series)
+ (d.xOffset * (_helpers.width(d, chart, series) + 2 * _helpers.xClusterGap(d, chart, series)))
+ _helpers.xClusterGap(d, chart, series);
},
// Calculate the top left y position for bar type charts
y: function (d, chart, series) {
if (series.y.measure != null && series.y.measure != undefined) {
return series.y._scale(d.y);
}
else {
return (series.y._scale(d.y) - (chart.height / series.y._max))
+ _helpers.yGap(d, chart, series)
+ (d.yOffset * (_helpers.height(d, chart, series) + 2 * _helpers.yClusterGap(d, chart, series)))
+ _helpers.yClusterGap(d, chart, series);
}
},
// Calculate the width for bar type charts
width: function (d, chart, series) {
if (series.x.measure != null && series.x.measure != undefined) {
return Math.abs(series.x._scale(d.width) - series.x._scale(0));
}
else {
return d.width
* ((chart.width / series.x._max) - (_helpers.xGap(d, chart, series) * 2))
- (_helpers.xClusterGap(d, chart, series) * 2);
}
},
// Calculate the height for bar type charts
height: function (d, chart, series) {
if (series.y.measure != null && series.y.measure != undefined) {
return Math.abs(series.y._scale(0) - series.y._scale(d.height));
}
else {
return d.height
* ((chart.height / series.y._max) - (_helpers.yGap(d, chart, series) * 2))
- (_helpers.yClusterGap(d, chart, series) * 2);
}
},
// Calculate the opacity for series
opacity: function (d, chart, series) {
if (series.c != null && series.c != undefined) {
return d.opacity;
}
else {
return chart.getColor(d.aggField.slice(-1)[0]).opacity;
}
},
// Calculate the fill coloring for series
fill: function (d, chart, series) {
if (series.c != null && series.c != undefined) {
return d.fill;
}
else {
return chart.getColor(d.aggField.slice(-1)[0]).fill;
}
},
// Calculate the stroke coloring for series
stroke: function (d, chart, series) {
if (series.c != null && series.c != undefined) {
return d.stroke;
}
else {
return chart.getColor(d.aggField.slice(-1)[0]).stroke;
}
}
};

30
src/methods/filterData.js Normal file
View File

@ -0,0 +1,30 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/filterData.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple#wiki-filterData
dimple.filterData = function (data, field, filterValues) {
if (field != null && filterValues != null) {
// Build an array from a single filter value or use the array
if (filterValues != null && filterValues != undefined) { filterValues = [].concat(filterValues); }
// The data to return
var returnData = [];
// Iterate all the data
data.forEach(function (d, i) {
// If an invalid field is passed, just pass the data
if (d[field] == null) {
returnData.push(d);
}
else {
if (filterValues.indexOf([].concat(d[field]).join("/")) > -1) {
returnData.push(d);
}
}
}, this);
// Return the filtered data
return returnData;
}
else {
return data;
}
};

View File

@ -0,0 +1,24 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/getUniqueValues.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple#wiki-getUniqueValues
dimple.getUniqueValues = function (data, fields) {
var returnlist = [];
// Put single values into single value arrays
if (fields != null && fields != undefined) {
fields = [].concat(fields);
// Iterate every row in the data
data.forEach(function (d, i) {
// Handle multiple category values by iterating the fields in the row and concatonate the values
var field = "";
fields.forEach(function (f, i) {
if (i > 0) { field += "/"; } field += d[f];
}, this);
// If the field was not found, add it to the end of the categories array
if (returnlist.indexOf(field) == -1) {
returnlist.push(field);
}
}, this);
}
return returnlist;
};

9
src/methods/newSvg.js Normal file
View File

@ -0,0 +1,9 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/newSvg.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple#wiki-newSvg
dimple.newSvg = function (parentSelector, width, height) {
if (parent == null) { parent = "body"; }
return d3.select(parentSelector).append("svg").attr("width", width).attr("height", height);
};

View File

@ -0,0 +1,8 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/aggregateMethod/avg.js
dimple.aggregateMethod.avg = function (lhs, lhsCount, rhs, rhsCount) {
lhs = (lhs == null || lhs == undefined ? 0 : lhs);
rhs = (rhs == null || rhs == undefined ? 0 : rhs);
return ((parseFloat(lhs) * parseFloat(lhsCount)) + (parseFloat(rhs) * parseFloat(rhsCount))) / (parseFloat(lhsCount) + parseFloat(rhsCount));
};

View File

@ -0,0 +1,6 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/aggregateMethod/count.js
dimple.aggregateMethod.count = function (lhs, lhsCount, rhs, rhsCount) {
return parseFloat(lhsCount) + parseFloat(rhsCount);
};

View File

@ -0,0 +1,6 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/aggregateMethod/max.js
dimple.aggregateMethod.max = function (lhs, lhsCount, rhs, rhsCount) {
return parseFloat(lhs) > parseFloat(rhs) ? parseFloat(lhs) : parseFloat(rhs);
};

View File

@ -0,0 +1,6 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/aggregateMethod/min.js
dimple.aggregateMethod.min = function (lhs, lhsCount, rhs, rhsCount) {
return (lhs == null ? parseFloat(rhs) : (parseFloat(lhs) < parseFloat(rhs) ? parseFloat(lhs) : parseFloat(rhs)));
};

View File

@ -0,0 +1,8 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/aggregateMethod/sum.js
dimple.aggregateMethod.sum = function (lhs, lhsCount, rhs, rhsCount) {
lhs = (lhs == null || lhs == undefined ? 0 : lhs);
rhs = (rhs == null || rhs == undefined ? 0 : rhs);
return parseFloat(lhs) + parseFloat(rhs);
}

41
src/objects/axis/begin.js Normal file
View File

@ -0,0 +1,41 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/axis/begin.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis
dimple.axis = function (chart, position, categoryFields, measure) {
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-chart
this.chart = chart;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-position
this.position = position;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-categoryFields
this.categoryFields = categoryFields;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-measure
this.measure = measure;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-hidden
this.hidden = false;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-showPercent
this.showPercent = false;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-colors
this.colors = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-overrideMin
this.overrideMin = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-overrideMax
this.overrideMax = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-shapes
this.shapes = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-showGridlines
this.showGridlines = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-gridlineShapes
this.gridlineShapes = null;
// The scale determined by the update method
this._scale = null;
// The minimum and maximum axis values
this._min = 0;
this._max = 0;
// Chart origin before and after an update. This helps
// with transitions
this._previousOrigin = null;
this._origin = null;

3
src/objects/axis/end.js Normal file
View File

@ -0,0 +1,3 @@
};
// End dimple.axis

View File

@ -0,0 +1,5 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/axis/methods/_draw.js
this._draw = null;

View File

@ -0,0 +1,35 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/axis/methods/_getFormat.js
this._getFormat = function () {
var returnFormat,
max,
min,
len,
chunks,
suffix,
dp;
if (this.showPercent) {
returnFormat = d3.format("%");
}
else if (this.measure !== null) {
max = Math.floor(Math.abs(this._max), 0).toString();
min = Math.floor(Math.abs(this._min), 0).toString();
len = Math.max(min.length, max.length);
if (len > 3) {
chunks = Math.min(Math.floor((len - 1) / 3), 4);
suffix = "kmBT".substring(chunks - 1, chunks);
dp = (len - chunks * 3 <= 2 ? 1 : 0);
returnFormat = function (n) { return (n === 0 ? 0 : d3.format(",." + dp + "f")(n / Math.pow(1000, chunks)) + suffix); };
}
else {
dp = (len <= 2 ? 1 : 0);
returnFormat = d3.format(",." + dp + "f");
}
}
else {
returnFormat = function (n) { return n; };
}
return returnFormat;
};

View File

@ -0,0 +1,7 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/axis/methods/_hasCategories.js
this._hasCategories = function () {
return (this.categoryFields != null && this.categoryFields != undefined && this.categoryFields.length > 0);
};

View File

@ -0,0 +1,7 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/axis/methods/_hasMeasure.js
this._hasMeasure = function () {
return (this.measure != null && this.measure != undefined);
};

View File

@ -0,0 +1,97 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/axis/methods/_update.js
this._update = function (refactor) {
// If the axis is a percentage type axis the bounds must be between -1 and 1. Sometimes
// binary rounding means it can fall outside that bound so tidy up here
this._min = (this.showPercent && this._min < -1 ? this._min = -1 : this._min);
this._max = (this.showPercent && this._max > 1 ? this._max = 1 : this._max);
// Override or round the min or max
this._min = (this.overrideMin != null ? this.overrideMin : this._min);
this._max = (this.overrideMax != null ? this.overrideMax : this._max);
// If this is an x axis
if (this.position.length > 0 && this.position[0] == "x") {
if (this.measure == null || this.measure == undefined) {
var distinctCats = [];
this.chart.data.forEach(function (d, i) {
if (distinctCats.indexOf(d[this.categoryFields[0]]) == -1) {
distinctCats.push(d[this.categoryFields[0]]);
}
}, this);
this._scale = d3.scale.ordinal().rangePoints([this.chart.x, this.chart.x + this.chart.width]).domain(distinctCats.concat([""]));
}
else {
this._scale = d3.scale.linear().range([this.chart.x, this.chart.x + this.chart.width]).domain([this._min, this._max]).nice();
}
// If it's visible, orient it at the top or bottom if it's first or second respectively
if (!this.hidden) {
switch (chart._axisIndex(this, "x")) {
case 0: this._draw = d3.svg.axis().orient("bottom").scale(this._scale); break;
case 1: this._draw = d3.svg.axis().orient("top").scale(this._scale); break;
default: break;
}
}
}
// If it's a y axis
else if (this.position.length > 0 && this.position[0] == "y") {
// Set the height both logical and physical of the axis
if (this.measure == null || this.measure == undefined) {
var distinctCats = [];
this.chart.data.forEach(function (d, i) {
if (distinctCats.indexOf(d[this.categoryFields[0]]) == -1) {
distinctCats.push(d[this.categoryFields[0]]);
}
}, this);
this._scale = d3.scale.ordinal().rangePoints([this.chart.y + this.chart.height, this.chart.y]).domain(distinctCats.concat([""]));
}
else {
this._scale = d3.scale.linear().range([this.chart.y + this.chart.height, this.chart.y]).domain([this._min, this._max]).nice();
}
// if it's visible, orient it at the left or right if it's first or second respectively
if (!this.hidden) {
switch (chart._axisIndex(this, "y")) {
case 0: this._draw = d3.svg.axis().orient("left").scale(this._scale); break;
case 1: this._draw = d3.svg.axis().orient("right").scale(this._scale); break;
default: break;
}
}
}
// If it's a z axis just set the logical range
else if (this.position.length > 0 && this.position[0] == "z") {
this._scale = d3.scale.linear().range([this.chart.height / 300, this.chart.height / 10]).domain([this._min, this._max]);
}
// If it's a c axis just set the logical range based on the number of colours. This will be used in the calculation to determin R, G and B values.
// The distance between 2 colours will be different for each part of the color and depending on the color so it needs to be done case by case
else if (this.position.length > 0 && this.position[0] == "c") {
this._scale = d3.scale.linear().range([0, (this.colors == null || this.colors.length == 1 ? 1 : this.colors.length - 1)]).domain([this._min, this._max]);
}
// Check that the axis ends on a labelled tick
if ((refactor == null || refactor == undefined || refactor == false) && this._scale != null && this._scale.ticks != null && this._scale.ticks(10).length > 0) {
// Get the ticks determined based on a split of 10
var ticks = this._scale.ticks(10);
// Get the step between ticks
var step = ticks[1] - ticks[0];
// Get the remainder
var remainder = ((this._max - this._min) % step).toFixed(0);
// If the remainder is not zero
if (remainder != 0) {
// Set the bounds
this._max = Math.ceil(this._max/step) * step
this._min = Math.floor(this._min/step) * step
// Recursively call the method to recalculate the scale. This shouldn't enter this block again.
this._update(true);
}
}
// Populate the origin
var origin = this._scale.copy()(0);
if (this._origin != origin) {
this._previousOrigin = (this._origin == null ? origin : this._origin);
this._origin = origin;
}
// Return axis for chaining
return this;
};

View File

@ -0,0 +1,39 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/begin.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart
dimple.chart = function (svg, data) {
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-svg
this.svg = svg;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-x
this.x = svg[0][0].width.baseVal.value * 0.1;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-y
this.y = svg[0][0].height.baseVal.value * 0.1;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-width
this.width = svg[0][0].width.baseVal.value * 0.8;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-height
this.height = svg[0][0].height.baseVal.value * 0.8;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-data
this.data = data;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-noFormats
this.noFormats = false;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-axes
this.axes = [];
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-series
this.series = [];
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-legends
this.legends = [];
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-storyboard
this.storyboard = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-titleShape
this.titleShape = null;
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-shapes
this.shapes = null;
// Colors assigned to chart contents. E.g. a series value.
this._assignedColors = {};
// The next colour index to use, this value is cycled around for all default colours
this._nextColor = 0;

3
src/objects/chart/end.js Normal file
View File

@ -0,0 +1,3 @@
};
// End dimple.chart

View File

@ -0,0 +1,19 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_axisIndex.js
// Return the ordinal value of the passed axis. If an orientation is passed, return the order for the
// specific orientation, otherwise return the order from all axes. Returns -1 if the passed axis isn't part of the collection
this._axisIndex = function (axis, orientation) {
var i = 0;
var axisCount = 0;
for (i = 0; i < this.axes.length; i++) {
if (this.axes[i] == axis) {
return axisCount;
}
if (orientation == null || orientation == undefined || orientation[0] == this.axes[i].position[0]) {
axisCount++;
}
}
return -1;
};

View File

@ -0,0 +1,243 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_getSeriesData.js
// Create a dataset containing positioning information for every series
this._getSeriesData = function () {
// If there are series
if (this.series !== null && this.series !== undefined) {
// Iterate all the series
this.series.forEach(function (series) {
// The data for this series
var returnData = [];
// Handle multiple category values by iterating the fields in the row and concatonate the values
// This is repeated for each axis using a small anon function
var getField = function (axis, row) {
var returnField = [];
if (axis != null && axis._hasCategories()) {
axis.categoryFields.forEach(function (cat, i) {
returnField.push(row[cat]);
}, this);
}
return returnField;
};
// Catch a non-numeric value and re-calc as count
var useCount = { x: false, y: false, z: false, c: false };
// If the elements are grouped a unique list of secondary category values will be required
var secondaryElements = { x: [], y: [] };
// Iterate every row in the data to calculate the return values
this.data.forEach(function (d, i) {
// Reset the index
var foundIndex = -1;
var xField = getField(series.x, d);
var yField = getField(series.y, d);
var zField = getField(series.z, d);
// Get the aggregate field using the other fields if necessary
var aggField = [];
if (series.categoryFields == null || series.categoryFields == undefined || series.categoryFields.length == 0) {
aggField = ["All"];
}
else if (series.categoryFields.length == 1 && d[series.categoryFields[0]] == undefined) {
aggField = [series.categoryFields[0]];
}
else {
series.categoryFields.forEach(function (cat, j) {
aggField.push(d[cat]);
}, this);
}
// Add a key
var key = aggField.join("/") + "_" + xField.join("/") + "_" + yField.join("/") + "_" + zField.join("/");
// See if this field has already been added.
for (var k = 0; k < returnData.length; k++) {
if (returnData[k].key == key) {
foundIndex = k;
break;
}
}
// If the field was not added, do so here
if (foundIndex == -1) {
var newRow = {
key: key, aggField: aggField,
xField: xField, xValue: null, xCount: 0,
yField: yField, yValue: null, yCount: 0,
zField: zField, zValue: null, zCount: 0,
cValue: 0, cCount: 0,
x: 0, y: 0,
xOffset: 0, yOffset: 0,
width: 0, height: 0,
cx: 0, cy: 0,
xBound: 0, yBound: 0,
xValueList: [], yValueList: [], zValueList: [], cValueList: [],
fill: {}, stroke: {} };
returnData.push(newRow);
foundIndex = returnData.length - 1;
}
// Update the return data for the passed axis
var updateData = function (axis, data, storyboard) {
var passStoryCheck = true;
if (storyboard != null) {
var selectStoryValue = storyboard.getFrameValue();
var compare = "";
storyboard.categoryFields.forEach(function (cat, m) {
if (m > 0) {
compare += "/";
}
compare += d[cat];
passStoryCheck = (compare == selectStoryValue);
}, this);
}
if (axis != null && axis != undefined && axis.measure != null && axis.measure != undefined) {
if (passStoryCheck) {
var retRow = returnData[foundIndex];
// Keep a distinct list of values to calculate a distinct count in the case of a non-numeric value being found
if (retRow[axis.position + "ValueList"].indexOf(d[axis.measure]) == -1) {
retRow[axis.position + "ValueList"].push(d[axis.measure])
}
// The code above is outside this check for non-numeric values because we might encounter one far down the list, and
// want to have a record of all values so far.
if (isNaN(parseFloat(d[axis.measure]))) {
useCount[axis.position] = true;
}
// Set the value using the aggregate function method
retRow[axis.position + "Value"] = series.aggregate(retRow[axis.position + "Value"], retRow[axis.position + "Count"], d[axis.measure], 1);
retRow[axis.position + "Count"]++;
}
}
// Get secondary elements if necessary
if (axis != null && axis != undefined && axis._hasCategories() && axis.categoryFields.length > 1 && secondaryElements[axis.position] != undefined) {
if (secondaryElements[axis.position].indexOf(d[axis.categoryFields[1]]) == -1) {
secondaryElements[axis.position].push(d[axis.categoryFields[1]]);
}
}
};
// Update all the axes
updateData(series.x, this.data, this.storyboard);
updateData(series.y, this.data, this.storyboard);
updateData(series.z, this.data, this.storyboard);
updateData(series.c, this.data, this.storyboard);
}, this);
// Get the x and y totals for percentages. This cannot be done in the loop above as we need the data aggregated before we get an abs total.
// otherwise it will wrongly account for negatives and positives rolled together.
var totals = { x: [], y: [], z: [] };
var colorBounds = { min: null, max: null };
returnData.forEach(function (ret, i) {
if (series.x != null) {
if (useCount.x == true) { ret.xValue = ret.xValueList.length; }
var tot = (totals.x[ret.xField.join("/")] == null ? 0 : totals.x[ret.xField.join("/")]) + (series.y._hasMeasure() ? Math.abs(ret.yValue) : 0);
totals.x[ret.xField.join("/")] = tot;
}
if (series.y != null) {
if (useCount.y == true) { ret.yValue = ret.yValueList.length; }
var tot = (totals.y[ret.yField.join("/")] == null ? 0 : totals.y[ret.yField.join("/")]) + (series.x._hasMeasure() ? Math.abs(ret.xValue) : 0);
totals.y[ret.yField.join("/")] = tot;
}
if (series.z != null) {
if (useCount.z == true) { ret.zValue = ret.zValueList.length; }
var tot = (totals.z[ret.zField.join("/")] == null ? 0 : totals.z[ret.zField.join("/")]) + (series.z._hasMeasure() ? Math.abs(ret.zValue) : 0);
totals.z[ret.zField.join("/")] = tot;
}
if (series.c != null) {
if (colorBounds.min == null || ret.cValue < colorBounds.min) { colorBounds.min = ret.cValue; }
if (colorBounds.max == null || ret.cValue > colorBounds.max) { colorBounds.max = ret.cValue; }
}
}, this);
// Before calculating the positions we need to sort elements
// TODO - Extend this to be user flexible
returnData.sort(function (a, b) {
if (a.aggField != b.aggField) { return (a.aggField.join("/") < b.aggField.join("/") ? -1 : 1); }
else if (a.xField != b.xField) { return (a.xField.join("/") < b.xField.join("/") ? -1 : 1); }
else if (a.yField != b.yField) { return (a.yField.join("/") < b.yField.join("/") ? -1 : 1); }
else if (a.zField != b.zField) { return (a.zField.join("/") < b.zField.join("/") ? -1 : 1); }
else { return 0; }
});
// Set all the dimension properties of the data
var running = { x: [], y: [], z: [] };
var addedCats = [];
var catTotals = {};
var grandTotals = { x: 0, y: 0, z: 0 };
for (var key in totals.x) { if (totals.x.hasOwnProperty(key)) { grandTotals.x += totals.x[key]; } }
for (var key in totals.y) { if (totals.y.hasOwnProperty(key)) { grandTotals.y += totals.y[key]; } }
for (var key in totals.z) { if (totals.z.hasOwnProperty(key)) { grandTotals.z += totals.z[key]; } }
returnData.forEach(function (ret, i) {
var getAxisData = function (axis, opp, size) {
if (axis != null && axis != undefined) {
var pos = axis.position;
if (!axis._hasCategories()) {
var value = (axis.showPercent ? ret[pos + "Value"] / totals[opp][ret[opp + "Field"].join("/")] : ret[pos + "Value"]);
var totalField = ret[opp + "Field"].join("/") + (ret[pos + "Value"] >= 0);
var cumValue = running[pos][totalField] = ((running[pos][totalField] == null || pos == "z") ? 0 : running[pos][totalField]) + value;
var selectValue = ret[pos + "Bound"] = ret["c" + pos] = (((pos == "x" || pos == "y") && series.stacked) ? cumValue : value);
ret[size] = value;
ret[pos] = selectValue - (((pos == "x" && value >= 0) || (pos == "y" && value <= 0)) ? value : 0);
}
else {
if (axis._hasMeasure()) {
var totalField = ret[axis.position + "Field"].join("/");
var value = (axis.showPercent ? totals[axis.position][totalField] / grandTotals[axis.position] : totals[axis.position][totalField]);
if (addedCats.indexOf(totalField) == -1) {
catTotals[totalField] = value + (addedCats.length > 0 ? catTotals[addedCats[addedCats.length - 1]] : 0);
addedCats.push(totalField);
}
var selectValue = ret[pos + "Bound"] = ret["c" + pos] = (((pos == "x" || pos == "y") && series.stacked) ? catTotals[totalField] : value);
ret[size] = value;
ret[pos] = selectValue - (((pos == "x" && value >= 0) || (pos == "y" && value <= 0)) ? value : 0);
}
else {
ret[pos] = ret["c" + pos] = ret[pos + "Field"][0];
ret[size] = 1;
if (secondaryElements[pos] != undefined && secondaryElements[pos] != null && secondaryElements[pos].length >= 2) {
ret[pos + "Offset"] = secondaryElements[pos].indexOf(ret[pos + "Field"][1]);
ret[size] = 1 / secondaryElements[pos].length;
}
}
}
}
};
getAxisData(series.x, "y", "width");
getAxisData(series.y, "x", "height");
getAxisData(series.z, "z", "r");
// If there is a color axis
if (series.c != null && colorBounds.min != colorBounds.max) {
// Initialise the base and target color
var baseColor, targetColor;
// Limit the bounds of the color value to be within the range. Users may override the axis bounds and this
// allows a 2 color scale rather than blending if the min and max are set to 0 and 0.01 for example negative values
// and zero value would be 1 color and positive another.
ret.cValue = (ret.cValue > colorBounds.max ? colorBounds.max : (ret.cValue < colorBounds.min ? colorBounds.min : ret.cValue));
// Calculate the factors for the calculations
var scale = d3.scale.linear().range([0, (series.c.colors == null || series.c.colors.length == 1 ? 1 : series.c.colors.length - 1)]).domain([colorBounds.min, colorBounds.max]),
colorVal = scale(ret.cValue),
floatingPortion = colorVal - Math.floor(colorVal);
// If there is a single color defined
if (series.c.colors != null && series.c.colors != undefined && series.c.colors.length == 1) {
baseColor = d3.rgb(series.c.colors[0]);
targetColor = d3.rgb(this.getColor(ret.aggField.slice(-1)[0]).fill);
}
// If there are multiple colors defined
else if (series.c.colors != null && series.c.colors != undefined && series.c.colors.length > 1) {
baseColor = d3.rgb(series.c.colors[Math.floor(colorVal)]);
targetColor = d3.rgb(series.c.colors[Math.ceil(colorVal)]);
}
// If there are no colors defined
else {
baseColor = d3.rgb("white");
targetColor = d3.rgb(this.getColor(ret.aggField.slice(-1)[0]).fill);
}
// Calculate the correct grade of color
baseColor.r = Math.floor(baseColor.r + (targetColor.r - baseColor.r) * floatingPortion);
baseColor.g = Math.floor(baseColor.g + (targetColor.g - baseColor.g) * floatingPortion);
baseColor.b = Math.floor(baseColor.b + (targetColor.b - baseColor.b) * floatingPortion);
// Set the colors on the row
ret.fill = baseColor.toString();
ret.stroke = baseColor.darker(0.5).toString();
}
}, this);
// populate the data in the series
series._positionData = returnData;
}, this);
}
};

View File

@ -0,0 +1,27 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_registerEventHandlers.js
// Register events, handle standard d3 shape events
this._registerEventHandlers = function (series) {
if (series._eventHandlers != null && series._eventHandlers.length > 0) {
series._eventHandlers.forEach(function (thisHandler, i) {
if (thisHandler.handler != null && typeof (thisHandler.handler) == "function") {
series.shapes.on(thisHandler.event, function (d) {
var e = new dimple.eventArgs();
if (series.chart.storyboard != null) {
e.frameValue = series.chart.storyboard.getFrameValue();
}
e.seriesValue = d.aggField;
e.xValue = d.x;
e.yValue = d.y;
e.zValue = d.z;
e.colorValue = d.cValue;
e.seriesShapes = series.shapes;
e.selectedShape = d3.select(this);
thisHandler.handler(e);
});
}
}, this);
}
};

View File

@ -0,0 +1,21 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/addAxis.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
this.addAxis = function (position, categoryFields, measure) {
// Convert the passed category fields to an array in case a single string is sent
if (categoryFields != null && categoryFields != undefined) {
categoryFields = [].concat(categoryFields);
}
// Create the axis object based on the passed parameters
var axis = new dimple.axis(
this,
position,
categoryFields,
measure);
// Add the axis to the array for the chart
this.axes.push(axis);
// return the axis
return axis;
};

View File

@ -0,0 +1,8 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/addCategoryAxis.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addCategoryAxis
this.addCategoryAxis = function (position, categoryFields) {
return this.addAxis(position, categoryFields, null);
};

View File

@ -0,0 +1,10 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/addColorAxis.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addColorAxis
this.addColorAxis = function (measure, colors) {
var colorAxis = this.addAxis("c", null, measure);
colorAxis.colors = (colors == null || colors == undefined ? null : [].concat(colors));
return colorAxis;
};

View File

@ -0,0 +1,13 @@
// Source: /src/objects/chart/methods/addLegend.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addLegend
this.addLegend = function (x, y, width, height, horizontalAlign, series) {
// Use all series by default
series = (series == null || series == undefined ? this.series : [].concat(series));
horizontalAlign = (horizontalAlign == null || horizontalAlign == undefined ? "left" : horizontalAlign);
// Create the legend
var legend = new dimple.legend(this, x, y, width, height, horizontalAlign, series);
// Add the legend to the array
this.legends.push(legend);
// Return the legend object
return legend;
};

View File

@ -0,0 +1,8 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/addMeasureAxis.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addMeasureAxis
this.addMeasureAxis = function (position, measure) {
return this.addAxis(position, null, measure);
};

View File

@ -0,0 +1,10 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/addPctAxis.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addPctAxis
this.addPctAxis = function (position, measure) {
var pctAxis = this.addMeasureAxis(position, measure);
pctAxis.showPercent = true;
return pctAxis;
};

View File

@ -0,0 +1,39 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/addSeries.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addSeries
this.addSeries = function (categoryFields, plotFunction, axes) {
// Deal with no axes passed
if (axes == null) { axes = this.axes; }
// Deal with no plot function
if (plotFunction == null) { plotFunction = dimple.plot.bubble; }
// Axis objects to be picked from the array
var xAxis = null, yAxis = null, zAxis = null, colorAxis = null;
// Iterate the array and pull out the relevant axes
axes.forEach(function (axis, i) {
if (axis != null && plotFunction.supportedAxes.indexOf(axis.position) > -1) {
if (xAxis == null && axis.position[0] == "x") { xAxis = axis; }
else if (yAxis == null && axis.position[0] == "y") { yAxis = axis; }
else if (zAxis == null && axis.position[0] == "z") { zAxis = axis; }
else if (colorAxis == null && axis.position[0] == "c") { colorAxis = axis; }
}
}, this);
// Put single values into single value arrays
if (categoryFields != null && categoryFields != undefined) { categoryFields = [].concat(categoryFields); }
// Create a series object
var series = new dimple.series(
this,
categoryFields,
xAxis,
yAxis,
zAxis,
colorAxis,
plotFunction,
dimple.aggregateMethod.sum,
plotFunction.stacked);
// Add the series to the chart's array
this.series.push(series);
// Return the series
return series;
};

View File

@ -0,0 +1,9 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/assignColor.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-assignColor
this.assignColor = function (tag, fill, stroke, opacity) {
this._assignedColors[tag] = new dimple.color(fill, stroke, opacity);
return this._assignedColors[tag];
};

View File

@ -0,0 +1,18 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/defaultColors.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-defaultColors
this.defaultColors = [
new dimple.color("#80B1D3"),
new dimple.color("#FB8072"),
new dimple.color("#FDB462"),
new dimple.color("#B3DE69"),
new dimple.color("#FFED6F"),
new dimple.color("#BC80BD"),
new dimple.color("#8DD3C7"),
new dimple.color("#CCEBC5"),
new dimple.color("#FFFFB3"),
new dimple.color("#BEBADA"),
new dimple.color("#FCCDE5"),
new dimple.color("#D9D9D9")
];

View File

@ -0,0 +1,297 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/draw.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-draw
this.draw = function (duration) {
// Deal with optional parameter
duration = (duration == null || duration == undefined ? 0 : duration);
// Catch the first x and y
var firstX = null, firstY = null;
// Many of the draw methods use positioning data in each series. Therefore we should
// decorate the series with it now
this._getSeriesData()
// Iterate the axes and calculate bounds, this is done within the chart because an
// axis' bounds are determined by other axes and the way that series tie them together
this.axes.forEach(function (axis, i) {
axis._min = 0;
axis._max = 0;
// Check that the axis has a measure
if (axis.measure != null && axis.measure != undefined) {
// Is this axis linked to a series
var linked = false;
// Find any linked series
this.series.forEach(function (series, i) {
// if this axis is linked
if (series[axis.position] == axis) {
// Get the bounds
var bounds = series._axisBounds(axis.position);
if (axis._min > bounds.min) { axis._min = bounds.min; }
if (axis._max < bounds.max) { axis._max = bounds.max; }
linked = true;
}
}, this);
// If the axis is not linked, use the data bounds, this is unlikely to be used
// in a real context, but when developing it is nice to see axes before any series have
// been added.
if (!linked) {
this.data.forEach(function (d, i) {
if (axis._min > d[axis.measure]) { axis._min = d[axis.measure]; }
if (axis._max < d[axis.measure]) { axis._max = d[axis.measure]; }
}, this);
}
}
else {
// A category axis is just set to show the number of categories
axis._min = 0;
var distinctCats = [];
this.data.forEach(function (d, i) {
if (distinctCats.indexOf(d[axis.categoryFields[0]]) == -1) {
distinctCats.push(d[axis.categoryFields[0]]);
}
}, this);
axis._max = distinctCats.length;
}
// Update the axis now we have all information set
axis._update();
// Record the index of the first x and first y axes
if (firstX == null && axis.position == "x") {
firstX = axis;
} else if (firstY == null && axis.position == "y") {
firstY = axis;
}
}, this);
var xGridSet = false;
var yGridSet = false;
// Iterate the axes again
this.axes.forEach(function (axis, i) {
// Don't animate axes on first draw
var firstDraw = false;
if (axis.gridlineShapes == null) {
if (axis.showGridlines || (axis.showGridlines == null && !axis._hasCategories() && ((!xGridSet && axis.position == "x") || (!yGridSet && axis.position == "y")))) {
// Add a group for the gridlines to allow css formatting
axis.gridlineShapes = this.svg.append("g").attr("class", "gridlines")
if (axis.position == "x") {
xGridSet = true;
}
else {
yGridSet = true;
}
}
}
else {
if (axis.position == "x") {
xGridSet = true;
}
else {
yGridSet = true;
}
}
if (axis.shapes == null) {
// Add a group for the axes to allow css formatting
axis.shapes = this.svg.append("g").attr("class", "axis");
firstDraw = true;
}
var transform = null;
var gridSize = 0;
var gridTransform = null;
// If this is the first x and there is a y axis cross them at zero
if (axis == firstX && firstY != null) {
transform = "translate(0, " + (firstY.categoryFields == null || firstY.categoryFields.length == 0 ? firstY._scale(0) : this.y + this.height) + ")";
gridTransform = "translate(0, " + (axis == firstX ? this.y + this.height : this.y) + ")";
gridSize = -this.height;
}
// If this is the first y and there is an x axis cross them at zero
else if (axis == firstY && firstX != null) {
transform = "translate(" + (firstX.categoryFields == null || firstX.categoryFields.length == 0 ? firstX._scale(0) : this.x) + ", 0)";
gridTransform = "translate(" + (axis == firstY ? this.x : this.x + this.width) + ", 0)";
gridSize = -this.width;
}
// Otherwise set the x translation to use the whole width
else if (axis.position == "x") {
gridTransform = transform = "translate(0, " + (axis == firstX ? this.y + this.height : this.y) + ")";
gridSize = -this.height;
}
// Or the y translation to use the whole height
else if (axis.position == "y") {
gridTransform = transform = "translate(" + (axis == firstY ? this.x : this.x + this.width) + ", 0)";
gridSize = -this.width;
}
// Draw the axis
// This code might seem unneccesary but even applying a duration of 0 to a transition will cause the code to execute after the
// code below and precedence is important here.
var handleTrans = function (ob) {
if (transform == null || duration == 0 || firstDraw) { return ob; }
else { return ob.transition().duration(duration); }
}
if (transform != null && axis._draw != null) {
handleTrans(axis.shapes).call(axis._draw.tickFormat(axis._getFormat())).attr("transform", transform);
if (axis.gridlineShapes != null) {
handleTrans(axis.gridlineShapes).call(axis._draw.tickSize(gridSize, 0, 0).tickFormat("")).attr("transform", gridTransform);
}
// Move labels around
if (axis.measure == null || axis.measure == undefined) {
if (axis.position == "x") {
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", (this.width / axis._max) / 2);
}
else if (axis.position == "y") {
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", -1 * (this.height / axis._max) / 2);
}
}
if (axis.categoryFields != null && axis.categoryFields != undefined && axis.categoryFields.length > 0) {
// Off set the labels to counter the transform. This will put the labels along the outside of the chart so they
// don't interfere with the chart contents
if (axis == firstX && (firstY.categoryFields == null || firstY.categoryFields.length == 0)) {
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", this.y + this.height - firstY._scale(0) + 9);
}
if (axis == firstY && (firstX.categoryFields == null || firstX.categoryFields.length == 0)) {
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", -1 * (firstX._scale(0) - this.x) - 9);
}
}
}
// Set some initial css values
if (!this.noFormats) {
handleTrans(axis.shapes.selectAll(".axis text"))
.style("font-family", "sans-serif")
.style("font-size", (this.height / 35 > 10 ? this.height / 35 : 10) + "px");
handleTrans(axis.shapes.selectAll(".axis path, .axis line"))
.style("fill", "none")
.style("stroke", "black")
.style("shape-rendering", "crispEdges");
if (axis.gridlineShapes != null) {
handleTrans(axis.gridlineShapes.selectAll(".gridlines line"))
.style("fill", "none")
.style("stroke", "lightgray")
.style("opacity", 0.8);
}
}
var rotated = false;
// Rotate labels, this can only be done once the formats are set
if (axis.measure == null || axis.measure == undefined) {
if (axis == firstX) {
// If the gaps are narrower than the widest label display all labels horizontally
var widest = 0;
axis.shapes.selectAll(".axis text").each(function () {
var w = this.getComputedTextLength();
widest = (w > widest ? w : widest);
});
if (widest > this.width / axis._max) {
rotated = true;
var offset = (this.width / axis._max) / 2;
axis.shapes.selectAll(".axis text")
.style("text-anchor", "start")
.each(function () {
var rec = this.getBBox();
d3.select(this)
.attr("transform", "rotate(90," + rec.x + "," + (rec.y + (rec.height / 2)) + ") translate(-5, 0)");
})
}
}
else if (axis.position == "x") {
// If the gaps are narrower than the widest label display all labels horizontally
var widest = 0;
axis.shapes.selectAll(".axis text")
.each(function () {
var w = this.getComputedTextLength();
widest = (w > widest ? w : widest);
});
if (widest > this.width / axis._max) {
var offset = (this.width / axis._max) / 2;
axis.shapes.selectAll(".axis text")
.style("text-anchor", "end")
.each(function () {
var rec = this.getBBox();
d3.select(this)
.attr("transform", "rotate(90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)");
})
}
}
}
if (axis.titleShape == null && axis.shapes != null && axis.shapes.node().firstChild != null) {
// Get the maximum edge bounds
var box = { l: null, t: null, r: null, b: null };
// Get the bounds of the axis objects
axis.shapes.selectAll(".axis text")
.each(function () {
var rec = this.getBBox();
box.l = (box.l == null || rec.x < box.l ? rec.x : box.l);
box.t = (rotated ? (box.t == null ||rec.y + rec.width < box.t ? rec.y + rec.width : box.t) : (box.t == null || rec.y < box.t ? rec.y : box.t));
box.r = (box.r == null || rec.x + rec.width > box.r ? rec.x + rec.width : box.r);
box.b = (rotated ? (box.b == null || rec.y + rec.width > box.b ? rec.y + rec.width : box.b) : (box.b == null || rec.y + rec.height > box.b ? rec.y + rec.height : box.b));
});
var titleX = 0;
var titleY = 0;
var rotate = "";
if (axis.position == "x") {
if (axis == firstX) {
titleY = this.y + this.height + box.b + 10;
}
else {
titleY = this.y + box.l + box.t - 5;
}
titleX = this.x + (this.width / 2);
}
else if (axis.position == "y") {
if (axis == firstY) {
titleX = this.x + box.l - 10;
}
else {
titleX = this.x + this.width + box.r + 10;
}
titleY = this.y + (this.height / 2);
rotate = "rotate(270, " + titleX + ", " + titleY + ")"
}
// Add a title for the axis
axis.titleShape = this.svg.append("text").attr("class", "axis title");
var chart = this;
axis.titleShape
.attr("x", titleX)
.attr("y", titleY)
.attr("text-anchor", "middle")
.attr("transform", rotate)
.text((axis.categoryFields == null || axis.categoryFields == undefined || axis.categoryFields.length == 0 ? axis.measure : axis.categoryFields.join("/")))
.each(function () {
if (!chart.noFormats) {
d3.select(this)
.style("font-family", "sans-serif")
.style("font-size", (chart.height / 35 > 10 ? chart.height / 35 : 10) + "px");
}
});
// Offset Y position to baseline. This previously used dominant-baseline but this caused
// browser inconsistency
if (axis == firstX) {
axis.titleShape.each(function () {
d3.select(this).attr("y", titleY + this.getBBox().height / 1.65);
});
}
else if (axis == firstY) {
axis.titleShape.each(function () {
d3.select(this).attr("x", titleX + this.getBBox().height / 1.65);
});
}
}
}, this);
// Iterate the series
this.series.forEach(function (series, i) {
series.plot.draw(this, series, duration);
this._registerEventHandlers(series);
}, this);
// Iterate the legends
this.legends.forEach(function (legend, i) {
legend._draw(duration);
}, this);
// If the chart has a storyboard
if (this.storyboard != null && this.storyboard != undefined) {
this.storyboard._drawText();
if (this.storyboard.autoplay) {
this.storyboard.startAnimation();
}
}
// Return the chart for chaining
return this;
};

View File

@ -0,0 +1,14 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/getColor.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-getColor
this.getColor = function (tag) {
// If no color is assigned, do so here
if (this._assignedColors[tag] == null || this._assignedColors[tag] == undefined) {
this._assignedColors[tag] = this.defaultColors[this._nextColor];
this._nextColor = (this._nextColor + 1) % this.defaultColors.length;
}
// Return the color
return this._assignedColors[tag];
};

View File

@ -0,0 +1,17 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/setBounds.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-setBounds
this.setBounds = function (x, y, width, height) {
// Define the bounds
this.x = x;
this.y = y;
this.width = width;
this.height = height;
// Refresh the axes to redraw them against the new bounds
this.axes.forEach(function (axis, i) {
axis._update();
}, this);
// return the chart object for method chaining
return this;
};

View File

@ -0,0 +1,14 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/setStoryboard.js
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-setStoryboard
this.setStoryboard = function (categoryFields, tickHandler) {
// Create and assign the storyboard
this.storyboard = new dimple.storyboard(this, categoryFields);
// Set the event handler
if (tickHandler != null && tickHandler != undefined) {
this.storyboard.onTick = tickHandler;
}
// Return the storyboard
return this.storyboard;
};

View File

@ -0,0 +1,9 @@
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/color/begin.js
dimple.color = function (fill, stroke, opacity) {
this.fill = fill;
this.stroke = (stroke == null || stroke == undefined ? d3.rgb(fill).darker(0.5).toString() : stroke);
this.opacity = (opacity == null || opacity == undefined ? 0.8 : opacity);

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