mirror of https://github.com/vitalif/dimple
Fix Examples
parent
1b1b8231c9
commit
f139876c74
|
@ -1,63 +0,0 @@
|
||||||
Festivity Countdown Tree Tinsel Baubles Cheer Sparkle Magic
|
|
||||||
-10 09/12/2013 00:00 left trunk none none 0 0 0
|
|
||||||
10 09/12/2013 00:00 right trunk none none 0 0 0
|
|
||||||
-10 11/12/2013 02:00 left trunk none none 0 0 0
|
|
||||||
10 11/12/2013 02:00 right trunk none none 0 0 0
|
|
||||||
-100 11/12/2013 03:00 left none none 0 0 0
|
|
||||||
100 11/12/2013 03:00 right none none 0 0 0
|
|
||||||
-60 13/12/2013 00:00 left none none 0 0 0
|
|
||||||
60 13/12/2013 00:00 right none none 0 0 0
|
|
||||||
-90 13/12/2013 03:00 left none none 0 0 0
|
|
||||||
90 13/12/2013 03:00 right none none 0 0 0
|
|
||||||
-50 15/12/2013 00:00 left none none 0 0 0
|
|
||||||
50 15/12/2013 00:00 right none none 0 0 0
|
|
||||||
-80 15/12/2013 03:00 left none none 0 0 0
|
|
||||||
80 15/12/2013 03:00 right none none 0 0 0
|
|
||||||
-40 17/12/2013 00:00 left none none 0 0 0
|
|
||||||
40 17/12/2013 00:00 right none none 0 0 0
|
|
||||||
-70 17/12/2013 03:00 left none none 0 0 0
|
|
||||||
70 17/12/2013 03:00 right none none 0 0 0
|
|
||||||
-30 19/12/2013 00:00 left none none 0 0 0
|
|
||||||
30 19/12/2013 00:00 right none none 0 0 0
|
|
||||||
-60 19/12/2013 03:00 left none none 0 0 0
|
|
||||||
60 19/12/2013 03:00 right none none 0 0 0
|
|
||||||
-20 21/12/2013 00:00 left none none 0 0 0
|
|
||||||
20 21/12/2013 00:00 right none none 0 0 0
|
|
||||||
-50 21/12/2013 03:00 left none none 0 0 0
|
|
||||||
50 21/12/2013 03:00 right none none 0 0 0
|
|
||||||
-10 23/12/2013 00:00 left none none 0 0 0
|
|
||||||
10 23/12/2013 00:00 right none none 0 0 0
|
|
||||||
-40 23/12/2013 03:00 left none none 0 0 0
|
|
||||||
40 23/12/2013 03:00 right none none 0 0 0
|
|
||||||
0 25/12/2013 00:00 left none none 0 0 0
|
|
||||||
0 25/12/2013 00:00 right none none 0 0 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 1 none 55 -50 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 1 none -65 -100 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 2 none 45 -5 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 2 none -60 -50 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 3 none 38 42 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 3 none -50 0 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 4 none 30 90 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 4 none -45 50 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 5 none 25 135 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 5 none -40 100 0
|
|
||||||
0 18/12/2013 00:00 none none bauble 1 -100 -150 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 1 75 -50 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 1 0 0 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 1 50 50 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 1 -40 150 15
|
|
||||||
0 18/12/2013 00:00 none none bauble 2 -100 -150 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 2 -25 75 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 2 -70 5 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 2 40 -50 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 2 -25 -125 15
|
|
||||||
0 18/12/2013 00:00 none none bauble 3 40 150 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 3 5 120 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 3 20 50 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 3 -25 -50 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 3 100 -150 15
|
|
||||||
0 18/12/2013 00:00 none none bauble 4 40 -100 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 4 -50 -75 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 4 40 -10 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 4 -10 45 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 4 0 175 15
|
|
|
|
@ -1340,7 +1340,7 @@ var dimple = {
|
||||||
chartY = this._yPixels(),
|
chartY = this._yPixels(),
|
||||||
chartWidth = this._widthPixels(),
|
chartWidth = this._widthPixels(),
|
||||||
chartHeight = this._heightPixels(),
|
chartHeight = this._heightPixels(),
|
||||||
linkedDimensions = [];
|
linkedDimensions;
|
||||||
|
|
||||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||||
// decorate the series with it now
|
// decorate the series with it now
|
||||||
|
@ -1358,6 +1358,7 @@ var dimple = {
|
||||||
this.axes.forEach(function (axis) {
|
this.axes.forEach(function (axis) {
|
||||||
axis._min = 0;
|
axis._min = 0;
|
||||||
axis._max = 0;
|
axis._max = 0;
|
||||||
|
linkedDimensions = [];
|
||||||
// Check that the axis has a measure
|
// Check that the axis has a measure
|
||||||
if (axis._hasMeasure()) {
|
if (axis._hasMeasure()) {
|
||||||
// Is this axis linked to a series
|
// Is this axis linked to a series
|
||||||
|
@ -3000,7 +3001,16 @@ var dimple = {
|
||||||
updated,
|
updated,
|
||||||
removed,
|
removed,
|
||||||
xFloat = !series._isStacked() && series.x._hasMeasure(),
|
xFloat = !series._isStacked() && series.x._hasMeasure(),
|
||||||
yFloat = !series._isStacked() && series.y._hasMeasure();
|
yFloat = !series._isStacked() && series.y._hasMeasure(),
|
||||||
|
cat = "none";
|
||||||
|
|
||||||
|
if (series.x._hasCategories() && series.y._hasCategories()) {
|
||||||
|
cat = "both";
|
||||||
|
} else if (series.x._hasCategories()) {
|
||||||
|
cat = "x";
|
||||||
|
} else if (series.y._hasCategories()) {
|
||||||
|
cat = "y";
|
||||||
|
}
|
||||||
|
|
||||||
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
|
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
|
||||||
chart._tooltipGroup.remove();
|
chart._tooltipGroup.remove();
|
||||||
|
@ -3024,17 +3034,29 @@ var dimple = {
|
||||||
c = c.concat(d.yField);
|
c = c.concat(d.yField);
|
||||||
return classes.join(" ") + " " + dimple._createClass(c);
|
return classes.join(" ") + " " + dimple._createClass(c);
|
||||||
})
|
})
|
||||||
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
|
.attr("x", function (d) {
|
||||||
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
|
var returnValue = series.x._previousOrigin;
|
||||||
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
|
if (cat === "x") {
|
||||||
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); })
|
returnValue = dimple._helpers.x(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cx(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
var returnValue = series.y._previousOrigin;
|
||||||
|
if (cat === "y") {
|
||||||
|
returnValue = dimple._helpers.y(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cy(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
|
||||||
|
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); })
|
||||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||||
.on("mouseover", function (e) {
|
.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, series); })
|
||||||
dimple._showBarTooltip(e, this, chart, series);
|
.on("mouseleave", function (e) { dimple._removeTooltip(e, this, chart, series); })
|
||||||
})
|
|
||||||
.on("mouseleave", function (e) {
|
|
||||||
dimple._removeTooltip(e, this, chart, series);
|
|
||||||
})
|
|
||||||
.call(function () {
|
.call(function () {
|
||||||
if (!chart.noFormats) {
|
if (!chart.noFormats) {
|
||||||
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
|
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
|
||||||
|
@ -3057,10 +3079,26 @@ var dimple = {
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = dimple._handleTransition(theseShapes.exit(), duration)
|
removed = dimple._handleTransition(theseShapes.exit(), duration)
|
||||||
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
|
.attr("x", function (d) {
|
||||||
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
|
var returnValue = series.x._origin;
|
||||||
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
|
if (cat === "x") {
|
||||||
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); });
|
returnValue = dimple._helpers.x(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cx(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
var returnValue = series.y._origin;
|
||||||
|
if (cat === "y") {
|
||||||
|
returnValue = dimple._helpers.y(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cy(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
|
||||||
|
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); });
|
||||||
|
|
||||||
dimple._postDrawHandling(series, updated, removed, duration);
|
dimple._postDrawHandling(series, updated, removed, duration);
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -13,24 +13,26 @@
|
||||||
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
var y = myChart.addPctAxis("y", "Unit Sales");
|
var y = myChart.addPctAxis("y", "Unit Sales");
|
||||||
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
myChart.addLegend(200, 10, 380, 20, "right");
|
// Using the afterDraw callback means this code still works with animated
|
||||||
myChart.draw();
|
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
|
||||||
// After drawing we can access the shapes and their associated data
|
// also be used to clear the text from the previous frame)
|
||||||
// to add labels.
|
s.afterDraw = function (shape, data) {
|
||||||
s.shapes.each(function(d) {
|
|
||||||
// Get the shape as a d3 selection
|
// Get the shape as a d3 selection
|
||||||
var shape = d3.select(this),
|
var s = d3.select(shape),
|
||||||
// Get the height and width from the scales
|
rect = {
|
||||||
height = myChart.y + myChart.height - y._scale(d.height);
|
x: parseFloat(s.attr("x")),
|
||||||
width = x._scale(d.width);
|
y: parseFloat(s.attr("y")),
|
||||||
|
width: parseFloat(s.attr("width")),
|
||||||
|
height: parseFloat(s.attr("height"))
|
||||||
|
};
|
||||||
// Only label bars where the text can fit
|
// Only label bars where the text can fit
|
||||||
if (height >= 8) {
|
if (rect.height >= 8) {
|
||||||
// Add a text label for the value
|
// Add a text label for the value
|
||||||
svg.append("text")
|
svg.append("text")
|
||||||
// Position in the centre of the shape (vertical position is
|
// Position in the centre of the shape (vertical position is
|
||||||
// manually set due to cross-browser problems with baseline)
|
// manually set due to cross-browser problems with baseline)
|
||||||
.attr("x", parseFloat(shape.attr("x")) + width / 2)
|
.attr("x", rect.x + rect.width / 2)
|
||||||
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
|
.attr("y", rect.y + rect.height / 2 + 3.5)
|
||||||
// Centre align
|
// Centre align
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.style("font-size", "10px")
|
.style("font-size", "10px")
|
||||||
|
@ -38,9 +40,11 @@
|
||||||
// Make it a little transparent to tone down the black
|
// Make it a little transparent to tone down the black
|
||||||
.style("opacity", 0.6)
|
.style("opacity", 0.6)
|
||||||
// Format the number
|
// Format the number
|
||||||
.text(d3.format(",.1f")(d.yValue / 1000) + "k");
|
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
|
@ -1,74 +0,0 @@
|
||||||
<!----------------------------------------------------------------->
|
|
||||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
|
||||||
<!----------------------------------------------------------------->
|
|
||||||
<div id="chartContainer">
|
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
|
||||||
<script src="/dist/dimple.v1.2.0.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
|
||||||
|
|
||||||
// Unlike other dimple charts this relies on some special Christmas
|
|
||||||
// data collated from Santa's Naughty:Nice data store
|
|
||||||
d3.tsv("/data/christmas_data.tsv", function (data) {
|
|
||||||
|
|
||||||
// Create the chart as usual
|
|
||||||
var chart = new dimple.chart(svg, data);
|
|
||||||
chart.setMargins(80, 50, 60, 40);
|
|
||||||
|
|
||||||
// Add a measure axis on x for Festivity
|
|
||||||
var festivity = chart.addMeasureAxis("x", "Festivity");
|
|
||||||
festivity.overrideMin = -200;
|
|
||||||
festivity.overrideMax = 200;
|
|
||||||
|
|
||||||
// Add a secondary x axis for Good Cheer
|
|
||||||
var cheer = chart.addMeasureAxis("x", "Cheer");
|
|
||||||
cheer.overrideMin = -200;
|
|
||||||
cheer.overrideMax = 200;
|
|
||||||
|
|
||||||
// We need to view these metrics against the Countdown to Christmas,
|
|
||||||
// this is visualised with the dimple time axis
|
|
||||||
var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
|
|
||||||
|
|
||||||
// Add a final Y axis for sparkle
|
|
||||||
var sparkle = chart.addMeasureAxis("y", "Sparkle");
|
|
||||||
sparkle.overrideMin = -200;
|
|
||||||
sparkle.overrideMax = 200;
|
|
||||||
|
|
||||||
// Bauble size will be based on Magic (everyone knows that)
|
|
||||||
var magic = chart.addMeasureAxis("z", "Magic");
|
|
||||||
magic.overrideMax = 100;
|
|
||||||
|
|
||||||
// Add the three series for this visualisation
|
|
||||||
// First, a vertical area chart plotting festivity through December
|
|
||||||
// (I knew I'd find an application for that chart type eventually!)
|
|
||||||
chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
|
|
||||||
|
|
||||||
// Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
|
|
||||||
var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
|
|
||||||
tinsel.lineWeight = 5;
|
|
||||||
|
|
||||||
// Add a bubble chart showing how Cheer and Sparkle are affected by Magic
|
|
||||||
chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
|
|
||||||
|
|
||||||
// Map colors to different series values
|
|
||||||
chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
|
|
||||||
chart.assignColor("left", "Green", "DarkGreen");
|
|
||||||
chart.assignColor("right", "Green", "DarkGreen");
|
|
||||||
chart.assignColor("left trunk", "Sienna", "SaddleBrown");
|
|
||||||
chart.assignColor("right trunk", "Sienna", "SaddleBrown");
|
|
||||||
chart.assignColor("tinsel 1", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("tinsel 2", "Red", "Red", 1);
|
|
||||||
chart.assignColor("tinsel 3", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("tinsel 4", "Red", "Red", 1);
|
|
||||||
chart.assignColor("tinsel 5", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("bauble 1", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
|
|
||||||
chart.assignColor("bauble 3", "Red", "Crimson", 1);
|
|
||||||
chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
|
|
||||||
|
|
||||||
// Sprinkle the magic dust
|
|
||||||
chart.draw();
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
|
|
@ -74,7 +74,7 @@
|
||||||
// Position the chart inside the shape
|
// Position the chart inside the shape
|
||||||
subChart.setBounds(
|
subChart.setBounds(
|
||||||
parseFloat(shape.attr("x")),
|
parseFloat(shape.attr("x")),
|
||||||
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
|
parseFloat(shape.attr("y")),
|
||||||
parseFloat(shape.attr("width")),
|
parseFloat(shape.attr("width")),
|
||||||
parseFloat(shape.attr("height")));
|
parseFloat(shape.attr("height")));
|
||||||
|
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
<!----------------------------------------------------------------->
|
|
||||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
|
||||||
<!----------------------------------------------------------------->
|
|
|
@ -109,7 +109,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Remove the padding elements entirely
|
// Remove the padding elements entirely
|
||||||
svg.selectAll(".pad").remove();
|
svg.selectAll(".dimple-pad").remove();
|
||||||
|
|
||||||
// Change the measure name and the category names for the tooltips
|
// Change the measure name and the category names for the tooltips
|
||||||
s.y.measure = yLabel;
|
s.y.measure = yLabel;
|
||||||
|
|
|
@ -10,24 +10,26 @@
|
||||||
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
var y = myChart.addPctAxis("y", "Unit Sales");
|
var y = myChart.addPctAxis("y", "Unit Sales");
|
||||||
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
myChart.addLegend(200, 10, 380, 20, "right");
|
// Using the afterDraw callback means this code still works with animated
|
||||||
myChart.draw();
|
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
|
||||||
// After drawing we can access the shapes and their associated data
|
// also be used to clear the text from the previous frame)
|
||||||
// to add labels.
|
s.afterDraw = function (shape, data) {
|
||||||
s.shapes.each(function(d) {
|
|
||||||
// Get the shape as a d3 selection
|
// Get the shape as a d3 selection
|
||||||
var shape = d3.select(this),
|
var s = d3.select(shape),
|
||||||
// Get the height and width from the scales
|
rect = {
|
||||||
height = myChart.y + myChart.height - y._scale(d.height);
|
x: parseFloat(s.attr("x")),
|
||||||
width = x._scale(d.width);
|
y: parseFloat(s.attr("y")),
|
||||||
|
width: parseFloat(s.attr("width")),
|
||||||
|
height: parseFloat(s.attr("height"))
|
||||||
|
};
|
||||||
// Only label bars where the text can fit
|
// Only label bars where the text can fit
|
||||||
if (height >= 8) {
|
if (rect.height >= 8) {
|
||||||
// Add a text label for the value
|
// Add a text label for the value
|
||||||
svg.append("text")
|
svg.append("text")
|
||||||
// Position in the centre of the shape (vertical position is
|
// Position in the centre of the shape (vertical position is
|
||||||
// manually set due to cross-browser problems with baseline)
|
// manually set due to cross-browser problems with baseline)
|
||||||
.attr("x", parseFloat(shape.attr("x")) + width / 2)
|
.attr("x", rect.x + rect.width / 2)
|
||||||
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
|
.attr("y", rect.y + rect.height / 2 + 3.5)
|
||||||
// Centre align
|
// Centre align
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.style("font-size", "10px")
|
.style("font-size", "10px")
|
||||||
|
@ -35,9 +37,11 @@
|
||||||
// Make it a little transparent to tone down the black
|
// Make it a little transparent to tone down the black
|
||||||
.style("opacity", 0.6)
|
.style("opacity", 0.6)
|
||||||
// Format the number
|
// Format the number
|
||||||
.text(d3.format(",.1f")(d.yValue / 1000) + "k");
|
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
|
@ -1,71 +0,0 @@
|
||||||
<div id="chartContainer">
|
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
|
||||||
<script src="/dist/dimple.{version}.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
|
||||||
|
|
||||||
// Unlike other dimple charts this relies on some special Christmas
|
|
||||||
// data collated from Santa's Naughty:Nice data store
|
|
||||||
d3.tsv("/data/christmas_data.tsv", function (data) {
|
|
||||||
|
|
||||||
// Create the chart as usual
|
|
||||||
var chart = new dimple.chart(svg, data);
|
|
||||||
chart.setMargins(80, 50, 60, 40);
|
|
||||||
|
|
||||||
// Add a measure axis on x for Festivity
|
|
||||||
var festivity = chart.addMeasureAxis("x", "Festivity");
|
|
||||||
festivity.overrideMin = -200;
|
|
||||||
festivity.overrideMax = 200;
|
|
||||||
|
|
||||||
// Add a secondary x axis for Good Cheer
|
|
||||||
var cheer = chart.addMeasureAxis("x", "Cheer");
|
|
||||||
cheer.overrideMin = -200;
|
|
||||||
cheer.overrideMax = 200;
|
|
||||||
|
|
||||||
// We need to view these metrics against the Countdown to Christmas,
|
|
||||||
// this is visualised with the dimple time axis
|
|
||||||
var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
|
|
||||||
|
|
||||||
// Add a final Y axis for sparkle
|
|
||||||
var sparkle = chart.addMeasureAxis("y", "Sparkle");
|
|
||||||
sparkle.overrideMin = -200;
|
|
||||||
sparkle.overrideMax = 200;
|
|
||||||
|
|
||||||
// Bauble size will be based on Magic (everyone knows that)
|
|
||||||
var magic = chart.addMeasureAxis("z", "Magic");
|
|
||||||
magic.overrideMax = 100;
|
|
||||||
|
|
||||||
// Add the three series for this visualisation
|
|
||||||
// First, a vertical area chart plotting festivity through December
|
|
||||||
// (I knew I'd find an application for that chart type eventually!)
|
|
||||||
chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
|
|
||||||
|
|
||||||
// Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
|
|
||||||
var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
|
|
||||||
tinsel.lineWeight = 5;
|
|
||||||
|
|
||||||
// Add a bubble chart showing how Cheer and Sparkle are affected by Magic
|
|
||||||
chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
|
|
||||||
|
|
||||||
// Map colors to different series values
|
|
||||||
chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
|
|
||||||
chart.assignColor("left", "Green", "DarkGreen");
|
|
||||||
chart.assignColor("right", "Green", "DarkGreen");
|
|
||||||
chart.assignColor("left trunk", "Sienna", "SaddleBrown");
|
|
||||||
chart.assignColor("right trunk", "Sienna", "SaddleBrown");
|
|
||||||
chart.assignColor("tinsel 1", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("tinsel 2", "Red", "Red", 1);
|
|
||||||
chart.assignColor("tinsel 3", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("tinsel 4", "Red", "Red", 1);
|
|
||||||
chart.assignColor("tinsel 5", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("bauble 1", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
|
|
||||||
chart.assignColor("bauble 3", "Red", "Crimson", 1);
|
|
||||||
chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
|
|
||||||
|
|
||||||
// Sprinkle the magic dust
|
|
||||||
chart.draw();
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
|
|
@ -71,7 +71,7 @@
|
||||||
// Position the chart inside the shape
|
// Position the chart inside the shape
|
||||||
subChart.setBounds(
|
subChart.setBounds(
|
||||||
parseFloat(shape.attr("x")),
|
parseFloat(shape.attr("x")),
|
||||||
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
|
parseFloat(shape.attr("y")),
|
||||||
parseFloat(shape.attr("width")),
|
parseFloat(shape.attr("width")),
|
||||||
parseFloat(shape.attr("height")));
|
parseFloat(shape.attr("height")));
|
||||||
|
|
||||||
|
|
|
@ -106,7 +106,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Remove the padding elements entirely
|
// Remove the padding elements entirely
|
||||||
svg.selectAll(".pad").remove();
|
svg.selectAll(".dimple-pad").remove();
|
||||||
|
|
||||||
// Change the measure name and the category names for the tooltips
|
// Change the measure name and the category names for the tooltips
|
||||||
s.y.measure = yLabel;
|
s.y.measure = yLabel;
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
chartY = this._yPixels(),
|
chartY = this._yPixels(),
|
||||||
chartWidth = this._widthPixels(),
|
chartWidth = this._widthPixels(),
|
||||||
chartHeight = this._heightPixels(),
|
chartHeight = this._heightPixels(),
|
||||||
linkedDimensions = [];
|
linkedDimensions;
|
||||||
|
|
||||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||||
// decorate the series with it now
|
// decorate the series with it now
|
||||||
|
@ -33,6 +33,7 @@
|
||||||
this.axes.forEach(function (axis) {
|
this.axes.forEach(function (axis) {
|
||||||
axis._min = 0;
|
axis._min = 0;
|
||||||
axis._max = 0;
|
axis._max = 0;
|
||||||
|
linkedDimensions = [];
|
||||||
// Check that the axis has a measure
|
// Check that the axis has a measure
|
||||||
if (axis._hasMeasure()) {
|
if (axis._hasMeasure()) {
|
||||||
// Is this axis linked to a series
|
// Is this axis linked to a series
|
||||||
|
|
|
@ -18,7 +18,16 @@
|
||||||
updated,
|
updated,
|
||||||
removed,
|
removed,
|
||||||
xFloat = !series._isStacked() && series.x._hasMeasure(),
|
xFloat = !series._isStacked() && series.x._hasMeasure(),
|
||||||
yFloat = !series._isStacked() && series.y._hasMeasure();
|
yFloat = !series._isStacked() && series.y._hasMeasure(),
|
||||||
|
cat = "none";
|
||||||
|
|
||||||
|
if (series.x._hasCategories() && series.y._hasCategories()) {
|
||||||
|
cat = "both";
|
||||||
|
} else if (series.x._hasCategories()) {
|
||||||
|
cat = "x";
|
||||||
|
} else if (series.y._hasCategories()) {
|
||||||
|
cat = "y";
|
||||||
|
}
|
||||||
|
|
||||||
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
|
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
|
||||||
chart._tooltipGroup.remove();
|
chart._tooltipGroup.remove();
|
||||||
|
@ -42,17 +51,29 @@
|
||||||
c = c.concat(d.yField);
|
c = c.concat(d.yField);
|
||||||
return classes.join(" ") + " " + dimple._createClass(c);
|
return classes.join(" ") + " " + dimple._createClass(c);
|
||||||
})
|
})
|
||||||
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
|
.attr("x", function (d) {
|
||||||
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
|
var returnValue = series.x._previousOrigin;
|
||||||
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
|
if (cat === "x") {
|
||||||
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); })
|
returnValue = dimple._helpers.x(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cx(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
var returnValue = series.y._previousOrigin;
|
||||||
|
if (cat === "y") {
|
||||||
|
returnValue = dimple._helpers.y(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cy(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
|
||||||
|
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); })
|
||||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||||
.on("mouseover", function (e) {
|
.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, series); })
|
||||||
dimple._showBarTooltip(e, this, chart, series);
|
.on("mouseleave", function (e) { dimple._removeTooltip(e, this, chart, series); })
|
||||||
})
|
|
||||||
.on("mouseleave", function (e) {
|
|
||||||
dimple._removeTooltip(e, this, chart, series);
|
|
||||||
})
|
|
||||||
.call(function () {
|
.call(function () {
|
||||||
if (!chart.noFormats) {
|
if (!chart.noFormats) {
|
||||||
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
|
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
|
||||||
|
@ -75,10 +96,26 @@
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = dimple._handleTransition(theseShapes.exit(), duration)
|
removed = dimple._handleTransition(theseShapes.exit(), duration)
|
||||||
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
|
.attr("x", function (d) {
|
||||||
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
|
var returnValue = series.x._origin;
|
||||||
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
|
if (cat === "x") {
|
||||||
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); });
|
returnValue = dimple._helpers.x(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cx(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
var returnValue = series.y._origin;
|
||||||
|
if (cat === "y") {
|
||||||
|
returnValue = dimple._helpers.y(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cy(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
|
||||||
|
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); });
|
||||||
|
|
||||||
dimple._postDrawHandling(series, updated, removed, duration);
|
dimple._postDrawHandling(series, updated, removed, duration);
|
||||||
|
|
||||||
|
|
|
@ -1340,7 +1340,7 @@ var dimple = {
|
||||||
chartY = this._yPixels(),
|
chartY = this._yPixels(),
|
||||||
chartWidth = this._widthPixels(),
|
chartWidth = this._widthPixels(),
|
||||||
chartHeight = this._heightPixels(),
|
chartHeight = this._heightPixels(),
|
||||||
linkedDimensions = [];
|
linkedDimensions;
|
||||||
|
|
||||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||||
// decorate the series with it now
|
// decorate the series with it now
|
||||||
|
@ -1358,6 +1358,7 @@ var dimple = {
|
||||||
this.axes.forEach(function (axis) {
|
this.axes.forEach(function (axis) {
|
||||||
axis._min = 0;
|
axis._min = 0;
|
||||||
axis._max = 0;
|
axis._max = 0;
|
||||||
|
linkedDimensions = [];
|
||||||
// Check that the axis has a measure
|
// Check that the axis has a measure
|
||||||
if (axis._hasMeasure()) {
|
if (axis._hasMeasure()) {
|
||||||
// Is this axis linked to a series
|
// Is this axis linked to a series
|
||||||
|
@ -3000,7 +3001,16 @@ var dimple = {
|
||||||
updated,
|
updated,
|
||||||
removed,
|
removed,
|
||||||
xFloat = !series._isStacked() && series.x._hasMeasure(),
|
xFloat = !series._isStacked() && series.x._hasMeasure(),
|
||||||
yFloat = !series._isStacked() && series.y._hasMeasure();
|
yFloat = !series._isStacked() && series.y._hasMeasure(),
|
||||||
|
cat = "none";
|
||||||
|
|
||||||
|
if (series.x._hasCategories() && series.y._hasCategories()) {
|
||||||
|
cat = "both";
|
||||||
|
} else if (series.x._hasCategories()) {
|
||||||
|
cat = "x";
|
||||||
|
} else if (series.y._hasCategories()) {
|
||||||
|
cat = "y";
|
||||||
|
}
|
||||||
|
|
||||||
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
|
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
|
||||||
chart._tooltipGroup.remove();
|
chart._tooltipGroup.remove();
|
||||||
|
@ -3024,17 +3034,29 @@ var dimple = {
|
||||||
c = c.concat(d.yField);
|
c = c.concat(d.yField);
|
||||||
return classes.join(" ") + " " + dimple._createClass(c);
|
return classes.join(" ") + " " + dimple._createClass(c);
|
||||||
})
|
})
|
||||||
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
|
.attr("x", function (d) {
|
||||||
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
|
var returnValue = series.x._previousOrigin;
|
||||||
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
|
if (cat === "x") {
|
||||||
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); })
|
returnValue = dimple._helpers.x(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cx(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
var returnValue = series.y._previousOrigin;
|
||||||
|
if (cat === "y") {
|
||||||
|
returnValue = dimple._helpers.y(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cy(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
|
||||||
|
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); })
|
||||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||||
.on("mouseover", function (e) {
|
.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, series); })
|
||||||
dimple._showBarTooltip(e, this, chart, series);
|
.on("mouseleave", function (e) { dimple._removeTooltip(e, this, chart, series); })
|
||||||
})
|
|
||||||
.on("mouseleave", function (e) {
|
|
||||||
dimple._removeTooltip(e, this, chart, series);
|
|
||||||
})
|
|
||||||
.call(function () {
|
.call(function () {
|
||||||
if (!chart.noFormats) {
|
if (!chart.noFormats) {
|
||||||
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
|
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
|
||||||
|
@ -3057,10 +3079,26 @@ var dimple = {
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = dimple._handleTransition(theseShapes.exit(), duration)
|
removed = dimple._handleTransition(theseShapes.exit(), duration)
|
||||||
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
|
.attr("x", function (d) {
|
||||||
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
|
var returnValue = series.x._origin;
|
||||||
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
|
if (cat === "x") {
|
||||||
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); });
|
returnValue = dimple._helpers.x(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cx(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
var returnValue = series.y._origin;
|
||||||
|
if (cat === "y") {
|
||||||
|
returnValue = dimple._helpers.y(d, chart, series);
|
||||||
|
} else if (cat === "both") {
|
||||||
|
returnValue = dimple._helpers.cy(d, chart, series);
|
||||||
|
}
|
||||||
|
return returnValue;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
|
||||||
|
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); });
|
||||||
|
|
||||||
dimple._postDrawHandling(series, updated, removed, duration);
|
dimple._postDrawHandling(series, updated, removed, duration);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue