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})
.size(function(d) { return d.z })
//.interactive(false)
.fisheye(true)
d3.select('#test1')

163
nv.d3.js
Unescape Escape View File

@ -7651,18 +7651,23 @@ nv.models.scatterChart = function() {
// 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
, height = null
, color = nv.utils.defaultColor()
//x = scatter.xScale(),
, x = d3.fisheye.scale(d3.scale.linear).distortion(0)
//y = scatter.yScale(),
, y = d3.fisheye.scale(d3.scale.linear).distortion(0)
, x = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
, y = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
, showDistX = false
, showDistY = false
, showLegend = true
, showControls = true
, showControls = !!d3.fisheye
, fisheye = 0
, pauseFisheye = false
, tooltips = true
@ -7670,17 +7675,30 @@ nv.models.scatterChart = function() {
, tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' }
//, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' }
, 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')
, 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;
//------------------------------------------------------------
// Show noData message if there is no data
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
container.append('text')
.attr('class', 'nvd3 nv-noData')
@ -7741,6 +7762,9 @@ nv.models.scatterChart = function() {
container.select('.nv-noData').remove();
}
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
@ -7776,6 +7800,9 @@ nv.models.scatterChart = function() {
//------------------------------------------------------------
//------------------------------------------------------------
// Legend
if (showLegend) {
legend.width( availableWidth / 2 );
@ -7793,6 +7820,11 @@ nv.models.scatterChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
}
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) {
controls.width(180).color(['#444']);
@ -7802,10 +7834,11 @@ nv.models.scatterChart = function() {
.call(controls);
}
//------------------------------------------------------------
g.select('.nv-background')
.attr('width', availableWidth)
.attr('height', availableHeight);
//------------------------------------------------------------
// Main Chart Component(s)
scatter
@ -7819,6 +7852,11 @@ nv.models.scatterChart = function() {
.datum(data.filter(function(d) { return !d.disabled }))
.call(scatter);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis
.scale(x)
@ -7838,43 +7876,55 @@ nv.models.scatterChart = function() {
g.select('.nv-y.nv-axis')
.call(yAxis);
if(showDistX){
distX
.getData(scatter.x())
.scale(x)
.width(availableWidth)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionX')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-distributionX')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distX);
}
if(showDistY){
distY
.getData(scatter.y())
.scale(y)
.width(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionY')
.attr('transform', 'translate(-' + distY.size() + ',0)');
g.select('.nv-distributionY')
.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 (showDistX) {
distX
.getData(scatter.x())
.scale(x)
.width(availableWidth)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionX')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-distributionX')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distX);
}
if (showDistY) {
distY
.getData(scatter.y())
.scale(y)
.width(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionY')
.attr('transform', 'translate(-' + distY.size() + ',0)');
g.select('.nv-distributionY')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distY);
}
//------------------------------------------------------------
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() {
@ -7969,6 +8019,8 @@ nv.models.scatterChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
//============================================================
//store old scales for use in transitions on update
x0 = x.copy();
@ -8000,14 +8052,17 @@ nv.models.scatterChart = function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.legend = legend;
chart.controls = legend;
chart.controls = controls;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
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
//------------------------------------------------------------
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
, height = null
, color = nv.utils.defaultColor()
//x = scatter.xScale(),
, x = d3.fisheye.scale(d3.scale.linear).distortion(0)
//y = scatter.yScale(),
, y = d3.fisheye.scale(d3.scale.linear).distortion(0)
, x = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
, y = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
, showDistX = false
, showDistY = false
, showLegend = true
, showControls = true
, showControls = !!d3.fisheye
, fisheye = 0
, pauseFisheye = false
, tooltips = true
@ -24,17 +29,30 @@ nv.models.scatterChart = function() {
, tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' }
//, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' }
, 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')
, 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;
//------------------------------------------------------------
// Show noData message if there is no data
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
container.append('text')
.attr('class', 'nvd3 nv-noData')
@ -95,6 +116,9 @@ nv.models.scatterChart = function() {
container.select('.nv-noData').remove();
}
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
@ -130,6 +154,9 @@ nv.models.scatterChart = function() {
//------------------------------------------------------------
//------------------------------------------------------------
// Legend
if (showLegend) {
legend.width( availableWidth / 2 );
@ -147,6 +174,11 @@ nv.models.scatterChart = function() {
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
}
//------------------------------------------------------------
//------------------------------------------------------------
// Controls
if (showControls) {
controls.width(180).color(['#444']);
@ -156,10 +188,11 @@ nv.models.scatterChart = function() {
.call(controls);
}
//------------------------------------------------------------
g.select('.nv-background')
.attr('width', availableWidth)
.attr('height', availableHeight);
//------------------------------------------------------------
// Main Chart Component(s)
scatter
@ -173,6 +206,11 @@ nv.models.scatterChart = function() {
.datum(data.filter(function(d) { return !d.disabled }))
.call(scatter);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
xAxis
.scale(x)
@ -192,43 +230,55 @@ nv.models.scatterChart = function() {
g.select('.nv-y.nv-axis')
.call(yAxis);
if(showDistX){
distX
.getData(scatter.x())
.scale(x)
.width(availableWidth)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionX')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-distributionX')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distX);
}
if(showDistY){
distY
.getData(scatter.y())
.scale(y)
.width(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionY')
.attr('transform', 'translate(-' + distY.size() + ',0)');
g.select('.nv-distributionY')
.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 (showDistX) {
distX
.getData(scatter.x())
.scale(x)
.width(availableWidth)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionX')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-distributionX')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distX);
}
if (showDistY) {
distY
.getData(scatter.y())
.scale(y)
.width(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
gEnter.select('.nv-distWrap').append('g')
.attr('class', 'nv-distributionY')
.attr('transform', 'translate(-' + distY.size() + ',0)');
g.select('.nv-distributionY')
.datum(data.filter(function(d) { return !d.disabled }))
.call(distY);
}
//------------------------------------------------------------
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() {
@ -323,6 +373,8 @@ nv.models.scatterChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
//============================================================
//store old scales for use in transitions on update
x0 = x.copy();
@ -354,14 +406,17 @@ nv.models.scatterChart = function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.legend = legend;
chart.controls = legend;
chart.controls = controls;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
chart.distX = distX;

Write Preview
Loading…
Cancel
Save