2a:null 2b:["$","title",null,{"children":"All Acounts | Marjolein Oostrom | Observable"}] 31:T1601, 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(); }32:[{"id":"6071d1acef5441c08beb5943177fd6f8ade423678421d0769ddc5b11f46de22483ecffca1e6d92722b79ae8508ca37a56e09fae3f4424d1ee3f0abf1db8c4307","href":"https://static.observableusercontent.com/files/6071d1acef5441c08beb5943177fd6f8ade423678421d0769ddc5b11f46de22483ecffca1e6d92722b79ae8508ca37a56e09fae3f4424d1ee3f0abf1db8c4307","name":"all_agencies_flare.json","type":"application/json","lastModified":1626651028879.208,"size":319133}] 2e:{"id":"3996ad503a18d7ac","slug":"all-acounts","title":"All Acounts","thumbnail":"5be48f2fbff62faa324cfadf5b6924d282f714fc1faf094e0ff07c6f8dc9c921","access_level":"public","create_time":"$D2021-07-18T23:27:45.148Z","update_time":"$D2021-07-19T01:51:55.690Z","view_time":null,"first_public_time":"$D2021-07-18T23:46:02.385Z","fork":{"id":"edc68dd0fd1ec82e","slug":"zoomable-circle-packing-hover-message","title":"Federal Funding for UNICEF and WFP","owner":{"id":"83499e9a58cbfdf8","login":"marjolein","name":"Marjolein Oostrom"}},"stars":1,"starred":false,"owner":{"type":"team","id":"83499e9a58cbfdf8","login":"marjolein","name":"Marjolein Oostrom","avatar_url":"https://avatars-next.observableusercontent.com/5d583caf7e4d9b8af7462b6fadfb421624df1b34eaff2afa0d301bfc15578c89","tier":"starter_2024"},"version":456,"publish_version":456,"role":null,"authored":false,"authors":[{"type":"individual","id":"c98da6526bcb1390","login":"marjolein","name":"Marjolein Oostrom","avatar_url":"https://avatars-next.observableusercontent.com/5d583caf7e4d9b8af7462b6fadfb421624df1b34eaff2afa0d301bfc15578c89","tier":null}],"members":[{"type":"individual","id":"c98da6526bcb1390","login":"marjolein","name":"Marjolein Oostrom","avatar_url":"https://avatars-next.observableusercontent.com/5d583caf7e4d9b8af7462b6fadfb421624df1b34eaff2afa0d301bfc15578c89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"All Acounts","cells":[{"id":0,"value":"md`# All Acounts\n\nClick to zoom in or out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof dd3 = {\n const dd3 = select({\n title: \"How many $'s are spent on each recipiant from:\",\n options: [\n { label: \"Your taxes (Average Federal Tax: $10,644)\", value: 10644 },\n { label: \"Actual Budget (Total Obligations): 9 Trillion\", value: 8992408699023}\n ],\n value: 10644\n });\n return dd3;\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"all_agencies_flare.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"pack = data => d3.pack()\n .size([width, height])\n .padding(3)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"width = 932","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"color = d3.scaleLinear()\n .domain([0, 5])\n .range([\"hsl(152,80%,80%)\", \"hsl(228,30%,40%)\"])\n .interpolate(d3.interpolateHcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"