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

Issue #68 updated scatterChart model to standard format

Browse Source
master-patched
Bob Monteverde 12 years ago
parent e767359018
commit 5f95ee7a95
4 changed files with 219 additions and 110 deletions
Show Stats Download Patch File Download Diff File

1
examples/scatter.html
Unescape Escape View File

@ -32,7 +32,6 @@ nv.addGraph({
.margin({top: 20, right: 20, bottom: 20, left: 20}) .margin({top: 20, right: 20, bottom: 20, left: 20})
.size(function(d) { return d.z }) .size(function(d) { return d.z })
//.interactive(false) //.interactive(false)
.fisheye(true)
d3.select('#test1') d3.select('#test1')

163
nv.d3.js
Unescape Escape View File

@ -7651,18 +7651,23 @@ nv.models.scatterChart = function() {
// Public Variables with Default Settings // Public Variables with Default Settings
//------------------------------------------------------------ //------------------------------------------------------------
var margin = {top: 30, right: 20, bottom: 50, left: 60} var scatter = nv.models.scatter()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
, distX = nv.models.distribution()
, distY = nv.models.distribution()
, margin = {top: 30, right: 20, bottom: 50, left: 60}
, width = null , width = null
, height = null , height = null
, color = nv.utils.defaultColor() , color = nv.utils.defaultColor()
//x = scatter.xScale(), , x = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
, x = d3.fisheye.scale(d3.scale.linear).distortion(0) , y = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
//y = scatter.yScale(),
, y = d3.fisheye.scale(d3.scale.linear).distortion(0)
, showDistX = false , showDistX = false
, showDistY = false , showDistY = false
, showLegend = true , showLegend = true
, showControls = true , showControls = !!d3.fisheye
, fisheye = 0 , fisheye = 0
, pauseFisheye = false , pauseFisheye = false
, tooltips = true , tooltips = true
@ -7670,17 +7675,30 @@ nv.models.scatterChart = function() {
, tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' } , tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' }
//, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' } //, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' }
, tooltip = null , tooltip = null
, scatter = nv.models.scatter().xScale(x).yScale(y)
, xAxis = nv.models.axis().orient('bottom').tickPadding(10)
, yAxis = nv.models.axis().orient('left').tickPadding(10)
, legend = nv.models.legend().height(30)
, controls = nv.models.legend().height(30)
, distX = nv.models.distribution().axis('x')
, distY = nv.models.distribution().axis('y')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide') , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, noData = "No Data Available." , noData = "No Data Available."
; ;
// Setup sub-components
scatter
.xScale(x)
.yScale(y)
;
xAxis
.orient('bottom')
.tickPadding(10)
;
yAxis
.orient('left')
.tickPadding(10)
;
distX
.axis('x')
;
distY
.axis('y')
;
//============================================================ //============================================================
@ -7728,6 +7746,9 @@ nv.models.scatterChart = function() {
- margin.top - margin.bottom; - margin.top - margin.bottom;
//------------------------------------------------------------
// Show noData message if there is no data
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) { if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
container.append('text') container.append('text')
.attr('class', 'nvd3 nv-noData') .attr('class', 'nvd3 nv-noData')
@ -7741,6 +7762,9 @@ nv.models.scatterChart = function() {
container.select('.nv-noData').remove(); container.select('.nv-noData').remove();
} }
//------------------------------------------------------------
//------------------------------------------------------------ //------------------------------------------------------------
// Setup Scales // Setup Scales
@ -7776,6 +7800,9 @@ nv.models.scatterChart = function() {
//------------------------------------------------------------ //------------------------------------------------------------
//------------------------------------------------------------
// Legend
if (showLegend) { if (showLegend) {
legend.width( availableWidth / 2 ); legend.width( availableWidth / 2 );
@ -7793,6 +7820,11 @@ nv.models.scatterChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')'); .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
} }
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) { if (showControls) {
controls.width(180).color(['#444']); controls.width(180).color(['#444']);
@ -7802,10 +7834,11 @@ nv.models.scatterChart = function() {
.call(controls); .call(controls);
} }
//------------------------------------------------------------
g.select('.nv-background')
.attr('width', availableWidth) //------------------------------------------------------------
.attr('height', availableHeight); // Main Chart Component(s)
scatter scatter
@ -7819,6 +7852,11 @@ nv.models.scatterChart = function() {
.datum(data.filter(function(d) { return !d.disabled })) .datum(data.filter(function(d) { return !d.disabled }))
.call(scatter); .call(scatter);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis xAxis
.scale(x) .scale(x)
@ -7838,43 +7876,55 @@ nv.models.scatterChart = function() {
g.select('.nv-y.nv-axis') g.select('.nv-y.nv-axis')
.call(yAxis); .call(yAxis);
if(showDistX){
distX if (showDistX) {
.getData(scatter.x()) distX
.scale(x) .getData(scatter.x())
.width(availableWidth) .scale(x)
.color(data.map(function(d,i) { .width(availableWidth)
return d.color || color(d, i); .color(data.map(function(d,i) {
}).filter(function(d,i) { return !data[i].disabled })); return d.color || color(d, i);
gEnter.select('.nv-distWrap').append('g') }).filter(function(d,i) { return !data[i].disabled }));
.attr('class', 'nv-distributionX') gEnter.select('.nv-distWrap').append('g')
.attr('transform', 'translate(0,' + y.range()[0] + ')'); .attr('class', 'nv-distributionX')
g.select('.nv-distributionX') .attr('transform', 'translate(0,' + y.range()[0] + ')');
.datum(data.filter(function(d) { return !d.disabled })) g.select('.nv-distributionX')
.call(distX); .datum(data.filter(function(d) { return !d.disabled }))
} .call(distX);
}
if(showDistY){
distY if (showDistY) {
.getData(scatter.y()) distY
.scale(y) .getData(scatter.y())
.width(availableHeight) .scale(y)
.color(data.map(function(d,i) { .width(availableHeight)
return d.color || color(d, i); .color(data.map(function(d,i) {
}).filter(function(d,i) { return !data[i].disabled })); return d.color || color(d, i);
gEnter.select('.nv-distWrap').append('g') }).filter(function(d,i) { return !data[i].disabled }));
.attr('class', 'nv-distributionY') gEnter.select('.nv-distWrap').append('g')
.attr('transform', 'translate(-' + distY.size() + ',0)'); .attr('class', 'nv-distributionY')
g.select('.nv-distributionY') .attr('transform', 'translate(-' + distY.size() + ',0)');
.datum(data.filter(function(d) { return !d.disabled })) g.select('.nv-distributionY')
.call(distY); .datum(data.filter(function(d) { return !d.disabled }))
} .call(distY);
}
g.select('.nv-background').on('mousemove', updateFisheye);
g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;}); //------------------------------------------------------------
scatter.dispatch.on('elementClick.freezeFisheye', function() {
pauseFisheye = !pauseFisheye;
});
if (d3.fisheye) {
g.select('.nv-background')
.attr('width', availableWidth)
.attr('height', availableHeight);
g.select('.nv-background').on('mousemove', updateFisheye);
g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;});
scatter.dispatch.on('elementClick.freezeFisheye', function() {
pauseFisheye = !pauseFisheye;
});
}
function updateFisheye() { function updateFisheye() {
@ -7969,6 +8019,8 @@ nv.models.scatterChart = function() {
if (tooltips) showTooltip(e, that.parentNode); if (tooltips) showTooltip(e, that.parentNode);
}); });
//============================================================
//store old scales for use in transitions on update //store old scales for use in transitions on update
x0 = x.copy(); x0 = x.copy();
@ -8000,14 +8052,17 @@ nv.models.scatterChart = function() {
if (tooltips) nv.tooltip.cleanup(); if (tooltips) nv.tooltip.cleanup();
}); });
//============================================================
//============================================================ //============================================================
// Expose Public Variables // Expose Public Variables
//------------------------------------------------------------ //------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch; chart.dispatch = dispatch;
chart.legend = legend; chart.legend = legend;
chart.controls = legend; chart.controls = controls;
chart.xAxis = xAxis; chart.xAxis = xAxis;
chart.yAxis = yAxis; chart.yAxis = yAxis;
chart.distX = distX; chart.distX = distX;

