OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	12/31/2022 06:53:36 AM	rwxr-xr-x
📄 bar.js	7.96 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 heatmap.js	5.87 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 makeJson.js	1.64 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 radar.js	6.48 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 stock.js	5.6 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 tree.css	1.35 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 tree.js	4.79 KB	08/14/2022 11:05:12 AM	rw-r--r--

Editing: bar.js

function drawBarChart_interactive(Data, divId, Title, Width, Height, Ndim, Nmeas,  MeasFormats, Dimensions, Measures, dispObj){
	Height=makeProperHeight(Height, divId);
	Width=makeProperWidth(Width, divId);

var margin = {top: 20, right: 40, bottom: 20, left: 100},
	    width = Width - margin.right - margin.left,
	    height = Height - margin.top - margin.bottom;

var y = 20; // bar height

var x = d3.scale.linear()
		.range([0, width]);

var z = d3.scale.ordinal()
		.range(["steelblue", "#ccc"]); // bar color

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 = d3.select("#"+divId).select(".myChart")
		.append("svg")
		.attr("width", width + margin.right + margin.left)
		.attr("height", height + margin.top + margin.bottom)
		.attr ("class", "svgchart")
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		/* Uncomment if you want pan and zoom */
		/*.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", function(){
					svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
					}
					));*/

svg.append("rect")
		.attr("class", "background")
		.attr("width", width)
		.attr("height", height)
		.on("click", function(d){up(divId, d, svg, xAxis, x, y, z)});

svg.append("g")
		.attr("class", "x axis");

svg.append("g")
		.attr("class", "y axis")
		.append("line")
		.attr("y1", "100%");

var root=makeJsonFromArray(Data,Ndim, Nmeas, MeasFormats[0]);
	hierarchy.nodes(root);
	x.domain([0, root.value]).nice();
	down(divId, root, 0, svg, xAxis, x, y, z);
}
function down(divId, d, i,svg, xAxis, x, y, z) {
	var duration = 750, delay = 25;

if (!d.children || this.__transition__) return;
	var end = duration + d.children.length * delay;

// Mark any currently-displayed bars as exiting.
	var exit = svg.selectAll(".enter").attr("class", "exit");

// Entering nodes immediately obscure the clicked-on bar, so hide it.
	exit.selectAll("rect").filter(function(p) { return p === d; })
		.style("fill-opacity", 1e-6);

// Enter the new bars for the clicked-on data.
	// Per above, entering bars are immediately visible.
	var enter = bar(divId, d, svg, xAxis, x, y, z)
		.attr("transform", stack(i,x,y))
		.style("opacity", 1);

// Have the text fade-in, even though the bars are visible.
	// Color the bars as parents; they will fade to children if appropriate.
	enter.select("text").style("fill-opacity", 1e-6);
	enter.select("rect").style("fill", function(d) { return d.value > 0 ? z(!!d.children) : (d.children?"#A52A2A":"#D69494"); })

// Update the x-scale domain.
	x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();

// Update the x-axis.
	svg.selectAll(".x.axis").transition().duration(duration).call(xAxis);

// Transition entering bars to their new position.
	var enterTransition = enter.transition()
		.duration(duration)
		.delay(function(d, i) { return i * delay; })
		.attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; });

// Transition entering text.
	enterTransition.select("text").style("fill-opacity", 1);

// Transition entering rects to the new x-scale.
	enterTransition.select("rect")
		.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
		.style("fill", function(d) { return d.value>0?z(!!d.children):(d.children?"#A52A2A":"#D69494"); });

// Transition exiting bars to fade out.
	var exitTransition = exit.transition()
		.duration(duration)
		.style("opacity", 1e-6)
		.remove();

// Transition exiting bars to the new x-scale.
	exitTransition.selectAll("rect")
		.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })

// Rebind the current node to the background.
	svg.select(".background").data([d]).transition().duration(end); d.index = i;
}

