Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update d3-funnel-charts.js #3

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update d3-funnel-charts.js #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
274fccd
Update d3-funnel-charts.js
Peteraa Oct 31, 2014
b6b65a3
call back function not retarded
Peteraa Nov 11, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 50 additions & 10 deletions src/d3-funnel-charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,27 @@
This is used to calculate the slope, so the chart's view can be changed by changing this value
*/

// Extending the input parameters to include color:
this.customColorScaleDomains = [];
this.customColorScaleRange = [];

// Create the option for people to force the funnel sections to be of equal size, default is false
this.equalSizedFunnelSteps = typeof options.equalSizedFunnelSteps !== 'undefined' ? options.equalSizedFunnelSteps :false;

// Create the option for people to make the trapezoids clickable.
this.callBack = (typeof options.callBack !== 'undefined') && (typeof options.callBack === 'function') ? options.callBack : function () { };


this.data = options.data;
this.totalEngagement = 0;

for(var i = 0; i < this.data.length; i++){
this.totalEngagement += this.data[i][1];
this.totalEngagement += this.data[i][1];
// Extending the input parameters to include color:
if (this.data[i][2] !== 'undefined') {
this.customColorScaleDomains.push(this.data[i][0]);
this.customColorScaleRange.push(this.data[i][2]);
}
}
this.width = typeof options.width !== 'undefined' ? options.width : DEFAULT_WIDTH;
this.height = typeof options.height !== 'undefined' ? options.height : DEFAULT_HEIGHT;
Expand All @@ -33,6 +50,11 @@
return this.data[ind][0];
};

window.FunnelChart.prototype._getFunction = function (ind) {
/* Get call back function */
return this.callBack;
};

window.FunnelChart.prototype._getEngagementCount = function(ind){
/* Get engagement value of a category at index 'ind' in this.data */
return this.data[ind][1];
Expand All @@ -46,8 +68,14 @@
// reached end of funnel
if(dataInd >= chart.data.length) return;

// math to calculate coordinates of the next base
area = chart.data[dataInd][1]*chart._totalArea/chart.totalEngagement;
if (chart.equalSizedFunnelSteps) {
// math to calculate coordinates of the next base
area = chart.totalEngagement / chart.data.length * chart._totalArea / chart.totalEngagement;
} else {
// math to calculate coordinates of the next base
area = chart.data[dataInd][1] * chart._totalArea / chart.totalEngagement;
}

prevBaseLength = prevRightX - prevLeftX;
nextBaseLength = Math.sqrt((chart._slope * prevBaseLength * prevBaseLength - 4 * area)/chart._slope);
nextLeftX = (prevBaseLength - nextBaseLength)/2 + prevLeftX;
Expand Down Expand Up @@ -82,14 +110,25 @@
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; });

// Automatically generates colors for each trapezoid in funnel
var colorScale = d3.scale.category10();

var paths = this._createPaths();


// Color management
if (this.customColorScaleDomains.length != 0 && this.customColorScaleRange.length != 0) {
// assign the colors to the colorScale
var colorScale = d3.scale.ordinal()
.domain(this.customColorScaleDomains)
.range(this.customColorScaleRange);
} else {
// Automatically generates colors for each trapezoid in funnel
var colorScale = d3.scale.category10();
}

var paths = this._createPaths();

function drawTrapezoids(funnel, i){
var trapezoid = funnelSvg
var trapezoid = funnelSvg
.append('svg:path')
.on("click", function(d) { funnel._getFunction(i)(funnel._getLabel(i)); } )
.attr('d', function(d){
return funnelPath(
[paths[i][0], paths[i][1], paths[i][2],
Expand All @@ -108,9 +147,11 @@
.attr("d", function(d){return funnelPath(paths[i]);})
.attr("fill", function(d){return colorScale(i);});

funnelSvg
funnelSvg
.append('svg:text')

.text(funnel._getLabel(i) + ': ' + funnel._getEngagementCount(i))
.on("click", function (d) { funnel._getFunction(i)(funnel._getLabel(i)); })
.attr("x", function(d){ return funnel.width/2; })
.attr("y", function(d){
return (paths[i][0][1] + paths[i][1][1])/2;}) // Average height of bases
Expand All @@ -124,7 +165,6 @@
});
}
}

drawTrapezoids(this, 0);
};
})();