30:T621,chart = (width, height) => { const root = treemap(caresMontanaMoney, width, height); const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) // .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill", d => { while (d.depth > 1) d = d.parent; return d.data.color; }) .attr("fill-opacity", 0.8) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf // .filter(d => d.value >= 5000000) .filter(d => ((d.x1 - d.x0) > 80) && ((d.y1 - d.y0) > 40)) // show labels in bigger squares .append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); return svg.node(); }31:T401,legend = () => { let cumulativeOffsetX = 0 let cumulativeOffsetY = 5 const legendData = caresMontanaMoney.children .map(d => ({label: d.name, color: d.color})) const makeOffset = (text) => { const xOffset = cumulativeOffsetX const yOffset = cumulativeOffsetY cumulativeOffsetX += text.length * 8 + 10 if (cumulativeOffsetX + 120 > width) { cumulativeOffsetX = 0 cumulativeOffsetY += 20 } return { x: xOffset, y: yOffset, } } const marks = legendData.map((d, i) => { const offset = makeOffset(d.label) return html` ${d.label} ` // svg` // // // ${d.label} // // // ` }) return html`

${marks}

` }32:T74c,caresMontanaMoney = { const total = 1250000000 const programs = { name: 'Montana CARES Act Relief', children: [ { name: 'Business aid', color: '#e6ab02', children: [ { name: 'Montana Business Stabilization Grant Program', value: 50000000, show: true, }, { name: 'Montana Innovation Grant program', value: 5000000, }, { name: 'Montana Food and Agriculture Adaptability Program', value: 500000, }, ] }, { name: 'Housing aid', color: '#d95f02', children: [ { name: 'Emergency Housing Assistance Program', value: 50000000, show: true, }, ] }, { name: 'Social services aid', color: '#66a61e', children: [ { name: 'Stay Connected Grants', value: 400000, }, { name: 'Food Bank and Food Pantry Assistance', value: 2000000, }, { name: 'Social Services Nonprofit Grants', value: 10000000, show: true, }, { name: 'Telework Assistance Grants', value: 650000, }, ] }, { name: 'Public health aid', color: '#7570b3', children: [ { name: 'Public Health Grants', value: 5000000, show: true, }, ] }, ] } // const programTotal = d3.sum(programs.children, d => d.value) // programs.children.push({ // name: 'Unallocated 5/5/2020', // value: total - programTotal, // color: '#ccc', // }) return programs } 33:[] 2e:{"title":"CARES Act Montana relief breakdown 5/5/2020","cells":[{"id":0,"value":"md`# CARES Act Montana relief breakdown 5/5/2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"embed = {\n const vizWidth = Math.min(width-50, 800) // -50 accounts for padding in embed\n const vizHeight = (width-50 >= 660) ? 400 : 200\n return html`\n

Montana's CARES Act COVID-19 relief fund allocations

Relative size of programs announced by Gov. Steve Bullock May 5, 2020

\n ${legend()}\n ${chart(vizWidth,vizHeight)}\n

Eric Dietrich/MTFP

`\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"legendSVG = () => {\n let cumulativeOffsetX = 0\n let cumulativeOffsetY = 5\n const legendData = caresMontanaMoney.children\n .map(d => ({label: d.name, color: d.color}))\n const makeOffset = (text) => {\n const xOffset = cumulativeOffsetX\n const yOffset = cumulativeOffsetY\n cumulativeOffsetX += text.length * 8 + 10\n if (cumulativeOffsetX + 120 > width) {\n cumulativeOffsetX = 0\n cumulativeOffsetY += 20\n }\n return {\n x: xOffset,\n y: yOffset,\n }\n }\n const marks = legendData.map((d, i) => {\n const offset = makeOffset(d.label)\n return svg`\n\n \n ${d.label}\n\n\n`\n })\n \n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"treemap = (data, width, height) => d3.treemap()\n // .tile(d3.treemapBinary)\n .tile(d3.treemapSquarify)\n .size([width, height])\n .padding(1)\n .round(true)\n (d3.hierarchy(caresMontanaMoney)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"format = (val) => d3.format(\"$,.3s\")(val).replace('G','B')","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}