blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added multiBar and stackedAreaChart to makefile, and minified. A few random fixes in a few core models

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 0fafafbc79
commit 0f7a531784
9 changed files with 835 additions and 95 deletions
Show Stats Download Patch File Download Diff File

3
Makefile
Unescape Escape View File

@ -5,6 +5,7 @@ JS_FILES = \
src/utils.js \
src/models/axis.js \
src/models/bar.js \
src/models/historicalBar.js \
src/models/bullet.js \
src/models/cumulativeLine.js \
src/models/legend.js \
@ -12,6 +13,7 @@ JS_FILES = \
src/models/linePlusBar.js \
src/models/lineWithFocus.js \
src/models/lineWithLegend.js \
src/models/multiBar.js \
src/models/pie.js \
src/models/scatter.js \
src/models/scatterWithLegend.js \
@ -22,6 +24,7 @@ JS_FILES = \
src/charts/cumulativeLineChartDaily.js \
src/charts/lineChart.js \
src/charts/lineChartDaily.js \
src/charts/stackedAreaChart.js \
src/outro.js
JS_COMPILER = \

1
examples/miltiBar.html
Unescape Escape View File

@ -46,6 +46,7 @@ nv.addGraph({
var chart = nv.models.multiBar()
.width(width)
.height(height)
.stacked(false)
var svg = d3.select('#test1 svg')

822
nv.d3.js
View File

File diff suppressed because it is too large Load Diff

5
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
src/models/line.js
Unescape Escape View File

@ -84,8 +84,8 @@ nv.models.line = function() {
groups
.attr('class', function(d,i) { return 'group series-' + i })
.classed('hover', function(d) { return d.hover })
.style('fill', function(d,i){ return color[i % 10] })
.style('stroke', function(d,i){ return color[i % 10] })
.style('fill', function(d,i){ return color[i % 20] })
.style('stroke', function(d,i){ return color[i % 20] })
d3.transition(groups)
.style('stroke-opacity', 1)
.style('fill-opacity', .5)
@ -205,6 +205,7 @@ nv.models.line = function() {
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;
scatter.clipEdge(_);
return chart;
};

37
src/models/lineWithFocus.js
Unescape Escape View File

@ -33,31 +33,34 @@ nv.models.lineWithFocus = function() {
function chart(selection) {
selection.each(function(data) {
seriesData = data.filter(function(d) { return !d.disabled })
.map(function(d) { return d.values });
var seriesData = data.filter(function(d) { return !d.disabled })
.map(function(d) { return d.values }),
availableWidth = width - margin.left - margin.right,
availableHeight1 = height1 - margin.top - margin.bottom,
availableHeight2 = height2 - margin2.top - margin2.bottom;
x2 .domain(d3.extent(d3.merge(seriesData), getX ))
.range([0, width - margin.left - margin.right]);
.range([0, availableWidth]);
y2 .domain(d3.extent(d3.merge(seriesData), getY ))
.range([height2 - margin2.top - margin2.bottom, 0]);
.range([availableHeight2, 0]);
x .domain(brush.empty() ? x2.domain() : brush.extent())
.range([0, width - margin.left - margin.right]);
.range([0, availableWidth]);
y .domain(y2.domain())
.range([height1 - margin.top - margin.bottom, 0]);
.range([availableHeight1, 0]);
brush.on('brush', onBrush);
focus
.width(width - margin.left - margin.right)
.height(height1 - margin.top - margin.bottom)
.width(availableWidth)
.height(availableHeight1)
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }))
context
.width(width - margin.left - margin.right)
.height(height2 - margin2.top - margin2.bottom)
.width(availableWidth)
.height(availableHeight2)
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }))
@ -87,7 +90,7 @@ nv.models.lineWithFocus = function() {
g.select('.legendWrap')
.datum(data)
.attr('transform', 'translate(' + (width/2 - margin.left) + ',0)')
.attr('transform', 'translate(' + (availableWidth / 2) + ',0)')
.call(legend);
@ -117,7 +120,7 @@ nv.models.lineWithFocus = function() {
.domain(x.domain())
.range(x.range())
.ticks( width / 100 )
.tickSize(-(height1 - margin.top - margin.bottom), 0);
.tickSize(-(availableHeight1), 0);
focusWrap.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
@ -128,7 +131,7 @@ nv.models.lineWithFocus = function() {
.domain(y.domain())
.range(y.range())
.ticks( height / 36 )
.tickSize(-(width - margin.right - margin.left), 0);
.tickSize(-(availableWidth), 0);
d3.transition(g.select('.y.axis'))
.call(yAxis);
@ -161,7 +164,7 @@ nv.models.lineWithFocus = function() {
.domain(x2.domain())
.range(x2.range())
.ticks( width / 100 )
.tickSize(-(height2 - margin2.top - margin2.bottom), 0);
.tickSize(-(availableHeight2), 0);
contextWrap.select('.x2.axis')
.attr('transform', 'translate(0,' + y2.range()[0] + ')');
@ -172,8 +175,8 @@ nv.models.lineWithFocus = function() {
yAxis2
.domain(y2.domain())
.range(y2.range())
.ticks( (height2 - margin2.top - margin2.bottom) / 24 )
.tickSize(-(width - margin2.right - margin2.left), 0);
.ticks( availableHeight2 / 24 )
.tickSize(-(availableWidth), 0);
contextWrap.select('.y2.axis');
@ -254,7 +257,7 @@ nv.models.lineWithFocus = function() {
// Need to figure out an optimized way to accomplish this.
// ***One concern is to try not to make the assumption that all lines are of the same length, and
// points with the same index have the same x value (while this is true in our test cases, may
// no always be)
// not always be)
focus.xDomain(x.domain());
focus.yDomain(y.domain());

45
src/models/multiBar.js
Unescape Escape View File

@ -1,9 +1,4 @@
/***
* Creating a separate bar chart for historical view of a single series
* this will likely be merged into the bar representation, just developing
* it separately to not interfere with the regular bar model
*/
nv.models.multiBar = function() {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960,
@ -19,7 +14,7 @@ nv.models.multiBar = function() {
xDomain, yDomain;
//var x = d3.scale.linear(),
var x = d3.scale.ordinal(),
var x = d3.scale.ordinal(), //TODO: Need to figure out how to use axis model with ordinal scale
y = d3.scale.linear(),
xAxis = d3.svg.axis().scale(x).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left'),
@ -38,10 +33,20 @@ nv.models.multiBar = function() {
availableHeight = height - margin.top - margin.bottom;
//var stackedData = d3.layout.stack()
if (stacked) {
data = d3.layout.stack()
.offset('zero')
.values(function(d){ return d.values })
.y(getY)
(data);
}
//x .domain(xDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.x }).concat(forceX)))
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
//x .domain(seriesData[0].map(function(d) { return d.x }))
.rangeRoundBands([0, availableWidth], .2);
.rangeRoundBands([0, availableWidth], .1);
//.range([0, availableWidth]);
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)))
@ -83,7 +88,9 @@ nv.models.multiBar = function() {
.style('stroke-opacity', 1e-6)
.style('fill-opacity', 1e-6)
.attr('transform', function(d,i) {
return 'translate(' + (i * x.rangeBand(.9) / data.length ) + ',0)'
return stacked ?
'translate(0,0)'
: 'translate(' + (i * x.rangeBand(.9) / data.length ) + ',0)'
});
d3.transition(groups.exit())
.style('stroke-opacity', 1e-6)
@ -96,7 +103,9 @@ nv.models.multiBar = function() {
.style('stroke', function(d,i){ return color[i % 10] });
d3.transition(groups)
.attr('transform', function(d,i) {
return 'translate(' + (i * x.rangeBand(.9) / data.length ) + ',0)'
return stacked ?
'translate(0,0)'
: 'translate(' + (i * x.rangeBand(.9) / data.length ) + ',0)'
})
.style('stroke-opacity', 1)
.style('fill-opacity', .5);
@ -167,10 +176,16 @@ nv.models.multiBar = function() {
//.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - x(.5)) + ',0)'; })
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
//.attr('width', x(.9) / data.length ) //TODO: this should not assume that each consecutive bar x = x + 1
.attr('width', x.rangeBand() / data.length )
.attr('width', x.rangeBand() / (stacked ? 1 : data.length) )
d3.transition(bars)
.attr('y', function(d,i) { return y(Math.max(0, getY(d,i))) })
.attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) });
.attr('y', function(d,i) { return stacked ?
y(Math.max(0, d.y + d.y0))
: y(Math.max(0, getY(d,i)))
})
.attr('height', function(d,i) { return stacked ?
Math.abs(y(d.y) - y(0))
: Math.abs(y(getY(d,i)) - y(0))
});
});
@ -240,6 +255,12 @@ nv.models.multiBar = function() {
return chart;
};
chart.stacked = function(_) {
if (!arguments.length) return stacked;
stacked = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;

4
src/models/scatter.js
Unescape Escape View File

@ -203,8 +203,8 @@ nv.models.scatter = function() {
.attr('class', function(d,i) { return 'group series-' + i })
.classed('hover', function(d) { return d.hover && !d.disabled });
d3.transition(groups)
.style('fill', function(d,i) { return color[i % 10] })
.style('stroke', function(d,i) { return color[i % 10] })
.style('fill', function(d,i) { return color[i % 20] })
.style('stroke', function(d,i) { return color[i % 20] })
.style('stroke-opacity', 1)
.style('fill-opacity', .5);

8
src/models/stackedArea.js
Unescape Escape View File

@ -37,7 +37,7 @@ nv.models.stackedArea = function() {
selection.each(function(data) {
// Need to leave data alone to switch between stacked, stream, and expanded
var dataCopy = JSON.parse(JSON.stringify(data)),
seriesData = dataCopy.map(function(d) {
seriesData = dataCopy.map(function(d) { //TODO: series data is barely used, can probably remove this pretty easily
return d.values.map(function(d,i) {
return { x: getX(d,i), y: getY(d,i) }
})
@ -103,7 +103,7 @@ nv.models.stackedArea = function() {
.x(getX)
.y(function(d) { return d.y + d.y0 }) // TODO: allow for getY to be other than d.y
.color(data.map(function(d,i) {
return d.color || color[i % 10];
return d.color || color[i % 20];
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.append('g').attr('class', 'scatterWrap');
@ -165,8 +165,8 @@ nv.models.stackedArea = function() {
.attr('d', function(d,i) { return zeroArea(d.values,i) })
.remove();
path
.style('fill', function(d,i){ return color[i % 10] })
.style('stroke', function(d,i){ return color[i % 10] });
.style('fill', function(d,i){ return color[i % 20] })
.style('stroke', function(d,i){ return color[i % 20] });
d3.transition(path)
.attr('d', function(d,i) { return area(d.values,i) })

Write Preview
Loading…
Cancel
Save