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

Built Merged Version

master
johnkiernander 2014-04-02 19:33:17 +01:00
parent 825ce002e4
commit 3836ac0493
5 changed files with 323 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
dist/dimple.v1.1.6.js vendored
View File

@ -246,14 +246,17 @@ var dimple = {
origin,
getOrderedCategories = function (self, axPos, oppPos) {
var category = self.categoryFields[0],
chartData = self.chart._getAllData(),
sortBy = category,
desc = false,
isDate = true,
currentValue = null,
i,
definitions = [];
// Check whether this field is a date
for (i = 0; i < self.chart.data.length; i += 1) {
if (isNaN(self._parseDate(self.chart.data[i][category]))) {
for (i = 0; i < chartData.length; i += 1) {
currentValue = self._parseDate(chartData[i][category]);
if (currentValue !== null && currentValue !== undefined && isNaN(currentValue)) {
isDate = false;
break;
}
@ -268,7 +271,7 @@ var dimple = {
}, this);
}
definitions = self._orderRules.concat({ ordering : sortBy, desc : desc });
return dimple._getOrderedList(self.chart.data, category, definitions);
return dimple._getOrderedList(chartData, category, definitions);
};
// If the axis is a percentage type axis the bounds must be between -1 and 1. Sometimes
@ -531,6 +534,30 @@ var dimple = {
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_getAllData.js
// Mash together all of the datasets
this._getAllData = function () {
// The return array will include all data for chart as well as an series
var returnData = [];
// If there is data at the chart level
if (this.data !== null && this.data !== undefined && this.data.length > 0) {
returnData = returnData.concat(this.data);
}
// If there are series defined
if (this.series !== null && this.series !== undefined && this.series.length > 0) {
this.series.forEach(function (s) {
if (s.data !== null && s.data !== undefined && s.data.length > 0) {
returnData = returnData.concat(s.data);
}
});
}
// Return the final dataset
return returnData;
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_getSeriesData.js
@ -580,22 +607,22 @@ var dimple = {
yCat = "",
ySortArray = [],
rules = [],
sortedData = this.data,
sortedData = series.data || this.data,
groupRules = [];
if (this.storyboard !== null && this.storyboard !== undefined && this.storyboard.categoryFields.length > 0) {
storyCat = this.storyboard.categoryFields[0];
orderedStoryboardArray = dimple._getOrderedList(this.data, storyCat, this.storyboard._orderRules);
orderedStoryboardArray = dimple._getOrderedList(sortedData, storyCat, this.storyboard._orderRules);
}
// Deal with mekkos
if (series.x._hasCategories() && series.x._hasMeasure()) {
xCat = series.x.categoryFields[0];
xSortArray = dimple._getOrderedList(this.data, xCat, series.x._orderRules.concat([{ ordering : series.x.measure, desc : true }]));
xSortArray = dimple._getOrderedList(sortedData, xCat, series.x._orderRules.concat([{ ordering : series.x.measure, desc : true }]));
}
if (series.y._hasCategories() && series.y._hasMeasure()) {
yCat = series.y.categoryFields[0];
ySortArray = dimple._getOrderedList(this.data, yCat, series.y._orderRules.concat([{ ordering : series.y.measure, desc : true }]));
ySortArray = dimple._getOrderedList(sortedData, yCat, series.y._orderRules.concat([{ ordering : series.y.measure, desc : true }]));
}
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@ -612,7 +639,7 @@ var dimple = {
} else if (series.y._hasMeasure()) {
rules.push({ ordering : series.y.measure, desc : true });
}
orderedSeriesArray = dimple._getOrderedList(this.data, seriesCat, rules);
orderedSeriesArray = dimple._getOrderedList(sortedData, seriesCat, rules);
}
sortedData.sort(function (a, b) {
@ -766,14 +793,14 @@ var dimple = {
if (series.y._hasMeasure()) {
groupRules.push({ ordering : series.y.measure, desc : true });
}
secondaryElements.x = dimple._getOrderedList(this.data, series.x.categoryFields[1], series.x._groupOrderRules.concat(groupRules));
secondaryElements.x = dimple._getOrderedList(sortedData, series.x.categoryFields[1], series.x._groupOrderRules.concat(groupRules));
}
if (series.y !== null && series.y !== undefined && series.y._hasCategories() && series.y.categoryFields.length > 1 && secondaryElements.y !== undefined) {
groupRules = [];
if (series.x._hasMeasure()) {
groupRules.push({ ordering : series.x.measure, desc : true });
}
secondaryElements.y = dimple._getOrderedList(this.data, series.y.categoryFields[1], series.y._groupOrderRules.concat(groupRules));
secondaryElements.y = dimple._getOrderedList(sortedData, series.y.categoryFields[1], series.y._groupOrderRules.concat(groupRules));
secondaryElements.y.reverse();
}
returnData.forEach(function (ret) {
@ -916,8 +943,16 @@ var dimple = {
this._registerEventHandlers = function (series) {
if (series._eventHandlers !== null && series._eventHandlers.length > 0) {
series._eventHandlers.forEach(function (thisHandler) {
var shapes = null;
if (thisHandler.handler !== null && typeof (thisHandler.handler) === "function") {
series.shapes.on(thisHandler.event, function (d) {
// Some classes work from markers rather than the shapes (line and area for example)
// in these cases the events should be applied to the markers instead. Issue #15
if (series._markers !== null && series._markers !== undefined) {
shapes = series._markers;
} else {
shapes = series.shapes;
}
shapes.on(thisHandler.event, function (d) {
var e = new dimple.eventArgs();
if (series.chart.storyboard !== null) {
e.frameValue = series.chart.storyboard.getFrameValue();
@ -1225,7 +1260,7 @@ var dimple = {
// 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) {
this._getAllData().forEach(function (d) {
if (axis._min > d[axis.measure]) { axis._min = d[axis.measure]; }
if (axis._max < d[axis.measure]) { axis._max = d[axis.measure]; }
}, this);
@ -1245,7 +1280,7 @@ var dimple = {
}
}, this);
// Iterate the data
this.data.forEach(function (d) {
this._getAllData().forEach(function (d) {
// Find any linked series
linkedDimensions.forEach(function (dimension) {
// Check it's timeField
@ -1272,7 +1307,7 @@ var dimple = {
linkedDimensions.push(series[axis.position].categoryFields[0]);
}
}, this);
this.data.forEach(function (d) {
this._getAllData().forEach(function (d) {
linkedDimensions.forEach(function (dimension) {
if (distinctCats.indexOf(d[dimension]) === -1) {
distinctCats.push(d[dimension]);
@ -2250,7 +2285,7 @@ var dimple = {
// Clear the array
this._categories = [];
// Iterate every row in the data
this.chart.data.forEach(function (d) {
this.chart._getAllData().forEach(function (d) {
// Initialise the index of the categories array matching the current row
var index = -1,
field = "";
@ -2423,7 +2458,8 @@ var dimple = {
graded = false,
line,
catPoints = {},
markers;
markers,
markerBacks;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
@ -2473,7 +2509,7 @@ var dimple = {
.data(uniqueValues)
.transition()
.duration(duration)
.attr("class", function (d) { return "series area " + d.replace(" ", ""); })
.attr("class", function (d) { return "series area " + d.split(" ").join("_"); })
.attr("d", function (d) {
var seriesData,
baseline = [],
@ -2555,43 +2591,101 @@ var dimple = {
}
});
// Add line markers.
markers = chart._group.selectAll(".markers")
.data(data)
.enter();
// Add a fully opaque white circle first so we don't see a ghost of the line
if (series.lineMarkers) {
markers.append("circle")
if (series._markerBacks === null || series._markerBacks === undefined) {
markerBacks = chart._group.selectAll(".markerBacks").data(data);
} else {
markerBacks = series._markerBacks.data(data, function (d) { return d.key; });
}
// Add
markerBacks
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", "markerBacks")
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 0)
.attr("fill", "white")
.attr("stroke", "none");
// Update
markerBacks
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.attr("fill", "white")
.attr("stroke", "none");
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight);
// Remove
markerBacks
.exit()
.transition().duration(duration)
.attr("r", 0)
.each("end", function () {
d3.select(this).remove();
});
series._markerBacks = markerBacks;
}
// Deal with markers in the same way as main series to fix #28
if (series._markers === null || series._markers === undefined) {
markers = chart._group.selectAll(".markers").data(data);
} else {
markers = series._markers.data(data, function (d) { return d.key; });
}
// Add the actual marker. We need to do this even if we aren't displaying them because they
// catch hover events
markers.append("circle")
markers
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", "markers")
.on("mouseover", function (e) {
self.enterEventHandler(e, this, chart, series);
})
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.attr("r", 0)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) { return dimple._helpers.stroke(d, chart, series); });
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
markers
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
markers
.exit()
.transition().duration(duration)
.attr("r", 0)
.each("end", function () {
d3.select(this).remove();
});
// Save the shapes to the series array
series._markers = markers;
},
// Handle the mouse enter event
@ -2701,7 +2795,8 @@ var dimple = {
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");
// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@ -2772,6 +2867,7 @@ var dimple = {
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
@ -2806,7 +2902,7 @@ var dimple = {
.style("opacity", 0.95);
// Shift the ring margin left or right depending on whether it will overlap the edge
overlap = cx + r + textMargin + popupMargin + w > parseFloat(chart.svg.attr("width"));
overlap = cx + r + textMargin + popupMargin + w > parseFloat(chart.svg.node().getBBox().width);
// Translate the shapes to the x position of the bubble (the x position of the shapes is handled)
t.attr("transform", "translate(" +
@ -2863,7 +2959,12 @@ var dimple = {
.enter()
.append("rect")
.attr("id", function (d) { return d.key; })
.attr("class", function (d) { return className + " bar " + d.aggField.join(" ") + " " + d.xField.join(" ") + " " + d.yField.join(" "); })
.attr("class", function (d) {
return className + " bar " +
d.aggField.join(" ").split(" ").join("_") + " " +
d.xField.join(" ").split(" ").join("_") + " " +
d.yField.join(" ").split(" ").join("_");
})
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
@ -2949,7 +3050,10 @@ var dimple = {
yRunning = 0,
// The maximum bounds of the text elements
w = 0,
h = 0;
h = 0,
// Values to shift the popup
translateX,
translateY;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
@ -3003,7 +3107,8 @@ var dimple = {
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");
// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@ -3074,6 +3179,7 @@ var dimple = {
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
@ -3108,29 +3214,31 @@ var dimple = {
.style("opacity", 0.95);
// Shift the popup around to avoid overlapping the svg edge
if (x + width + textMargin + popupMargin + w < parseFloat(chart.svg.attr("width"))) {
if (x + width + textMargin + popupMargin + w < parseFloat(chart.svg.node().getBBox().width)) {
// Draw centre right
t.attr("transform", "translate(" +
(x + width + textMargin + popupMargin) + " , " +
(y + (height / 2) - ((yRunning - (h - textMargin)) / 2)) +
")");
translateX = (x + width + textMargin + popupMargin);
translateY = (y + (height / 2) - ((yRunning - (h - textMargin)) / 2));
t.attr("transform", "translate(" + translateX + " , " + translateY + ")");
} else if (x - (textMargin + popupMargin + w) > 0) {
// Draw centre left
t.attr("transform", "translate(" +
(x - (textMargin + popupMargin + w)) + " , " +
(y + (height / 2) - ((yRunning - (h - textMargin)) / 2)) +
")");
} else if (y + height + yRunning + popupMargin + textMargin < parseFloat(chart.svg.attr("height"))) {
translateX = (x - (textMargin + popupMargin + w));
translateY = (y + (height / 2) - ((yRunning - (h - textMargin)) / 2));
t.attr("transform", "translate(" + translateX + " , " + translateY + ")");
} else if (y + height + yRunning + popupMargin + textMargin < parseFloat(chart.svg.node().getBBox().height)) {
// Draw centre below
translateX = (x + (width / 2) - (2 * textMargin + w) / 2);
translateY = (y + height + 2 * textMargin);
t.attr("transform", "translate(" +
(x + (width / 2) - (2 * textMargin + w) / 2) + " , " +
(y + height + 2 * textMargin) +
(translateX > 0 ? translateX : popupMargin) + " , " +
translateY +
")");
} else {
// Draw centre above
translateX = (x + (width / 2) - (2 * textMargin + w) / 2);
translateY = (y - yRunning - (h - textMargin));
t.attr("transform", "translate(" +
(x + (width / 2) - (2 * textMargin + w) / 2) + " , " +
(y - yRunning - (h - textMargin)) +
(translateX > 0 ? translateX : popupMargin) + " , " +
translateY +
")");
}
},
@ -3181,7 +3289,13 @@ var dimple = {
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", function (d) { return className + " bubble " + d.aggField.join(" ") + " " + d.xField.join(" ") + " " + d.yField.join(" ") + " " + d.zField.join(" "); })
.attr("class", function (d) {
return className + " bubble " +
d.aggField.join(" ").split(" ").join("_") + " " +
d.xField.join(" ").split(" ").join("_") + " " +
d.yField.join(" ").split(" ").join("_") + " " +
d.zField.join(" ").split(" ").join("_");
})
.attr("cx", function (d) {
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
})
@ -3342,7 +3456,8 @@ var dimple = {
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");
// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@ -3413,6 +3528,7 @@ var dimple = {
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
@ -3447,7 +3563,7 @@ var dimple = {
.style("opacity", 0.95);
// Shift the ring margin left or right depending on whether it will overlap the edge
overlap = cx + r + textMargin + popupMargin + w > parseFloat(chart.svg.attr("width"));
overlap = cx + r + textMargin + popupMargin + w > parseFloat(chart.svg.node().getBBox().width);
// Translate the shapes to the x position of the bubble (the x position of the shapes is handled)
t.attr("transform", "translate(" +
@ -3483,7 +3599,8 @@ var dimple = {
firstAgg = 1,
graded = false,
line,
markers;
markers,
markerBacks;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
@ -3533,7 +3650,7 @@ var dimple = {
series.shapes
.data(uniqueValues)
.transition().duration(duration)
.attr("class", function (d) { return "series line " + d.join("_").replace(" ", ""); })
.attr("class", function (d) { return "series line " + d.join("_").split(" ").join("_"); })
.attr("d", function (d) {
var seriesData = [];
data.forEach(function (r) {
@ -3574,35 +3691,65 @@ var dimple = {
}
});
// Add line markers.
markers = chart._group.selectAll(".markers")
.data(data)
.enter();
// Add a fully opaque white circle first so we don't see a ghost of the line
if (series.lineMarkers) {
markers.append("circle")
if (series._markerBacks === null || series._markerBacks === undefined) {
markerBacks = chart._group.selectAll(".markerBacks").data(data);
} else {
markerBacks = series._markerBacks.data(data, function (d) { return d.key; });
}
// Add
markerBacks
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", "markerBacks")
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 0)
.attr("fill", "white")
.attr("stroke", "none");
// Update
markerBacks
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.attr("fill", "white")
.attr("stroke", "none");
.attr("r", 2 + series.lineWeight);
// Remove
markerBacks
.exit()
.transition().duration(duration)
.attr("r", 0)
.each("end", function () {
d3.select(this).remove();
});
series._markerBacks = markerBacks;
}
// Deal with markers in the same way as main series to fix #28
if (series._markers === null || series._markers === undefined) {
markers = chart._group.selectAll(".markers").data(data);
} else {
markers = series._markers.data(data, function (d) { return d.key; });
}
// Add the actual marker. We need to do this even if we aren't displaying them because they
// catch hover events
markers.append("circle")
markers
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", "markers")
.on("mouseover", function (e) {
self.enterEventHandler(e, this, chart, series);
})
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.attr("r", 0)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
@ -3614,6 +3761,32 @@ var dimple = {
}
});
markers
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
markers
.exit()
.transition().duration(duration)
.attr("r", 0)
.each("end", function () {
d3.select(this).remove();
});
// Save the shapes to the series array
series._markers = markers;
// Deal with single point lines if there are no markers
if (!series.lineMarkers) {
chart._group.selectAll(".fill")
@ -3743,7 +3916,8 @@ var dimple = {
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");
// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@ -3814,6 +3988,7 @@ var dimple = {
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
@ -3848,7 +4023,7 @@ var dimple = {
.style("opacity", 0.95);
// Shift the ring margin left or right depending on whether it will overlap the edge
overlap = cx + r + textMargin + popupMargin + w > parseFloat(chart.svg.attr("width"));
overlap = cx + r + textMargin + popupMargin + w > parseFloat(chart.svg.node().getBBox().width);
// Translate the shapes to the x position of the bubble (the x position of the shapes is handled)
t.attr("transform", "translate(" +

6
dist/dimple.v1.1.6.min.js vendored
View File

File diff suppressed because one or more lines are too long

36
examples/advanced_bullet.html
View File

@ -13,7 +13,7 @@
// Add a bullet chart to the svg
function addBullet(x, y, height, width, measure, lowMark,
highMark, axisMax, compareField, keyVal,
highMark, compareField, keyVal,
compareVal, color) {
// This is a custom algorithm to lighten the passed color, I find I can't
@ -62,22 +62,12 @@
var bX = bullet.addMeasureAxis("x", "Value");
// Add a separate x axis for each measure, this is required
// where we want to do a series for each measure
var lX = bullet.addMeasureAxis("x", "Low Value");
var hX = bullet.addMeasureAxis("x", "High Value");
var cX = bullet.addMeasureAxis("x", "Compare Value");
// Fix all max values so that a single x axis will read correctly
// for all 4. Without this all axes would scale differently
bX.overrideMax = axisMax;
lX.overrideMax = axisMax;
hX.overrideMax = axisMax;
cX.overrideMax = axisMax;
// Hide the additional axes
lX.hidden = true;
hX.hidden = true;
cX.hidden = true;
// where we want to do a series for each measure. By passing
// another axis in place of the position we combine them to create
// a 4 measure composite.
var lX = bullet.addMeasureAxis(bX, "Low Value");
var hX = bullet.addMeasureAxis(bX, "High Value");
var cX = bullet.addMeasureAxis(bX, "Compare Value");
// Add a series for the marks first (the order defines)
// document z position - first at back, last on top
@ -119,17 +109,17 @@
// means to determine axis bounds would be better but I don't want to
// bloat this example.
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
3000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
"Owner", "Aperture", "Black Mesa", "#FB8072");
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
"Owner", "Aperture", "Black Mesa", "#FB8072");
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
"Owner", "Aperture", "Black Mesa", "#80B1D3");
});
</script>

118
examples/advanced_change_bubbles.html
View File

@ -6,23 +6,23 @@
<script src="/dist/dimple.v1.1.5.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
d3.tsv("/data/example_data.tsv", function (data) {
// Reduce the number of owners as this chart can get a bit busy
data = dimple.filterData(data, "Owner", [
"Stark Ind",
"MomCorp",
"Rekall",
"Wayne Ent"]);
// Reduce the number of owners as this chart can get a bit busy
data = dimple.filterData(data, "Owner", [
"Stark Ind",
"MomCorp",
"Rekall",
"Wayne Ent"]);
var series,
// Set a background and foreground chart
charts = [
new dimple.chart(svg, null),
new dimple.chart(svg, data)
],
lastDate = null,
owners = dimple.getUniqueValues(data, "Owner");
var series,
// Set a background and foreground chart
charts = [
new dimple.chart(svg, null),
new dimple.chart(svg, data)
],
lastDate = null,
owners = dimple.getUniqueValues(data, "Owner");
// Define 2 nearly identical charts. It's essential
// for this that the max and minimum values are fixed
@ -49,52 +49,52 @@
charts[0].defaultColors[k].fill,
"white",
(i === 0 ? 0.3 : 1));
}, this);
}, this);
}, this);
// Define a storyboard on the main chart, this will iterate
// all dates and redraw for each, the callback will build the
// the background chart
charts[1].setStoryboard("Date", function (d) {
// Use the last date variable to manage the previous tick's data
if (lastDate !== null) {
// Pull the previous data
var lastData = dimple.filterData(data, "Date", lastDate);
// Add a series to the background chart to display old position
var lastSeries = charts[0].addSeries("Owner", dimple.plot.bubble);
// Average suits these measures better
lastSeries.aggregate = dimple.aggregateMethod.avg;
// Give each series its own data at different periods
lastSeries.data = lastData;
// Draw the background chart
charts[0].draw();
// Class all shapes as .historic
lastSeries.shapes.attr("class", "historic");
// Reduce all opacity and remove once opacity drops below 5%
d3.selectAll(".historic")
.each(function () {
var shape = d3.select(this);
var opacity = shape.style("opacity") - 0.02;
if (opacity < 0.1) {
shape.remove();
} else {
shape.style("opacity", opacity);
// Define a storyboard on the main chart, this will iterate
// all dates and redraw for each, the callback will build the
// the background chart
charts[1].setStoryboard("Date", function (d) {
// Use the last date variable to manage the previous tick's data
if (lastDate !== null) {
// Pull the previous data
var lastData = dimple.filterData(data, "Date", lastDate);
// Add a series to the background chart to display old position
var lastSeries = charts[0].addSeries("Owner", dimple.plot.bubble);
// Average suits these measures better
lastSeries.aggregate = dimple.aggregateMethod.avg;
// Give each series its own data at different periods
lastSeries.data = lastData;
// Draw the background chart
charts[0].draw();
// Class all shapes as .historic
lastSeries.shapes.attr("class", "historic");
// Reduce all opacity and remove once opacity drops below 5%
d3.selectAll(".historic")
.each(function () {
var shape = d3.select(this),
opacity = shape.style("opacity") - 0.02;
if (opacity < 0.1) {
shape.remove();
} else {
shape.style("opacity", opacity);
}
});
}
});
}
lastDate = d;
lastDate = d;
});
// Add the primary series to the main chart
series = charts[1].addSeries("Owner", dimple.plot.bubble)
series.aggregate = dimple.aggregateMethod.avg;
// Draw the main chart
charts[1].draw();
// Add some border weight to the main series so it separates a bit from
// the former period shadows
d3.selectAll("circle").style("stroke-width", 2);
});
// Add the primary series to the main chart
series = charts[1].addSeries("Owner", dimple.plot.bubble)
series.aggregate = dimple.aggregateMethod.avg;
// Draw the main chart
charts[1].draw();
// Add some border weight to the main series so it separates a bit from
// the former period shadows
d3.selectAll("circle").style("stroke-width", 2);
});
</script>
</script>
</div>

2
examples/advanced_christmas_tree.html
View File

@ -3,7 +3,7 @@
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script src="/dist/dimple.v1.1.6.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);