31:T19bd,function drawVoronoiTreemap() { const svg = d3.select(treemap); svg.selectAll("g").remove(); svg .append("g") .append("text") .attr("class", "field") // .attr("dx", "-50%") .attr("text-anchor", "middle") .attr( "transform", "translate(" + (margin.left + (width - margin.left - margin.right) / 2) + "," + (margin.top - 15) + ")" ) // .text(attr == "전체" ? "전체" : matchingValue); .text(year + " " + matchingValue + " " + bigFormat(budget_hierarchy.value)); const middleMargin = margin.left + (width - width * pieRatio) / 2; const voronoi = svg .append("g") .attr("transform", "translate(" + middleMargin + "," + margin.top + ")"); const labels = svg .append("g") .attr("transform", "translate(" + middleMargin + "," + margin.top + ")"); const pop_labels = svg .append("g") .attr("transform", "translate(" + middleMargin + "," + margin.top + ")"); const labels1outline = svg .append("g") .attr("transform", "translate(" + middleMargin + "," + margin.top + ")"); const labels1 = svg .append("g") .attr("transform", "translate(" + middleMargin + "," + margin.top + ")"); let seed = new Math.seedrandom(30); let voronoiTreeMap = d3.voronoiTreemap().prng(seed).clip(ellipse); voronoiTreeMap(budget_hierarchy); colorHierarchy(budget_hierarchy); let allNodes = budget_hierarchy .descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, { id: i })); let hoveredShape = null; // return allNodes; voronoi .selectAll("path") .data(allNodes) .enter() .append("path") .attr("d", (d) => "M" + d.polygon.join("L") + "Z") .style("fill", (d) => (d.parent ? d.parent.color : d.color)) .attr("class", (d) => `area${d.depth} area-${d.id}`) // .attr("stroke-width", 0) .style("fill-opacity", (d) => (d.depth === 2 ? 1 : 0)) .attr("pointer-events", (d) => (d.depth === 2 ? "all" : "none")) .on("click", (e, d) => { d.selected = d.selected ? 0 : 1; let label = labels.select(`.label-${d.id}`); label.attr("opacity", d.selected); let pop_label = pop_labels.select(`.label-${d.id}`); pop_label.attr("opacity", 0); }) .on("dblclick", (e, d) => { const url = "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query="; console.log(url); window.open( url + encodeURIComponent(additionalKeyword + " " + d.data.key), "search" ); }) .on("mouseenter", (e, d) => { let label = labels.select(`.label-${d.id}`); label.attr("opacity", 1); let pop_label = pop_labels.select(`.label-${d.id}`); // pop_label.attr('opacity', 1); let area = voronoi.select(`.area-${d.id}`); area.classed("highlite", true); // console.log(d, d.id, label); }) .on("mouseleave", (e, d) => { let label = labels.select(`.label-${d.id}`); label.attr("opacity", (d) => fontOpacity(d)); let pop_label = pop_labels.select(`.label-${d.id}`); // pop_label.attr('opacity', d.selected ? 1 : 0); let area = voronoi.select(`.area-${d.id}`); area.classed("highlite", false); }) .transition() .duration(1000) // .attr("stroke-width", d => (d.depth == 1 ? 2 : 0.5)) .style("fill", (d) => d.color); function fontScale(d) { const ratio = (d.value / budget_hierarchy.value) * 100; if (ratio > 30) return 1.2; if (ratio < 0.1) return 0.4; return d3.scaleLog().domain([0.1, 30]).range([0.4, 1.2])(ratio); } function fontScale2(d) { const ratio = (d.value / budget_hierarchy.value) * 100; if (ratio > 30) return 1; if (ratio < 0.1) return 0.5; return d3.scaleLog().domain([0.1, 30]).range([0.5, 1])(ratio); } function fontOpacity(d) { if (d.data.key == null) return 0; const ratio = (d.value / budget_hierarchy.value) * 100; if (ratio < 0.1) return 0; if (d.data.key === hoveredShape) { return 1; } else if ( showKey2 == "show" || d.data.values[0].budget > bigmoney || d.selected ) { return 1; } else { return 0; } } //아웃라인 labels1outline .selectAll("text") .data(allNodes.filter((d) => d.depth === 1)) .enter() .append("text") // .attr('class', d => `label-${d.id}`) .attr("class", "field") .attr("text-anchor", "start") .attr("ratio", (d) => d.value / d.parent.value) // .attr('font-size', d => fontScale((d.value / d.parent.value) * 100) + "em") .style("font-size", (d) => fontScale(d) + "em") // .attr('dy', -10) .style("stroke", "#fff9") .style("stroke-width", "2") .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y + 6] + ")" ) .html((d) => multiline(d.data.key)); labels1 .selectAll("text") .data(allNodes.filter((d) => d.depth === 1)) .enter() .append("text") // .attr('class', d => `label-${d.id}`) .attr("class", "field") .attr("text-anchor", "start") .attr("ratio", (d) => d.value / d.parent.value) // .attr('font-size', d => fontScale((d.value / d.parent.value) * 100) + "em") .style("font-size", (d) => fontScale(d) + "em") // .attr('dy', -10) .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y + 6] + ")" ) .html((d) => multiline(d.data.key)); labels .selectAll("text") .data(allNodes.filter((d) => d.depth === 2)) .enter() .append("text") .attr("class", (d) => `sector label-${d.id}`) .attr("text-anchor", "start") .style("font-size", (d) => fontScale2(d) + "em") .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y + 6] + ")" ) // .text(d => d.data.key) .html((d) => multiline(d.data.key + "|" + bigFormat(d.data.values[0].budget)) ) .attr("opacity", (d) => fontOpacity(d)); // .attr('opacity', 0); pop_labels .selectAll("text") .data(allNodes.filter((d) => d.depth === 2)) .enter() .append("text") .attr("class", (d) => `budget label-${d.id}`) .attr("text-anchor", "middle") .style("font-size", (d) => fontScale2(d) * 0.8 + "em") .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y - 20] + ")" ) .text((d) => bigFormat(d.data.values[0].budget)) .attr("opacity", (d) => fontOpacity(d) ? 0 : d.data.values[0].budget > bigmoney2 ? 1 : 0 ); }32:T6a5,cardColors = { const colors = "rgb(208, 183, 186)|rgb(184, 206, 196)|rgb(210, 182, 182)|rgb(182, 189, 214)|rgb(217, 184, 183)|rgb(222, 213, 182)|rgb(186, 194, 215)|rgb(200, 213, 190)|rgb(227, 191, 183)|rgb(249, 223, 179)|rgb(234, 194, 184)|rgb(193, 211, 218)|rgb(221, 199, 193)|rgb(217, 226, 199)|rgb(207, 218, 213)|rgb(238, 205, 193)|rgb(204, 221, 223)|rgb(199, 215, 230)|rgb(222, 214, 207)|rgb(231, 209, 203)|rgb(206, 217, 229)|rgb(238, 219, 200)|rgb(215, 227, 226)|rgb(227, 234, 210)|rgb(236, 220, 210)|rgb(217, 224, 229)|rgb(239, 225, 210)|rgb(235, 218, 215)|rgb(238, 214, 218)|rgb(225, 230, 222)|rgb(221, 228, 232)|rgb(238, 225, 216)|rgb(245, 232, 215)|rgb(241, 230, 221)|rgb(245, 232, 222)|rgb(243, 231, 225)|rgb(245, 238, 225)|rgb(245, 242, 236)|rgb(183, 195, 206)|rgb(208, 183, 186)|rgb(184, 206, 196)|rgb(210, 182, 182)|rgb(182, 189, 214)|rgb(217, 184, 183)|rgb(222, 213, 182)|rgb(186, 194, 215)|rgb(200, 213, 190)|rgb(227, 191, 183)|rgb(249, 223, 179)|rgb(234, 194, 184)|rgb(193, 211, 218)|rgb(221, 199, 193)|rgb(217, 226, 199)|rgb(207, 218, 213)|rgb(238, 205, 193)|rgb(204, 221, 223)|rgb(199, 215, 230)|rgb(222, 214, 207)|rgb(231, 209, 203)|rgb(206, 217, 229)|rgb(238, 219, 200)|rgb(215, 227, 226)|rgb(227, 234, 210)|rgb(236, 220, 210)|rgb(217, 224, 229)|rgb(239, 225, 210)|rgb(235, 218, 215)|rgb(238, 214, 218)|rgb(225, 230, 222)|rgb(221, 228, 232)|rgb(238, 225, 216)|rgb(245, 232, 215)|rgb(241, 230, 221)|rgb(245, 232, 222)|rgb(243, 231, 225)|rgb(245, 238, 225)|rgb(245, 242, 236)".split( "|" ); // return colors; const mapcolors = "FFEAAE,B3CADF,F6A394,B3C1AB,C7B4A9,FCBF90,EBE9D9,BCE4DE,F8DAC5" .split(",") .map(d => "#" + d); return [...mapcolors, ...colors]; }33:[{"id":"ca5f1666db1db715102b90cba7a94fc6e4e6c1bb8905e8cd8fb4867d49d4bfcbcd8e5fdae256959a92fe9d3fa2ee96e42a749d4092fd1cd906547fa7b8abaf4a","href":"https://static.observableusercontent.com/files/ca5f1666db1db715102b90cba7a94fc6e4e6c1bb8905e8cd8fb4867d49d4bfcbcd8e5fdae256959a92fe9d3fa2ee96e42a749d4092fd1cd906547fa7b8abaf4a","name":"여성가족부총지출2007-2021.csv","type":"text/csv","lastModified":1626568690425.075,"size":1517442}] 2f:{"title":"여성가족부 예산 변화","cells":[{"id":0,"value":"md`# 여성가족부 예산 변화\n- 예산과 기금을 합한 총액으로 표시했습니다.\n- 예산은 조세를 재원으로 당해연도 지출이 원칙이지만 기금은 자체수입, 융자지원금 회수 등의 재원으로 자금을 적립하여 운용한다.\n- 셀을 더블 클릭하면 사업 내용을 검색해 볼 수 있습니다. \n\n#### 여성가족부, 다름을 존중하고 함께하는 세상을 만듭니다. [소프라이즈](https://soprize.so/answer/445)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"viewof pieSizeToggle = checkbox({\n // title: \"하위 분류 보기\",\n // description: \"Please select your favorite colors\",\n options: [{ value: \"variable\", label: \"전체 예산 비례 파이 크기 보기\" }],\n value: \"variable\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"viewof showKey2 = checkbox({\n // title: \"하위 분류 보기\",\n // description: \"Please select your favorite colors\",\n options: [{ value: \"show\", label: \"하위 분류 모두 보기\" }],\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"viewof year = slider({\n min: 2007,\n max: 2021,\n value: 2021,\n step: 1,\n title: \"회계연도\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"treemap = {\n const svg = d3.select(\n DOM.svg(\n width + margin.left + margin.right,\n height + margin.left + margin.right\n )\n );\n svg\n .append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .style(\"fill\", \"#F5F5F2\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"viewof attr = select({\n title: \"필터\",\n // description: \"Please pick your favorite stooge.\",\n options: [\"전체\", ...keys],\n value: \"전체\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"viewof matchingValue = {\n const values = Array.from(\n new Set(budget.filter(d => d.회계연도 == year).map(d => d[attr]))\n ).filter(d => d);\n const valuesWithBudget = values.map(v => ({\n key: v,\n budget: d3.sum(\n // budget.filter(k => k[attr] == v).map(k => k.국회확정금액_천원)\n budget\n .filter(k => k.회계연도 == year && k[attr] == v)\n .map(k => k[valueVariable])\n )\n }));\n let sortedValues = valuesWithBudget\n .sort((a, b) => d3.descending(a.budget, b.budget))\n .map(d => ({\n label: d.key + \" (\" + bigFormat(d.budget) + \")\",\n value: d.key\n }));\n\n if (sortedValues.length == 0) sortedValues = [\"전체\"];\n // return sortedValues;\n\n return select({\n title: \"매핑\",\n // description: \"Please pick your favorite stooge.\",\n options: sortedValues\n // value: sortedValues[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof key1 = select({\n title: \"분류1\",\n // description: \"Please pick your favorite stooge.\",\n options: keys,\n value: \"프로그램명\",\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"viewof key2 = select({\n title: \"분류2\",\n // description: \"Please pick your favorite stooge.\",\n options: keys,\n value: \"단위사업명\",\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"md`세출/지출 세목 예산편성현황(총지출)**\n* 출처-재정공개시스템\n* https://www.openfiscaldata.go.kr/portal/service/openInfPage.do?infId=8W0HXLJO455EEHMAJE2V9433950`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"drawit = {\n drawVoronoiTreemap();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"budget_nested = nesting(\n attr == \"전체\" || !matchingValue\n ? budget.filter(d => d.회계연도 == year)\n : budget.filter(d => d.회계연도 == year && d[attr] == matchingValue),\n key1[0],\n key2[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"additionalKeyword = \"여성가족부\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"bigmoney = 3000000000","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"bigmoney2 = 10000000","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"valueVariable = \"국회확정금액(천원)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"budget = d3.csvParse(\n await FileAttachment(\"여성가족부총지출2007-2021.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"keys = Object.keys(budget[0]).filter(d => !d.match(\"금액\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"departments = d3\n .groups(budget, d => d.소관명)\n .map(d => ({\n key: d[0],\n budget: d3.sum(d[1].map(k => k[\"국회확정금액(천원)\"]))\n // budget: d3.sum(d[1].map(k => k.국회확정금액_천원))\n }))\n .sort((a, b) => d3.descending(a.budget, b.budget))\n .map(d => d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"categories = new Set(budget.map(d => d.분야명))","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"function nesting(data, key1, key2) {\n const simpleBudget = [];\n\n data.map(d => {\n const item = {};\n item[key1] = d[key1];\n item[key2] = d[key2];\n item.budget = d[valueVariable];\n simpleBudget.push(item);\n });\n\n // return simpleBudget;\n\n const nested = d3.rollups(\n simpleBudget,\n d => d3.sum(d.map(v => v.budget)),\n d => d[key1],\n d => d[key2]\n );\n\n const kv = nested.map(d => ({\n key: d[0],\n values: makeDictionary(d, key1, key2)\n }));\n\n return { key: \"root_nest\", values: kv.filter(d => d.key) };\n\n function makeDictionary(d, key1, key2) {\n // d[1].map(k => ({ key1: d[0], key2: k[0], budget: +k[1] }))\n if (d[1].length == 0) console.log(d);\n\n const list = [];\n d[1].map(k => {\n const item = {};\n item[key1] = d[0];\n item[key2] = k[0];\n item.budget = k[1] ? k[1] : 1;\n list.push({ key: k[0], values: [item] });\n });\n return list;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"budget_hierarchy = d3.hierarchy(budget_nested, d => d.values).sum(d => d.budget)","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"pieRatio = pieSizeToggle == \"variable\"\n ? Math.sqrt(budget_hierarchy.value / 1564930000)\n : 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"html`\n\n@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"function multiline(raw) {\n let count = 0;\n const paragraphs = raw.split(\"|\");\n let text = paragraphs[0];\n text = text ? text.replace(\"(\", \" (\") : \"\";\n for (let i = 0; i < text.length; i++) {\n count =\n text.substr(i, 1) == \" \"\n ? 0\n : text.substr(i, 1) != \")\"\n ? count + 1\n : count;\n if (count == 8) {\n text = text.substr(0, i) + \" \" + text.substr(i);\n count = 0;\n }\n }\n const words = text.trim().split(/ /);\n let lines = [];\n let lineCount = 0;\n lines[0] = \"\";\n words.map((d) => {\n if (d.length + count > 6) {\n lineCount += 1;\n count = 0;\n lines[lineCount] = \"\";\n }\n lines[lineCount] += d + \" \";\n count += d.length;\n });\n\n const meanLength = d3.mean(lines.map((d) => d.length));\n\n if (paragraphs.length == 2) lines.push(paragraphs[1]);\n const html = lines\n .map((d, i) => `${d}`)\n .join(\"\");\n return `${html}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = 800 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"width = 800 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"margin = ({ top: 50, right: 20, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"// bigFormat = d3.format(\",.0f\")\nbigFormat = d => {\n const n = d * 1000;\n const 조 = d3.format(\",.0f\")(parseInt(n / 10 ** 12) % 10 ** 4);\n const 억 = d3.format(\",.0f\")(parseInt(n / 10 ** 8) % 10 ** 4);\n const 만 = d3.format(\",.0f\")(parseInt(n / 10 ** 4) % 10 ** 4);\n\n return (\n (조 != \"0\" ? 조 + \"조 \" : \" \") +\n (억 != \"0\" ? 억 + \"억 \" : \" \") +\n (n < 10 ** 8 ? 만 + \"만 \" : \" \")\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"ellipse = d3\n .range(100)\n .map(i => [\n (width * pieRatio * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * pieRatio * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"regionColor = d3\n .scaleOrdinal()\n .domain(categories)\n .range(cardColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"function colorHierarchy(hierarchy) {\n if(hierarchy.depth === 0) {\n hierarchy.color = 'black';\n } else if(hierarchy.depth === 1){\n hierarchy.color = regionColor(hierarchy.data.key);\n } else {\n hierarchy.color = hierarchy.parent.color;\n }\n if(hierarchy.children) {\n hierarchy.children.forEach( child => colorHierarchy(child))\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"d3 = require(\"d3\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\", 'seedrandom@2.4.3/seedrandom.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { checkbox, select, slider, radio, text } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}