30:T987,chart = { const root = pack(budgetObject); let focus = root; let view; const svg = d3 .create("svg") .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("background", "#e5e7eb") .style("cursor", "pointer") .on("click", event => zoom(event, root)); const node = svg .append("g") .selectAll("circle") .data(root.descendants().slice(1)) .join("circle") .attr("fill", d => (d.children ? color(1) : color(2))) .on("mouseover.outline", function() { d3.select(this).attr("stroke", "#000"); }) .on("mouseout.outline", function() { d3.select(this).attr("stroke", null); }) .on( "click", (event, d) => d.children && focus !== d && (zoom(event, d), event.stopPropagation()) ); const label = svg .append("g") .style("font", "13px sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .join("text") .style("fill-opacity", d => (d.parent === root ? 1 : 0)) .style("display", d => (d.parent === root ? "inline" : "none")) .text(d => d.data.name); zoomTo([root.x, root.y, root.r * 2]); function zoomTo(v) { const k = width / v[2]; view = v; label.attr( "transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})` ); 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.2]); return t => zoomTo(i(t)); }); label .filter(function(d) { return ( (d.parent === focus || this.style.display === "inline") && (d.children || d.value > d.parent.value * 0.005) ); }) .transition(transition) .style("fill-opacity", d => (d.parent === focus ? 1 : 0)) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } return svg.node(); }31:T4b6,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }32:[{"id":"6f0f50aa9b370c24c197c05a7c62377eab04cd7bd9ae905be58d10ab2f7bffc95a7c310304041622802c2824c876caeba2c245db5d307eec6c39f95df8f814d9","href":"https://static.observableusercontent.com/files/6f0f50aa9b370c24c197c05a7c62377eab04cd7bd9ae905be58d10ab2f7bffc95a7c310304041622802c2824c876caeba2c245db5d307eec6c39f95df8f814d9","name":"outlays@1.csv","type":"text/csv","lastModified":1609091094013.904,"size":1960035}] 2e:{"title":"Explore The Federal Budget","cells":[{"id":0,"value":"title = md`# Explore The Federal Budget\n\n* Hover over a circle to see how much each line item costs.\n* Click on an outer circle to zoom in. Click anywhere to zoom out\n* Use the dropdown menu to change the budget year.\n\n**Note**: This graphic only includes the largest government departments. If you want to view additional departments, you can add them [here](#spacing). All data is publically available from the [Office of Budget and Management](https://www.whitehouse.gov/omb/). You can [download](https://obamawhitehouse.archives.gov/sites/default/files/omb/budget/fy2017/assets/outlays.xls) your own copy.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof budgetYear = select({\n options: d3.range(1962, 2021).reverse(),\n title: \"Budget Year\",\n value: 2020\n // multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"spacing = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"viewof departments = checkbox({\n title: \"Select Departments to View\",\n options: Array.from(budgetMap).map(d => d[0]),\n value: selectedDepartments\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`---\n## Data Manipulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"budgetObject = ({\n name: 'Federal Budget',\n children: Array.from(budgetMap)\n .filter(dept => departments.includes(dept[0]))\n .map(([name, children]) => ({\n name,\n children: Array.from(children).map(([name, value]) => ({ name, value }))\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"selectedDepartments = [\n \"Legislative Branch\",\n \"Judicial Branch\",\n \"Department of Agriculture\",\n \"Department of Commerce\",\n \"Department of Defense--Military Programs\",\n \"Department of Health and Human Services\",\n \"Department of the Interior\",\n \"Department of Justice\",\n \"Department of Labor\",\n \"Department of State\",\n \"Department of the Treasury\",\n \"Social Security Administration\",\n \"Department of Education\",\n \"Department of Energy\",\n \"Environmental Protection Agency\",\n \"Department of Transportation\",\n \"Department of Homeland Security\",\n \"Department of Housing and Urban Development\",\n \"National Aeronautics and Space Administration\",\n \"Department of Veterans Affairs\",\n \"Executive Office of the President\",\n \"International Assistance Programs\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"allDepartments = Array.from(budgetMap).map(d => d[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"budgetMap = d3.rollup(\n budgetJSON,\n v => d3.sum(v, d => d[budgetYear]),\n d => d[\"Agency Name\"],\n d => d[\"Bureau Name\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"budgetJSON = FileAttachment(\"outlays@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"tooltip = {\n chart;\n\n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n d3.selectAll(\"circle\")\n .on(\"mouseover\", function(event, d) {\n tooltip.html(`${d.data.name}\\n$${format(d.value)}`);\n return tooltip.style(\"visibility\", \"visible\");\n })\n .on(\"mousemove\", function(event) {\n return tooltip\n .style(\"top\", event.pageY - 10 + \"px\")\n .style(\"left\", event.pageX + 10 + \"px\");\n })\n .on(\"mouseout\", function() {\n return tooltip.style(\"visibility\", \"hidden\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"pack = data =>\n d3\n .pack()\n .size([width - 2, height - 2])\n .padding(3)(\n d3\n .hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"treemap = data =>\n d3\n .treemap()\n .tile(d3.treemapSquarify)\n .size([width, height])\n .padding(1)\n .round(true)(\n d3\n .hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"function format(number) {\n const newNum = d3.format(\".2s\")(number);\n\n if (newNum.slice(-1) === \"G\") {\n return `${newNum.slice(0, -1)}B`;\n } else {\n return newNum;\n }\n} // SI-prefix with two significant digits","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"color = d3\n .scaleLinear()\n .domain([0, 3])\n .range([\"hsl(152,80%,80%)\", \"hsl(228,30%,40%)\"])\n .interpolate(d3.interpolateHcl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"import { autoSelect, select, input } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}