2e:null 2f:["$","title",null,{"children":"보로노이 트리맵 만들기 | taekie | Observable"}] 34:T15aa,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(matchingValue + " " + bigFormat(budget_hierarchy.value)); const voronoi = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const labels = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const pop_labels = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const labels1 = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let seed = new Math.seedrandom(20); 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', d.selected); }) .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(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 > 8) return 1.2; if (ratio < 0.1) return 0.5; return d3 .scaleLog() .domain([0.1, 8]) .range([0.5, 1.2])(ratio); } function fontScale2(d) { const ratio = (d.value / budget_hierarchy.value) * 100; if (ratio > 8) return 1; if (ratio < 0.1) return 0.5; return d3 .scaleLog() .domain([0.1, 8]) .range([0.5, 1])(ratio); } function fontOpacity(d) { 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.budget > bigmoney || d.selected) { return 1; } else { return 0; } } 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', 'middle') .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', 'middle') .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)) .attr('opacity', d => fontOpacity(d)); pop_labels .selectAll('text') .data(allNodes.filter(d => d.depth === 1)) .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(d3.sum(d.data.values.map(v => v.values[0].budget)))) .attr('opacity', d => d3.sum(d.data.values.map(v => v.values[0].budget)) > bigmoney ? 1 : 0 ); }35: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]; }36:[{"id":"6ad1fe74b12d7aec95b1c8b960bd1de0d35f339e9e2b0a4397265a588c46dc36f57b5bd649ae368bedb79cabf99e10cf7ea5cf6c54883c4bbacbf6b6529190de","href":"https://static.observableusercontent.com/files/6ad1fe74b12d7aec95b1c8b960bd1de0d35f339e9e2b0a4397265a588c46dc36f57b5bd649ae368bedb79cabf99e10cf7ea5cf6c54883c4bbacbf6b6529190de","name":"세출_지출세부사업예산편성현황(총지출).csv","type":"text/csv","lastModified":1628033113547.941,"size":2148519}] 32:{"id":"b42ebfb8022f030f","slug":"voronoi_treemap","title":"보로노이 트리맵 만들기","thumbnail":"0f1009bfb4bb9aab36de5129241989295834e198aa78364dd198199c74a73ec5","access_level":"public","create_time":"$D2021-08-03T23:25:13.547Z","update_time":"$D2021-08-04T22:40:18.133Z","view_time":null,"first_public_time":"$D2021-08-04T00:03:41.661Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b7e5b2f89b823a97","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":"pro_2024"},"version":958,"publish_version":958,"role":null,"authored":false,"authors":[{"type":"individual","id":"8bc558cbad6934ee","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":null}],"members":[{"type":"individual","id":"8bc558cbad6934ee","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"보로노이 트리맵 만들기","cells":[{"id":0,"value":"md`# 보로노이 트리맵 만들기\n- tidy data 형식의 csv파일로 보로노이 트리맵을 간단히 만들 수 있습니다. \n- https://observablehq.com/@will-r-chase/voronoi-treemap 를 포크해서 수정 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"viewof matchingValue = {\n const values = Array.from(new Set(budget.map(d => d[attr]))).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.filter(k => k[attr] == v).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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`## How to use`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`#### 1. tidy data 형식의 csv 파일을 첨부합니다\n첫번째 열에는 변수, 각 행에는 관측값이 변수 순서대로 적혀 있는 형식입니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"csvFile = FileAttachment(\n \"연령_및_성별_인구__시군구_20210804091022@2.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"budget = d3.csvParse(await csvFile.text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"md`#### 2. 값으로 나타낼 컬럼명을 적어줍니다`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"valueVariable = \"인구(내국인) (명)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"md`#### 큰 값 미리 보여주기`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"bigmoney = 100000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"bigFormat(bigmoney)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"unit = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"md`## Voronoi Treemap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"drawit = {\n drawVoronoiTreemap();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"budget_nested = nesting(\n attr == \"전체\" || !matchingValue\n ? budget\n : budget.filter(d => d[attr] == matchingValue),\n key1[0],\n key2[0]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"keys = Object.keys(budget[0]).filter(d => !d.match(\"금액\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"categories = new Set(budget.map(d => d.분야명))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"budget_hierarchy = d3.hierarchy(budget_nested, d => d.values).sum(d => d.budget)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"bigFormat = d => {\n //천원 단위여서\n const n = d * unit;\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 (n >= 10 ** 12 ? 조 + \"조 \" : \"\") +\n (억 != \"0\" ? 억 + \"억 \" : \"\") +\n (n < 10 ** 8 ? 만 + \"만 \" : \"\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"function multiline(text) {\n let count = 0;\n text = text ? String(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 == 7) {\n text = text.substr(0, i) + \" \" + text.substr(i);\n count = 0;\n }\n }\n const words = text.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 const html = lines\n .map((d, i) => `${d}`)\n .join(\"\");\n return `${html}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 800 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"width = 800 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"margin = ({ top: 50, right: 20, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"ellipse = d3\n .range(100)\n .map(i => [\n (width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"regionColor = d3\n .scaleOrdinal()\n .domain(categories)\n .range(cardColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import { checkbox, select, slider, radio, text } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"