From 38488db11fe299933c49751e17139f8297363ef6 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Thu, 28 Jul 2016 17:26:47 -0400 Subject: [PATCH 1/9] padding --- web/examples/align-axes.html | 1 + 1 file changed, 1 insertion(+) diff --git a/web/examples/align-axes.html b/web/examples/align-axes.html index 7198275ce..1662d683e 100644 --- a/web/examples/align-axes.html +++ b/web/examples/align-axes.html @@ -16,6 +16,7 @@ #hscroll { width: 100%; overflow: scroll; + padding-left: 20px; } #page { height: 95vh; From ece220838254a29d52fd456d0dcef8dd0beb4d29 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Thu, 28 Jul 2016 19:07:44 -0400 Subject: [PATCH 2/9] forward progression example --- web/transitions/area-progression.html | 73 +++++++++++++++++++++++++++ web/transitions/transition-test.js | 72 +++++++++++++++++++++++++- 2 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 web/transitions/area-progression.html diff --git a/web/transitions/area-progression.html b/web/transitions/area-progression.html new file mode 100644 index 000000000..eedbe135c --- /dev/null +++ b/web/transitions/area-progression.html @@ -0,0 +1,73 @@ + + + + dc.js - Area Progression Example + + + + + +
+ + +
+ + + + + + + + +
+ + diff --git a/web/transitions/transition-test.js b/web/transitions/transition-test.js index c15f2a543..f7ca64452 100644 --- a/web/transitions/transition-test.js +++ b/web/transitions/transition-test.js @@ -20,6 +20,7 @@ var transitionTest = (function() { if(isNaN(pause)) pause = 500; function stop() { window.clearInterval(inter); + inter = null; } function oscillate(f1, f2) { return function() { @@ -36,11 +37,80 @@ var transitionTest = (function() { }, duration+pause); }; } + // generate continuous data + function progression(N, initial) { + var _steps = 5, // number of data points to add each tick + _interval = 1, // distance in x between points + _magnitude = 1, // maximum change in y per observation + _reverse = false; // whether to regress instead of progress + var _data = []; + var rand = d3.random.normal(); + function startval() { // .fill() (when can we drop ie?) + var a = new Array(N); + for(var i = 0; i Date: Thu, 28 Jul 2016 19:19:01 -0400 Subject: [PATCH 3/9] reverse progression example --- web/transitions/area-progression.html | 15 +++++++++++---- web/transitions/transition-test.js | 14 ++++++++++---- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/web/transitions/area-progression.html b/web/transitions/area-progression.html index eedbe135c..66fab953f 100644 --- a/web/transitions/area-progression.html +++ b/web/transitions/area-progression.html @@ -13,6 +13,7 @@
+ @@ -58,10 +59,16 @@ all_stacks(); chart.render(); - var reset = function() { - chart.x().domain([1,20]); - } - window.button1 = progression.start; + window.button1 = function() { + progression + .reverse(false) + .start(); + }; + window.button2 = function() { + progression + .reverse(true) + .start(); + }; window.button4 = transitionTest.oscillate(function() { chart.group(progressGroup, '2', sel_stack('2')) .stack(progressGroup, '4', sel_stack('4')); diff --git a/web/transitions/transition-test.js b/web/transitions/transition-test.js index f7ca64452..dfd492089 100644 --- a/web/transitions/transition-test.js +++ b/web/transitions/transition-test.js @@ -53,15 +53,21 @@ var transitionTest = (function() { return a; } function drop() { - _data.splice(0, 1); + _data.splice(_reverse ? _data.length-1 : 0, 1); } function generate() { - var basis = _data.length ? _data[_data.length-1] : {key: 0, value: startval()}; - var obs = [], key = basis.key + _interval; + var basis = _data.length ? + _data[_reverse ? 0 : _data.length-1] : + {key: 0, value: startval()}; + var obs = [], key = basis.key + (_reverse ? -1 : 1) * _interval; for(var i = 0; i Date: Thu, 28 Jul 2016 19:20:12 -0400 Subject: [PATCH 4/9] indent --- web/transitions/area-progression.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/web/transitions/area-progression.html b/web/transitions/area-progression.html index 66fab953f..72ca110a9 100644 --- a/web/transitions/area-progression.html +++ b/web/transitions/area-progression.html @@ -39,17 +39,17 @@ doArea = transitionTest.querystring.area!=="0"; chart - .transitionDuration(transitionTest.duration) - .width(768) - .height(480) - .x(d3.scale.linear()) - .elasticX(true) - .elasticY(true) - .margins({left: 50, top: 10, right: 10, bottom: 20}) - .renderArea(doArea) - .brushOn(false) - .renderDataPoints(doDots) - .dimension(noDimension); + .transitionDuration(transitionTest.duration) + .width(768) + .height(480) + .x(d3.scale.linear()) + .elasticX(true) + .elasticY(true) + .margins({left: 50, top: 10, right: 10, bottom: 20}) + .renderArea(doArea) + .brushOn(false) + .renderDataPoints(doDots) + .dimension(noDimension); function all_stacks() { chart.group(progressGroup, "0", sel_stack('0')); From 9a053fbea9b6c4ed8f958f36c299976aa5d138cb Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Thu, 28 Jul 2016 19:26:55 -0400 Subject: [PATCH 5/9] bar progression example --- web/transitions/bar-progression.html | 76 ++++++++++++++++++++++++++++ web/transitions/index.html | 8 ++- 2 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 web/transitions/bar-progression.html diff --git a/web/transitions/bar-progression.html b/web/transitions/bar-progression.html new file mode 100644 index 000000000..b7ad72901 --- /dev/null +++ b/web/transitions/bar-progression.html @@ -0,0 +1,76 @@ + + + + dc.js - Area Progression Example + + + + + +
+ + +
+ + + + + + + + + +
+ + diff --git a/web/transitions/index.html b/web/transitions/index.html index 8f9cdda68..d4cfb1d5f 100644 --- a/web/transitions/index.html +++ b/web/transitions/index.html @@ -8,16 +8,20 @@

Eyeball tests for dc.js transitions

here.

+ + - - + + + +
area progression area transitionsbar progression bar transitions number transitionsordinal bar transitionsordinal line transitions
ordinal bar transitionsordinal line transitions ordinal row transitions pie external label transitions pie transitions
stacked bar transitions
From 21f4f1d0e85f37b40c04b8faa9459c1cb59b02ab Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Thu, 28 Jul 2016 19:38:20 -0400 Subject: [PATCH 6/9] add version to examples header --- web/examples/header.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/examples/header.js b/web/examples/header.js index 9b8cd1ff4..ab06a9470 100644 --- a/web/examples/header.js +++ b/web/examples/header.js @@ -9,8 +9,12 @@ 'all ' + dir + ' source', + '
', '', '
', '' ].join('')); + window.onload = function() { + d3.select('#version').text('v' + dc.version); + }; }(); From b8d0c668e9c0b36ee961326928e33e3177507e7c Mon Sep 17 00:00:00 2001 From: Daniel Gall Date: Tue, 30 Aug 2016 15:41:52 -0400 Subject: [PATCH 7/9] initial version of scatter plot titles --- src/scatter-plot.js | 99 ++++++++++++++++++++++++++++++++------------- 1 file changed, 72 insertions(+), 27 deletions(-) diff --git a/src/scatter-plot.js b/src/scatter-plot.js index a6fdca7c3..fa3642995 100644 --- a/src/scatter-plot.js +++ b/src/scatter-plot.js @@ -22,10 +22,14 @@ * @return {dc.scatterPlot} */ dc.scatterPlot = function (parent, chartGroup) { + var TOOLTIP_G_CLASS = 'dc-tooltip'; var _chart = dc.coordinateGridMixin({}); var _symbol = d3.svg.symbol(); var _existenceAccessor = function (d) { return d.value; }; + var _title = function (d) { + return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d); + }; var originalKeyAccessor = _chart.keyAccessor(); _chart.keyAccessor(function (d) { return originalKeyAccessor(d)[0]; }); @@ -64,36 +68,66 @@ dc.scatterPlot = function (parent, chartGroup) { }); _chart.plotData = function () { - var symbols = _chart.chartBodyG().selectAll('path.symbol') - .data(_chart.data()); + var chartBody = _chart.chartBodyG(); + var tooltipListClass = TOOLTIP_G_CLASS + '-list'; + var tooltips = chartBody.select('g.' + tooltipListClass); + var layersList = chartBody.selectAll('g.stack-list'); + + if (layersList.empty()) { + layersList = chartBody.append('g').attr('class', 'stack-list'); + } - symbols + var layers = layersList.selectAll('g.stack').data(_chart.data()); + + var layersEnter = layers .enter() - .append('path') - .attr('class', 'symbol') - .attr('opacity', 0) - .attr('fill', _chart.getColor) - .attr('transform', _locator); - - symbols.each(function (d, i) { - _filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]); - }); + .append('g') + .attr('class', function (d, i) { + return 'stack ' + '_' + i; + }); + + if (tooltips.empty()) { + tooltips = chartBody.append('g').attr('class', tooltipListClass); + } + layers.each(function (d, i) { + var symbols = _chart.chartBodyG().selectAll('path.symbol') + .data(_chart.data()); + symbols + .enter() + .append('path') + .attr('class', 'symbol') + .attr('opacity', 0) + .attr('fill', _chart.getColor) + .attr('transform', _locator); + var points = d.values; + + var g = tooltips.select('g.' + TOOLTIP_G_CLASS + '._' + i); + if (g.empty()) { + g = tooltips.append('g').attr('class', TOOLTIP_G_CLASS + ' _' + i); + } + + symbols.call(renderTitle, d); + + symbols.each(function (d, i) { + _filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]); + }); - dc.transition(symbols, _chart.transitionDuration()) - .attr('opacity', function (d, i) { - return !_existenceAccessor(d) ? 0 : - _filtered[i] ? 1 : _chart.excludedOpacity(); - }) - .attr('fill', function (d, i) { - return _chart.excludedColor() && !_filtered[i] ? - _chart.excludedColor() : - _chart.getColor(d); - }) - .attr('transform', _locator) - .attr('d', _symbol); - - dc.transition(symbols.exit(), _chart.transitionDuration()) - .attr('opacity', 0).remove(); + dc.transition(symbols, _chart.transitionDuration()) + .attr('opacity', function (d, i) { + return !_existenceAccessor(d) ? 0 : + _filtered[i] ? 1 : _chart.excludedOpacity(); + }) + .attr('fill', function (d, i) { + return _chart.excludedColor() && !_filtered[i] ? + _chart.excludedColor() : + _chart.getColor(d); + }) + .attr('transform', _locator) + .attr('d', _symbol); + + dc.transition(symbols.exit(), _chart.transitionDuration()) + .attr('opacity', 0).remove(); + }); }; /** @@ -256,6 +290,17 @@ dc.scatterPlot = function (parent, chartGroup) { return _chart; }; + function renderTitle (symbol, d) { + if (_chart.renderTitle()) { + symbol.selectAll('title').remove(); + //symbol.append('title').text(dc.pluck('data', _chart.title(d.name))); + symbol.append('title').text(function(d){ + return _chart.title()(d); + }); + //symbol.append('title').text('data'); + } + } + _chart.legendables = function () { return [{chart: _chart, name: _chart._groupName, color: _chart.getColor()}]; }; From 1cec0f52a7a47140ae017014d64cd42f13df4fb3 Mon Sep 17 00:00:00 2001 From: Daniel Gall Date: Wed, 31 Aug 2016 11:48:58 -0400 Subject: [PATCH 8/9] scatterPlot title changes harmonized with coding style --- src/scatter-plot.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/scatter-plot.js b/src/scatter-plot.js index fa3642995..8c3ff8402 100644 --- a/src/scatter-plot.js +++ b/src/scatter-plot.js @@ -27,9 +27,6 @@ dc.scatterPlot = function (parent, chartGroup) { var _symbol = d3.svg.symbol(); var _existenceAccessor = function (d) { return d.value; }; - var _title = function (d) { - return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d); - }; var originalKeyAccessor = _chart.keyAccessor(); _chart.keyAccessor(function (d) { return originalKeyAccessor(d)[0]; }); @@ -79,7 +76,7 @@ dc.scatterPlot = function (parent, chartGroup) { var layers = layersList.selectAll('g.stack').data(_chart.data()); - var layersEnter = layers + layers .enter() .append('g') .attr('class', function (d, i) { @@ -99,7 +96,6 @@ dc.scatterPlot = function (parent, chartGroup) { .attr('opacity', 0) .attr('fill', _chart.getColor) .attr('transform', _locator); - var points = d.values; var g = tooltips.select('g.' + TOOLTIP_G_CLASS + '._' + i); if (g.empty()) { @@ -293,11 +289,9 @@ dc.scatterPlot = function (parent, chartGroup) { function renderTitle (symbol, d) { if (_chart.renderTitle()) { symbol.selectAll('title').remove(); - //symbol.append('title').text(dc.pluck('data', _chart.title(d.name))); - symbol.append('title').text(function(d){ + symbol.append('title').text(function (d) { return _chart.title()(d); }); - //symbol.append('title').text('data'); } } From 2b08aef11e37a849449cf05afdd31c583ca9383e Mon Sep 17 00:00:00 2001 From: Daniel Gall Date: Thu, 1 Sep 2016 18:00:10 -0400 Subject: [PATCH 9/9] cleaned up cruft from title code borrowed from lineChart --- src/scatter-plot.js | 83 +++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 56 deletions(-) diff --git a/src/scatter-plot.js b/src/scatter-plot.js index 8c3ff8402..71b46cf7b 100644 --- a/src/scatter-plot.js +++ b/src/scatter-plot.js @@ -22,7 +22,6 @@ * @return {dc.scatterPlot} */ dc.scatterPlot = function (parent, chartGroup) { - var TOOLTIP_G_CLASS = 'dc-tooltip'; var _chart = dc.coordinateGridMixin({}); var _symbol = d3.svg.symbol(); @@ -65,65 +64,37 @@ dc.scatterPlot = function (parent, chartGroup) { }); _chart.plotData = function () { - var chartBody = _chart.chartBodyG(); - var tooltipListClass = TOOLTIP_G_CLASS + '-list'; - var tooltips = chartBody.select('g.' + tooltipListClass); - var layersList = chartBody.selectAll('g.stack-list'); - - if (layersList.empty()) { - layersList = chartBody.append('g').attr('class', 'stack-list'); - } - - var layers = layersList.selectAll('g.stack').data(_chart.data()); - - layers + var symbols = _chart.chartBodyG().selectAll('path.symbol') + .data(_chart.data()); + symbols .enter() - .append('g') - .attr('class', function (d, i) { - return 'stack ' + '_' + i; - }); + .append('path') + .attr('class', 'symbol') + .attr('opacity', 0) + .attr('fill', _chart.getColor) + .attr('transform', _locator); - if (tooltips.empty()) { - tooltips = chartBody.append('g').attr('class', tooltipListClass); - } - layers.each(function (d, i) { - var symbols = _chart.chartBodyG().selectAll('path.symbol') - .data(_chart.data()); - symbols - .enter() - .append('path') - .attr('class', 'symbol') - .attr('opacity', 0) - .attr('fill', _chart.getColor) - .attr('transform', _locator); - - var g = tooltips.select('g.' + TOOLTIP_G_CLASS + '._' + i); - if (g.empty()) { - g = tooltips.append('g').attr('class', TOOLTIP_G_CLASS + ' _' + i); - } - - symbols.call(renderTitle, d); - - symbols.each(function (d, i) { - _filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]); - }); + symbols.call(renderTitle, _chart.data()); - dc.transition(symbols, _chart.transitionDuration()) - .attr('opacity', function (d, i) { - return !_existenceAccessor(d) ? 0 : - _filtered[i] ? 1 : _chart.excludedOpacity(); - }) - .attr('fill', function (d, i) { - return _chart.excludedColor() && !_filtered[i] ? - _chart.excludedColor() : - _chart.getColor(d); - }) - .attr('transform', _locator) - .attr('d', _symbol); - - dc.transition(symbols.exit(), _chart.transitionDuration()) - .attr('opacity', 0).remove(); + symbols.each(function (d, i) { + _filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]); }); + + dc.transition(symbols, _chart.transitionDuration()) + .attr('opacity', function (d, i) { + return !_existenceAccessor(d) ? 0 : + _filtered[i] ? 1 : _chart.excludedOpacity(); + }) + .attr('fill', function (d, i) { + return _chart.excludedColor() && !_filtered[i] ? + _chart.excludedColor() : + _chart.getColor(d); + }) + .attr('transform', _locator) + .attr('d', _symbol); + + dc.transition(symbols.exit(), _chart.transitionDuration()) + .attr('opacity', 0).remove(); }; /**