function up(divId, d,svg, xAxis, x, y, z) {
	var duration = 750, delay = 25;
	if (!d.parent || this.__transition__) return;
	var end = duration + d.children.length * delay;

// Mark any currently-displayed bars as exiting.
	var exit = svg.selectAll(".enter").attr("class", "exit");

// Enter the new bars for the clicked-on data's parent.
	var enter = bar(divId, d.parent, svg, xAxis, x, y, z)
		.attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; })
		.style("opacity", 1e-6);

// Color the bars as appropriate.
	// Exiting nodes will obscure the parent bar, so hide it.
	enter.select("rect")
		.style("fill", function(d) { return d.value > 0 ? z(!!d.children) : (d.children?"#A52A2A":"#D69494"); })
		.filter(function(p) { return p === d; })
		.style("fill-opacity", 1e-6);

// Update the x-scale domain.
	x.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();

// Update the x-axis.
	svg.selectAll(".x.axis").transition().duration(duration).call(xAxis);

// Transition entering bars to fade in over the full duration.
	var enterTransition = enter.transition()
		.duration(end)
		.style("opacity", 1);

// Transition entering rects to the new x-scale.
	// When the entering parent rect is done, make it visible!
	enterTransition.select("rect")
		.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
		.each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });

// Transition exiting bars to the parent's position.
	var exitTransition = exit.selectAll("g").transition()
		.duration(duration)
		.delay(function(d, i) { return i * delay; })
		.attr("transform", stack(d.index,x, y));

// Transition exiting text to fade out.
	exitTransition.select("text")
		.style("fill-opacity", 1e-6);

// Transition exiting rects to the new scale and fade to parent color.
	exitTransition.select("rect")
		.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
		.style("fill", function(d) { return d.value > 0 ? z(!!d.children) : (d.children?"#A52A2A":"#D69494"); })

// Remove exiting nodes when the last child has finished transitioning.
	exit.transition().duration(end).remove();

// Rebind the current parent to the background.
	svg.select(".background").data([d.parent]).transition().duration(end);;
}

// Creates a set of bars for the given data node, at the specified index.
function bar(divId, d, svg, xAxis, x, y, z) {
	var bar = svg.insert("g", ".y.axis")
		.attr("class", "enter")
		.attr("transform", "translate(0,5)")
		.selectAll("g")
		.data(d.children)
		.enter().append("g")
		.style("cursor", function(d) { return !d.children ? null : "pointer"; })
		.on("click", function(d,i){down(divId, d,i,svg, xAxis, x, y, z)});

bar.append("text")
		.attr("x", -6)
		.attr("y", y / 2)
		.attr("dy", ".35em")
		.attr("text-anchor", "end")
		.text(function(d) { return d.name.replace("&amp;","&"); });

bar.append("rect")
		.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
		.attr("height", y)
		.on("mouseover", function(d,i){toolTipBar(divId, d,i)})
		.on("mouseout", function(d,i){hideToolTip(divId, d,i)});

return bar;
}

function toolTipBar(divId, d, i){
	var p = d3.select("#"+divId).select(".myChart").select(".tipsy");

p.html("<div class=\"tipsy-inner\">"+d.dimName+" : "+d.name+"<br>"+d.measName+" : "+formatData(d.size, d.measFormat, 0)+" ( "+d.percent+" ) </div>");
	p.style("display", "block").style("left", d3.event.pageX+"px").style("top", d3.event.pageY+"px");
}
function hideToolTip(divId, d,i){
	var p = d3.select("#"+divId).select(".myChart").select(".tipsy").style("display", "none");
}
// A stateful closure for stacking bars horizontally.
function stack(i, x, y) {
	var x0 = 0;
	return function(d) {
		var tx = "translate(" + x0 + "," + y * i * 1.2 + ")";
		x0 += x(d.value);
		return tx;
	};
}
//plotBarChart("#main");