OXIESEC PANEL
- Current Dir:
/
/
home
/
cubot
/
docroot
/
showcase
/
js
/
D3
/
plugins
Server IP: 139.59.38.164
Upload:
Create Dir:
Name
Size
Modified
Perms
📁
..
-
08/14/2022 11:05:22 AM
rwxr-xr-x
📄
Radar.js
8.86 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
bar.js
17.59 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
bullet.css
422 bytes
08/14/2022 11:05:19 AM
rw-r--r--
📄
bullet.js
10.65 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
calendar.js
16.63 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
calender.css
541 bytes
08/14/2022 11:05:20 AM
rw-r--r--
📄
combo.js
16.74 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
combo_2.js
17.91 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
combo_wip.js
16.61 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
commonFunc.js
25.28 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
customChart.js
577 bytes
08/14/2022 11:05:20 AM
rw-r--r--
📄
d3Charts.css
2.88 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
donut.js
5.67 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
filledAreaPercent.js
17.95 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
funnel.js
6.03 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
funnel.js_previous_o4aug17
5.86 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
gauged.js
15.3 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
groupbar.js
13.18 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
groupbar_23Aug2019.js
10.85 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
heatmap.js
9.77 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
html2canvas.min.js
161.47 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
makeJson.js
1.64 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
makeJsonmulti.js
3.75 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
multiLine.js
17.24 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
multipleDonut.js
5.29 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
pie.js
4.52 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
radar.js
6.49 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
saveSvgAsPng.js
14.62 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
stackedAreaDate.js
17.56 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedAreaDate_bkup23Nov2020.js
17.56 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedbar.js
10.72 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedbar_bkup21Apr2020.js
10.72 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stock.js
13.6 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
sun.js
7.59 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
sunburst.js
7.13 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
tableChart.js
11.54 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
tableChart_07Jan2020.js
6.7 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
tree.js
7.34 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
waterfall.js
9.17 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
zoomTree.js
7.59 KB
08/14/2022 11:05:19 AM
rw-r--r--
Editing: funnel.js_previous_o4aug17
Close
function drawFunnelChart(Data, divId, Title, Width, Height, Ndim, Nmeas, MeasFormats,Dimensions, Measures, dispObj,toolTip){ var json=makeJsonFromArrayNew(Data, Ndim, Nmeas, MeasFormats, dispObj); makeParentsJson(json); resolveComputeMeasure(json, dispObj.RD.General.Measures); var curNode = json, measNum = 1, totalEngagement = 0, width, height; var margin = {top: 20, right: 30, bottom: Height/4, left: 15}; d3.select("#"+divId).html('<div class="myChart"><div class="svgLegend"></div><div class="tipsy"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div></div>'); d3.selectAll(".tipsy").style("display", "none"); var svg = findSvgArea(Nmeas,dispObj,json, Width, Height,divId); svg[0].attr("transform", "translate(" + margin.left + "," + margin.top + ")"); width = svg[3]-30,height = svg[2]-30; var bottomPct = 1/3, slope = 2*height/(width - bottomPct*width), totalArea = (width+bottomPct*width)*height/2; FunnelChartdraw(divId, svg, curNode, 0,0,width,height,json,measNum,0, dispObj, MeasFormats); if(dispObj.getShowLegend()) makeLegend(svg,Nmeas,measNum,plotFunnel,0,json,0,0, dispObj); function plotFunnel(measNum){ svg[0].selectAll("text").remove(); svg[0].selectAll("path").remove(); FunnelChartdraw(divId, svg, curNode, 0,0,width,height,json,measNum,0, dispObj, MeasFormats); } function createPaths(cnc,measNum){ /* Returns an array of points that can be passed into d3.svg.line to create a path for the funnel */ cnc.sort(function(a,b){ return +b.size[measNum-1] - +a.size[measNum-1];}) totalEngagement = 0; for(var i = 0; i < cnc.length; i++) totalEngagement += Math.abs(cnc[i].size[measNum-1]); trapezoids = [] function findNextPoints(chart, prevLeftX, prevRightX, prevHeight, dataInd){ // reached end of funnel if(dataInd >= cnc.length) return; // math to calculate coordinates of the next base area = Math.abs(cnc[dataInd].size[measNum-1])*totalArea/totalEngagement; prevBaseLength = prevRightX - prevLeftX; nextBaseLength = Math.sqrt((slope * prevBaseLength * prevBaseLength - 4 * area)/slope); nextLeftX = (prevBaseLength - nextBaseLength)/2 + prevLeftX; nextRightX = prevRightX - (prevBaseLength-nextBaseLength)/2; nextHeight = slope * (prevBaseLength-nextBaseLength)/2 + prevHeight; points = [[nextRightX, nextHeight]] points.push([prevRightX, prevHeight]); points.push([prevLeftX, prevHeight]); points.push([nextLeftX, nextHeight]); points.push([nextRightX, nextHeight]); trapezoids.push(points); findNextPoints(chart, nextLeftX, nextRightX, nextHeight, dataInd+1); } findNextPoints(0, 0, width, 0, 0); return trapezoids; } function FunnelChartdraw(divId, svg, curNode, x,y,width,height,json,measNum,k, dispObj, MeasFormats){ var DEFAULT_SPEED = 8.5 speed = typeof speed !== 'undefined' ? speed : DEFAULT_SPEED; var cnc = curNode.children; // Creates the correct d3 line for the funnel var funnelPath = d3.svg.line() .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 = createPaths(cnc,measNum); function drawTrapezoids(funnel, i){ var trapezoid = svg[0] .append('svg:path') .attr('d', function(d){ return funnelPath([paths[i][0], paths[i][1], paths[i][2], paths[i][2], paths[i][1], paths[i][2]])}) .attr('fill', '#fff') .on("click", function() { clickFunnel(divId, cnc[i],0, svg, i,0,width,height,json,measNum,k,0, dispObj, MeasFormats); }) .on("mouseover", function(){showToolTips(divId, cnc[i], measNum,MeasFormats)}) .on("mouseout", function(d,i){hideToolTip(divId, d,i)}); nextHeight = paths[i][[paths[i].length]-1]; var totalLength = trapezoid.node().getTotalLength(); var transition = trapezoid .transition() .duration(totalLength/speed) .ease("linear") .attr("d", function(d){return funnelPath(paths[i])}) .attr("fill", function(d){return colorScale(i)}); svg[0].append('text') .text(cnc[i].name.replace("'","'") + ': ' + formatSmallScale(+cnc[i].size[measNum-1], MeasFormats[0])) .attr("x", function(d){ return width/2 }) .attr("y", function(d){ return (paths[i][0][1] + paths[i][1][1])/2}) // Average height of bases .attr("visibility",function(){return (paths[i][0][1] - paths[i][1][1])>10 ? "visible" : "hidden"}) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("fill", "#fff") .on("click", function() { clickFunnel(divId, cnc[i],0, svg, i,0,width,height,json,measNum,k,0, dispObj, MeasFormats); }); if(i < paths.length - 1){ transition.each('end', function(){drawTrapezoids(0, i+1)}) } } drawTrapezoids(0, 0); if(dispObj.getShowLabel()) svg[0].append("text") .attr("class","label") .text(cnc[0].dimName) .attr("transform","translate("+width/2+","+(height+10)+")") .style("text-anchor", "middle"); } function clickFunnel(divId, d,i, svg, index,y,width,height,json,measNum,k,c, dispObj, MeasFormats){ if(d.children){ curNode = d; svg[0].selectAll("text").remove(); svg[0].selectAll("path").remove(); FunnelChartdraw(divId, svg, curNode, 0,0,width,height,json,measNum,k, dispObj, MeasFormats); } else alert("No further dimensions."); updateLegendll(divId, svg, curNode, index,0,width,height,json,measNum,k,clickFunnel, dispObj, MeasFormats) } updateLegendll(divId, svg, curNode, 0,0,width,height,json,measNum,0,clickFunnel, dispObj, MeasFormats) }