chart = { //root is the total data const root = pack(data); //forcus will change with zoom, but initially is full data let focus = root; let view let format = d3.format(",d") let current_circle = undefined; var k = 1 var fontsize = d3.scaleSqrt() .domain([0, 100]) .range([1, 16]) .clamp(true) const svg = d3.create("svg") .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("background", color(0)) .style("cursor", "pointer") //if click anything that isn't a circle, revert back to original zoom .on("click", (event) => zoom(event, root)); const node = svg.append("g") .selectAll("circle") // returns all children, data (name, outlay, children), depth, height, parents, r, value, and x,y positions //slice removes world layer .data(root.descendants().slice(1)) .join("circle") // if there are no children, means end of the nested info, color by recipiant //if there are still children, color by how far in you are .attr("fill", d => d.children ? color(d.depth) : d.data.un_money == "no"? "green": "white") //.attr("pointer-events", d => !d.children ? "none" : null) .on("dblclick", (event, d) => focus !== d && (zoom(event, d), event.stopPropagation())) .on("mouseover", (event, d) => leafMouseOver(event, d)) .on("mouseout", (event, d) => leafMouseOut(event, d)) const label = svg.append("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .join("text") //root is the world level, with the 13 children as budget functions //full opacity if the parent of the node isn't world (so isn't with depth 1) .style("fill-opacity", d => d.parent === root ? 1 : 0) //.style("display", d => d.parent === root ? "inline" : "none") //.attr("test", function(d) {console.log(root)}) .text(function (d) { return d.data.name.substring(0, 20) + "..."; }) //https://observablehq.com/d/ae46408ae571730f // tooltip + styling const toolTip = d3.select("body") .append("div") .attr("class", "toolTip") .style("position", "absolute") .style("display", "none") .style("border-radius", "5px") .style("height", "auto") .style("background", "white") .style("padding", "7px") .style("border", "1px solid #DDD") .style("font-size", "0.9rem") .style("text-align", "left") zoomTo([root.x, root.y, root.r * 2]); function zoomTo(v) { k = width / v[2]; view = v; label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); //label resized using new radius label.attr("font-size", d => fontsize(d.r * k)) label.style("fill-opacity", function(d) { if (fontsize(d.r * k) > 8 && d.parent === focus) {return 1} else {return 0} }) node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("r", d => d.r * k); } function zoom(event, d) { const focus0 = focus; focus = d; const transition = svg.transition() .duration(event.altKey ? 7500 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]); return t => zoomTo(i(t)); }); // label .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .transition(transition) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } //https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-strings // Create our number formatter. var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', // These options are needed to round to whole numbers if that's what you want. //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) // maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) }); // apple mouseovers function leafMouseOver(event, d){ if (d.depth === 1) { d3.select(event.target).attr("stroke-width", 4) d3.select(event.target).attr("stroke", "yellow") var formated_money =parseFloat(d.data.outlay)*parseFloat(dd3)/8992408699023 var formated_money = formatter.format(formated_money) toolTip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(` Double click to zoom into this circle

${d.data.name}
Outlay : ${formated_money}
`) } else { d3.select(event.target).attr("stroke-width", 4) d3.select(event.target).attr("stroke", "yellow") var formated_money =parseFloat(d.data.outlay)*parseFloat(dd3)/8992408699023 formated_money = formatter.format(formated_money) toolTip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(` Recipiant : ${d.data.name}
Outlay : ${formated_money}
`); } } function leafMouseOut(event, d){ d3.select(event.target).attr("stroke", null) toolTip.style("display", "none"); } return svg.node(); }