2
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

163
src/models/scatterChart.js
Unescape Escape View File

@ -5,18 +5,23 @@ nv.models.scatterChart = function() {
// Public Variables with Default Settings // Public Variables with Default Settings
//------------------------------------------------------------ //------------------------------------------------------------
var margin = {top: 30, right: 20, bottom: 50, left: 60} var scatter = nv.models.scatter()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
, distX = nv.models.distribution()
, distY = nv.models.distribution()
, margin = {top: 30, right: 20, bottom: 50, left: 60}
, width = null , width = null
, height = null , height = null
, color = nv.utils.defaultColor() , color = nv.utils.defaultColor()
//x = scatter.xScale(), , x = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
, x = d3.fisheye.scale(d3.scale.linear).distortion(0) , y = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
//y = scatter.yScale(),
, y = d3.fisheye.scale(d3.scale.linear).distortion(0)
, showDistX = false , showDistX = false
, showDistY = false , showDistY = false
, showLegend = true , showLegend = true
, showControls = true , showControls = !!d3.fisheye
, fisheye = 0 , fisheye = 0
, pauseFisheye = false , pauseFisheye = false
, tooltips = true , tooltips = true
@ -24,17 +29,30 @@ nv.models.scatterChart = function() {
, tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' } , tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' }
//, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' } //, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' }
, tooltip = null , tooltip = null
, scatter = nv.models.scatter().xScale(x).yScale(y)
, xAxis = nv.models.axis().orient('bottom').tickPadding(10)
, yAxis = nv.models.axis().orient('left').tickPadding(10)
, legend = nv.models.legend().height(30)
, controls = nv.models.legend().height(30)
, distX = nv.models.distribution().axis('x')
, distY = nv.models.distribution().axis('y')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide') , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, noData = "No Data Available." , noData = "No Data Available."
; ;
// Setup sub-components
scatter
.xScale(x)
.yScale(y)
;
xAxis
.orient('bottom')
.tickPadding(10)
;
yAxis
.orient('left')
.tickPadding(10)
;
distX
.axis('x')
;
distY
.axis('y')
;
//============================================================ //============================================================
@ -82,6 +100,9 @@ nv.models.scatterChart = function() {
- margin.top - margin.bottom; - margin.top - margin.bottom;
//------------------------------------------------------------
// Show noData message if there is no data
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) { if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
container.append('text') container.append('text')
.attr('class', 'nvd3 nv-noData') .attr('class', 'nvd3 nv-noData')
@ -95,6 +116,9 @@ nv.models.scatterChart = function() {
container.select('.nv-noData').remove(); container.select('.nv-noData').remove();
} }
//------------------------------------------------------------
//------------------------------------------------------------ //------------------------------------------------------------
// Setup Scales // Setup Scales
@ -130,6 +154,9 @@ nv.models.scatterChart = function() {
//------------------------------------------------------------ //------------------------------------------------------------
//------------------------------------------------------------
// Legend
if (showLegend) { if (showLegend) {
legend.width( availableWidth / 2 ); legend.width( availableWidth / 2 );
@ -147,6 +174,11 @@ nv.models.scatterChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')'); .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
} }
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) { if (showControls) {
controls.width(180).color(['#444']); controls.width(180).color(['#444']);
@ -156,10 +188,11 @@ nv.models.scatterChart = function() {
.call(controls); .call(controls);
} }
//------------------------------------------------------------
g.select('.nv-background') //------------------------------------------------------------
.attr('width', availableWidth) // Main Chart Component(s)
.attr('height', availableHeight);
scatter scatter
@ -173,6 +206,11 @@ nv.models.scatterChart = function() {
.datum(data.filter(function(d) { return !d.disabled })) .datum(data.filter(function(d) { return !d.disabled }))
.call(scatter); .call(scatter);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis xAxis
.scale(x) .scale(x)
@ -192,43 +230,55 @@ nv.models.scatterChart = function() {
g.select('.nv-y.nv-axis') g.select('.nv-y.nv-axis')
.call(yAxis); .call(yAxis);
if(showDistX){
distX if (showDistX) {
.getData(scatter.x()) distX
.scale(x) .getData(scatter.x())
.width(availableWidth) .scale(x)
.color(data.map(function(d,i) { .width(availableWidth)
return d.color || color(d, i); .color(data.map(function(d,i) {
}).filter(function(d,i) { return !data[i].disabled })); return d.color || color(d, i);
gEnter.select('.nv-distWrap').append('g') }).filter(function(d,i) { return !data[i].disabled }));
.attr('class', 'nv-distributionX') gEnter.select('.nv-distWrap').append('g')
.attr('transform', 'translate(0,' + y.range()[0] + ')'); .attr('class', 'nv-distributionX')
g.select('.nv-distributionX') .attr('transform', 'translate(0,' + y.range()[0] + ')');
.datum(data.filter(function(d) { return !d.disabled })) g.select('.nv-distributionX')
.call(distX); .datum(data.filter(function(d) { return !d.disabled }))
} .call(distX);
}
if(showDistY){
distY if (showDistY) {
.getData(scatter.y()) distY
.scale(y) .getData(scatter.y())
.width(availableHeight) .scale(y)
.color(data.map(function(d,i) { .width(availableHeight)
return d.color || color(d, i); .color(data.map(function(d,i) {
}).filter(function(d,i) { return !data[i].disabled })); return d.color || color(d, i);
gEnter.select('.nv-distWrap').append('g') }).filter(function(d,i) { return !data[i].disabled }));
.attr('class', 'nv-distributionY') gEnter.select('.nv-distWrap').append('g')
.attr('transform', 'translate(-' + distY.size() + ',0)'); .attr('class', 'nv-distributionY')
g.select('.nv-distributionY') .attr('transform', 'translate(-' + distY.size() + ',0)');
.datum(data.filter(function(d) { return !d.disabled })) g.select('.nv-distributionY')
.call(distY); .datum(data.filter(function(d) { return !d.disabled }))
} .call(distY);
}
g.select('.nv-background').on('mousemove', updateFisheye);
g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;}); //------------------------------------------------------------
scatter.dispatch.on('elementClick.freezeFisheye', function() {
pauseFisheye = !pauseFisheye;
});
if (d3.fisheye) {
g.select('.nv-background')
.attr('width', availableWidth)
.attr('height', availableHeight);
g.select('.nv-background').on('mousemove', updateFisheye);
g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;});
scatter.dispatch.on('elementClick.freezeFisheye', function() {
pauseFisheye = !pauseFisheye;
});
}
function updateFisheye() { function updateFisheye() {
@ -323,6 +373,8 @@ nv.models.scatterChart = function() {
if (tooltips) showTooltip(e, that.parentNode); if (tooltips) showTooltip(e, that.parentNode);
}); });
//============================================================
//store old scales for use in transitions on update //store old scales for use in transitions on update
x0 = x.copy(); x0 = x.copy();
@ -354,14 +406,17 @@ nv.models.scatterChart = function() {
if (tooltips) nv.tooltip.cleanup(); if (tooltips) nv.tooltip.cleanup();
}); });
//============================================================
//============================================================ //============================================================
// Expose Public Variables // Expose Public Variables
//------------------------------------------------------------ //------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch; chart.dispatch = dispatch;
chart.legend = legend; chart.legend = legend;
chart.controls = legend; chart.controls = controls;
chart.xAxis = xAxis; chart.xAxis = xAxis;
chart.yAxis = yAxis; chart.yAxis = yAxis;
chart.distX = distX; chart.distX = distX;

Write Preview
Loading…
Cancel
Save