31:T48d,plotCartogram = { cartograms; let cartoMap = new Map(); for (let d of cartoData) cartoMap.set(d.code,d); let data = brazilHexaTile(r); for (let d of data) { let stateDatum = cartoMap.get(d.label); d.value1 = stateDatum.value1; d.value2 = stateDatum.value2; } let svgsel = d3.select ("svg#cartogram1"); let cells = svgsel.selectAll("g").data(data); cells.exit().remove(); let newcells = cells.enter() .append("g") .attr ("transform", d => `translate(${d.x},${d.y})`); newcells.append("path"); newcells.append("text"); cells = newcells.merge(cells); cells.select("path") .transition().duration(1000) .attr ("fill", d => colorScale(d.value1)) .attr ("stroke", "black") .attrTween ("d", function (d) { let prev = this.getAttribute("prev") || 0; return function (t) { let a = sizeScale(prev); let b = sizeScale(d.value2); return hexaPath((1-t)*a+t*b) } }) .attr ("prev", d=>d.value2) cells.select("text") .attr("alignment-baseline", "middle") .style("fill", d => d.value1>0.5 ? "white": "black") .html(d=> d.label) }32:T595,plotCartogram2 = { cartograms; let cartoMap = new Map(); for (let d of cartoData) cartoMap.set(d.code,d); let data = brazilHexaTile(r); for (let d of data) { let stateDatum = cartoMap.get(d.label); d.value1 = stateDatum.value1; d.value2 = stateDatum.value2; } let svgsel = d3.select ("svg#cartogram2"); let cells = svgsel.selectAll("g").data(data); cells.exit().remove(); let newcells = cells.enter() .append("g") .attr ("transform", d => `translate(${d.x},${d.y})`); newcells.append("path").attr("class", "outline"); newcells.append("path").attr("class", "fill"); newcells.append("text"); cells = newcells.merge(cells); cells.select("path.outline") .attr ("d", d=>hexaPath(sizeScale(1)+2)) .attr ("fill", "none") .attr ("stroke", "#aaa"); cells.select("path.fill") // .attr ("d", d=>hexaPath(sizeScale(d.value2))) .transition().duration(1000) .attr ("fill", d => colorScale(d.value1)) .attrTween ("d", function (d) { let prev = this.getAttribute("prev") || 0; return function (t) { let a = sizeScale(prev); let b = sizeScale(d.value2); return hexaPath((1-t)*a+t*b) } }) .attr ("stroke", "none") .attr ("prev", d=>d.value2) cells.select("text") .attr("alignment-baseline", "middle") .style("fill", d => d.value1>0.5 ? "white": "black") .html(d=> d.label) }33:T4e9,plotCartogram3 = { cartograms; let cartoMap = new Map(); for (let d of cartoData) cartoMap.set(d.code,d); let data = brazilHexaTile(r); for (let d of data) { let stateDatum = cartoMap.get(d.label); d.value1 = stateDatum.value1; d.value2 = stateDatum.value2; } let svgsel = d3.select ("svg#cartogram3"); let cells = svgsel.selectAll("g").data(data); cells.exit().remove(); let newcells = cells.enter() .append("g") .attr ("transform", d => `translate(${d.x},${d.y})`); newcells.append("path").attr("class", "outline"); newcells.append("path").attr("class", "fill"); newcells.append("text"); cells = newcells.merge(cells); cells.select("path.outline") .transition().duration(1000) .attr ("d", d=>hexaPath(sizeScale(1)+1)) .attr ("fill", d => colorScale(d.value2)) .attr ("stroke", "none"); cells.select("path.fill") // .attr ("d", d=>hexaPath(sizeScale(d.value2))) .transition().duration(1000) .attr ("fill", d => colorScale2(d.value1)) .attr ("d", d => hexaPath(sizeScale(0.30))) .attr ("stroke", "none") .attr ("prev", d=>d.value2) cells.select("text") .attr("alignment-baseline", "middle") .style("fill", d => "black") .html(d=> d.label) }34:[] 2f:{"title":"Hexagonal hierarchical cartogram for Brazil","cells":[{"id":0,"value":"md`# Hexagonal hierarchical cartogram for Brazil\n\nBasic implementation of *\"Hexagonal hierarchical cartogram: Towards a thematic map of Brazil\"*. InfoDesign v 15 no 1.\n\n(https://infodesign.org.br/infodesign/article/view/563)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"{\n let b = html``;\n b.onclick = () => { mutable cartoData = randomData() }\n return b\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"cartograms = {\n r;\n let div = html`

`;\n let svg = [DOM.svg(cartoSize,cartoSize),DOM.svg(cartoSize,cartoSize),DOM.svg(cartoSize,cartoSize)];\n for (let i = 0; i < svg.length; i++) {\n svg[i].id = \"cartogram\"+(i+1)\n div.append(svg[i])\n }\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`## Main Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"randomData = function () {\n let ctData = [];\n for (let node of states) {\n ctData.push({ code : node, value1 : Math.random(), value2 : Math.random() })\n }\n return ctData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"mutable cartoData = randomData()","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"colorScale = d3.scaleLinear().domain([0,1])\n .interpolate(d3.interpolateHcl)\n .range([d3.rgb(\"#DDDDDD\"), d3.rgb('#333')])","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"colorScale2 = d3.scaleLinear().domain([0,1])\n .interpolate(d3.interpolateHcl)\n .range([d3.rgb(\"#ff0000\"), d3.rgb('#ffee22')])","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"sizeScale = d3.scaleLinear().domain([0,1])\n .range([13,r-2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"cartoSize = 290","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"r = 22","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"hexaTile = function (r, w, h) {\n let dy = r * Math.sqrt(3);\n let dx = 1.5 * r;\n let result = [];\n let even = true;\n let i = 0;\n for (let x = 0; x < w; x += dx) {\n let j = 0;\n for (let y = even?0:dy/2; y < h; y+=dy) {\n result.push ({ x : x, y : y, i : i, j : j })\n j++;\n }\n even = !even\n i++;\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"hexaPath = function (radius = 1) {\n let corners = [];\n let path = \"\";\n for (let i = 0; i < 6; i++) {\n let ang = Math.PI * (i) / 3;\n let [x, y] = [radius * Math.cos(ang), radius * Math.sin(ang)];\n path += (i == 0 ? \"M\" : \"L\") + x + \" \"+y+\" \";\n }\n return path+\"Z\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"brazilHexaTile = function (r) {\n let labelMap = new Map();\n let imax = -1, jmax = -1;\n for (let d of brazilLayout) {\n imax = Math.max(imax,d.i);\n jmax = Math.max(jmax,d.j);\n labelMap.set(d.i*100+d.j,d.label)\n }\n let dy = r * Math.sqrt(3);\n let dx = 1.5 * r;\n let result = [];\n let even = true;\n for (let x = 0, i = 0; i <= imax; x += dx, i++) {\n for (let y = even?0:dy/2, j = 0; j <= jmax; y+=dy, j++) {\n let l = labelMap.get(i*100+j);\n if (l) result.push ({ x : x, y : y, i : i, j : j, label: l})\n }\n even = !even\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"brazilLayout = JSON.parse(`[{\"label\":\"AC\",\"i\":1,\"j\":2},{\"label\":\"RR\",\"i\":2,\"j\":1},{\"label\":\"AM\",\"i\":2,\"j\":2},{\"label\":\"RO\",\"i\":2,\"j\":3},{\"label\":\"PA\",\"i\":3,\"j\":1},{\"label\":\"TO\",\"i\":3,\"j\":2},{\"label\":\"MT\",\"i\":3,\"j\":3},{\"label\":\"MS\",\"i\":3,\"j\":4},{\"label\":\"AP\",\"i\":4,\"j\":1},{\"label\":\"MA\",\"i\":4,\"j\":2},{\"label\":\"DF\",\"i\":4,\"j\":3},{\"label\":\"GO\",\"i\":4,\"j\":4},{\"label\":\"MG\",\"i\":4,\"j\":5},{\"label\":\"PR\",\"i\":4,\"j\":6},{\"label\":\"RS\",\"i\":4,\"j\":7},{\"label\":\"CE\",\"i\":5,\"j\":2},{\"label\":\"PI\",\"i\":5,\"j\":3},{\"label\":\"ES\",\"i\":5,\"j\":4},{\"label\":\"SP\",\"i\":5,\"j\":5},{\"label\":\"SC\",\"i\":5,\"j\":6},{\"label\":\"RN\",\"i\":6,\"j\":2},{\"label\":\"PE\",\"i\":6,\"j\":3},{\"label\":\"BA\",\"i\":6,\"j\":4},{\"label\":\"RJ\",\"i\":6,\"j\":5},{\"label\":\"PB\",\"i\":7,\"j\":2},{\"label\":\"SE\",\"i\":7,\"j\":3},{\"label\":\"AL\",\"i\":8,\"j\":3}]`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`## Hextile authoring interface`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"mutable data = hexaTile (r, 500,500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"mutable dataToAssign = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"states = [\"AC\", \"AM\", \"AP\", \"PA\", \"RO\", \"RR\", \"TO\", \"AL\", \"BA\", \"CE\", \"MA\", \"PB\", \"PE\", \"PI\", \"RN\", \"SE\", \"DF\", \"GO\", \"MT\", \"MS\", \"ES\", \"MG\", \"RJ\", \"SP\", \"PR\", \"SC\", \"RS\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"layout = {\n dataToAssign;\n let r = [];\n for (let d of data) {\n if (d.label) {\n r.push({ label: d.label, i : d.i, j: d.j })\n }\n }\n return JSON.stringify(r)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"function reassign () {\n mutable dataToAssign = states.slice(0)\n mutable data = [];\n for (let t of hexaTile (r, 500,500)) {\n t.label = undefined;\n mutable data.push(t)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"defaultAssignment = {\n mutable dataToAssign = []\n mutable data = [];\n let map = new Map();\n for (let c of brazilLayout) map.set(c.i*10+c.j,c.label);\n for (let t of hexaTile (r, 500,500)) {\n t.label = map.get(t.i*10+t.j);\n mutable data.push(t)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viz = {\n dataToAssign;\n let maindiv = html`

`;\n maindiv.append(DOM.svg(500,500));\n let next = mutable dataToAssign.length == 0 ? \"\" : dataToAssign[0]; \n maindiv.append(html`Next To Assign: ${next}`);\n return maindiv\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"{\n let button = html``\n button.onclick = reassign;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"assignCell = function (d) {\n if (d.label) {\n dataToAssign.unshift(d.label)\n d.label = undefined;\n }\n else {\n d.label = dataToAssign.shift();\n }\n mutable dataToAssign = dataToAssign\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"render = { \n let hpath = hexaPath(r-2);\n let svgsel = d3.select (viz).select(\"svg\");\n svgsel.selectAll(\"g\").remove();\n let cells = svgsel.selectAll(\"g\").data(data);\n cells.exit().remove();\n let newcells = cells.enter()\n .append(\"g\")\n .attr (\"transform\", d => `translate(${d.x},${d.y})`)\n .on (\"click\", assignCell);\n newcells.append(\"path\")\n .attr (\"d\", hpath)\n .attr (\"fill\", d=> d.label ? \"lightgray\" : \"white\")\n .attr (\"stroke\",d=> d.label ? \"black\" : \"#CCC\"); \n newcells.append(\"text\").attr(\"alignment-baseline\", \"middle\");\n svgsel.selectAll(\"g text\")\n .html(d=> d.label || \"\")\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}