2c:null 2d:["$","title",null,{"children":"Arranging Labels - Map of United Kingdom in d3 | Rob | Labs | Observable"}] 32:Taa8,finalMap= { var width = 960, height = 1160 var projection = d3.geoAlbers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(1200 * 5) .translate([width / 2, height / 2]) const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); var path = d3.geoPath() .projection(projection) var subunits = topojson.feature(uk, uk.objects.subunits) var places = topojson.feature(uk, uk.objects.places) console.log(subunits, places) var subunitFillColor = { "SCT": "#ddc", "WLS": "#cdd", "NIR": "#cdc", "ENG": "#dcd", "IRL": "none" } svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("fill", function(d) { console.log(d.id, subunitFillColor[d.id]) return subunitFillColor[d.id] }) .attr("d", path) svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary IRL") .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.selectAll(".subunit-label") .data(subunits.features) .enter().append("text") .attr("class", function(d) { return "subunit-label " + d.id; }) .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("fill", "#777") .attr("fill-opacity", ".5") .attr("font-size", "20px") .attr("font-weight", "300") .attr("text-anchor", "middle") .text(function(d) { return d.properties.name; }) svg.append("path") .datum(places) .attr("d", path) .attr("class", "place") svg.selectAll(".place-label") .data(places.features) .enter().append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) .attr("dy", ".35em") .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }) .text(function(d) { return d.properties.name; }) return svg.node(); }33:T675,step5 = { var width = 960, height = 1160 var projection = d3.geoAlbers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(1200 * 5) .translate([width / 2, height / 2]) const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); var path = d3.geoPath() .projection(projection) var subunits = topojson.feature(uk, uk.objects.subunits) var places = topojson.feature(uk, uk.objects.places) console.log(subunits, places) var subunitFillColor = { "SCT": "#ddc", "WLS": "#cdd", "NIR": "#cdc", "ENG": "#dcd", "IRL": "none" } svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("fill", function(d) { console.log(d.id, subunitFillColor[d.id]) return subunitFillColor[d.id] }) .attr("d", path) svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary IRL") .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") return svg.node(); }34:Ta33,step6 = { var width = 960, height = 1160 var projection = d3.geoAlbers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(1200 * 5) .translate([width / 2, height / 2]) const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); var path = d3.geoPath() .projection(projection) var subunits = topojson.feature(uk, uk.objects.subunits) var places = topojson.feature(uk, uk.objects.places) console.log(subunits, places) var subunitFillColor = { "SCT": "#ddc", "WLS": "#cdd", "NIR": "#cdc", "ENG": "#dcd", "IRL": "none" } svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("fill", function(d) { console.log(d.id, subunitFillColor[d.id]) return subunitFillColor[d.id] }) .attr("d", path) svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary IRL") .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") // svg.selectAll(".subunit-label") // .data(subunits.features) // .enter().append("text") // .attr("class", function(d) { return "subunit-label " + d.id; }) // .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) // .attr("dy", ".35em") // .text(function(d) { return d.properties.name; }) svg.append("path") .datum(places) .attr("d", path) .attr("class", "place") svg.selectAll(".place-label") .data(places.features) .enter().append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) .attr("dy", ".35em") .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }) .text(function(d) { return d.properties.name; }) return svg.node(); }35:Taa9,step7 = { var width = 960, height = 1160 var projection = d3.geoAlbers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(1200 * 5) .translate([width / 2, height / 2]) const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); var path = d3.geoPath() .projection(projection) var subunits = topojson.feature(uk, uk.objects.subunits) var places = topojson.feature(uk, uk.objects.places) console.log(subunits, places) var subunitFillColor = { "SCT": "#ddc", "WLS": "#cdd", "NIR": "#cdc", "ENG": "#dcd", "IRL": "none" } svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("fill", function(d) { console.log(d.id, subunitFillColor[d.id]) return subunitFillColor[d.id] }) .attr("d", path) svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary IRL") .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.selectAll(".subunit-label") .data(subunits.features) .enter().append("text") .attr("class", function(d) { return "subunit-label " + d.id; }) .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("fill", "#777") .attr("fill-opacity", ".5") .attr("font-size", "20px") .attr("font-weight", "300") .attr("text-anchor", "middle") .text(function(d) { return d.properties.name; }) svg.append("path") .datum(places) .attr("d", path) .attr("class", "place") svg.selectAll(".place-label") .data(places.features) .enter().append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) .attr("dy", ".35em") .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }) .text(function(d) { return d.properties.name; }) return svg.node(); }36:T87a, function arrangeLabels(svg) { var move = 1; while (move > 0) { move = 0; svg.selectAll(".label") .each(function () { var that = this, a = this.getBoundingClientRect(); svg.selectAll(".label") .each(function () { if (this != that) { var b = this.getBoundingClientRect(); if ((Math.abs(a.left - b.left) * 2 < (a.width + b.width)) && (Math.abs(a.top - b.top) * 2 < (a.height + b.height))) { // overlap, move labels var dx = (Math.max(0, a.right - b.left) + Math.min(0, a.left - b.right)) * 0.01, dy = (Math.max(0, a.bottom - b.top) + Math.min(0, a.top - b.bottom)) * 0.02, tt = getTransformation(d3.select(this).attr("transform")), to = getTransformation(d3.select(that).attr("transform")); move += Math.abs(dx) + Math.abs(dy); to.translate = [to.translate[0] + dx, to.translate[1] + dy]; tt.translate = [tt.translate[0] - dx, tt.translate[1] - dy]; d3.select(this).attr("transform", "translate(" + tt.translate + ")"); d3.select(that).attr("transform", "translate(" + to.translate + ")"); a = this.getBoundingClientRect(); } } }); }); } }37:T732, function getTransformation(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseVal.consolidate().matrix; // Below calculations are taken and adapted from the private function // transform/decompose.js of D3's module d3-interpolate. var { a, b, c, d, e, f } = matrix; // ES6, if this doesn't work, use below assignment // var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5 var scaleX, scaleY, skewX; if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX; if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX; if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY; if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX; return { translateX: e, translateY: f, rotate: Math.atan2(b, a) * 180 / Math.PI, skewX: Math.atan(skewX) * 180 / Math.PI, scaleX: scaleX, scaleY: scaleY, translate: [e, f] }; }38:Tae4,step8 = { var width = 960, height = 1160 var projection = d3.geoAlbers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(1200 * 5) .translate([width / 2, height / 2]) const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); var path = d3.geoPath() .projection(projection) var subunits = topojson.feature(uk, uk.objects.subunits) var places = topojson.feature(uk, uk.objects.places) console.log(subunits, places) var subunitFillColor = { "SCT": "#ddc", "WLS": "#cdd", "NIR": "#cdc", "ENG": "#dcd", "IRL": "none" } svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("fill", function(d) { console.log(d.id, subunitFillColor[d.id]) return subunitFillColor[d.id] }) .attr("d", path) svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.append("path") .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; })) .attr("d", path) .attr("class", "subunit-boundary IRL") .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2") .attr("stroke-linejoin", "round") svg.selectAll(".subunit-label") .data(subunits.features) .enter().append("text") .attr("class", function(d) { return "subunit-label " + d.id; }) .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("fill", "#777") .attr("fill-opacity", ".5") .attr("font-size", "20px") .attr("font-weight", "300") .attr("text-anchor", "middle") .text(function(d) { return d.properties.name; }) svg.append("path") .datum(places) .attr("d", path) .attr("class", "place") svg.selectAll(".label") .data(places.features) .enter().append("text") .attr("class", "label") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) .attr("dy", ".35em") .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }) .text(function(d) { return d.properties.name; }) setTimeout(d=>{arrangeLabels(svg)},0); // hacky, but it works :/ return svg.node(); }39:[] 30:{"id":"04f568b58c75f146","slug":"great-britain-in-d3","title":"Arranging Labels - Map of United Kingdom in d3","thumbnail":"ad98129dadc522cabdf34658651dbffc0f1d192355111d6c32370afe81ab9ff7","access_level":"public","create_time":"$D2018-08-08T18:34:03.472Z","update_time":"$D2018-11-14T01:38:21.311Z","view_time":null,"first_public_time":"$D2018-08-08T23:10:34.120Z","has_unpublished_edits":null,"fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"4fb28e57b1ee7ad7","login":"roblabs","name":"Rob | Labs","avatar_url":"https://avatars-next.observableusercontent.com/a46c63fe02259f75113a4e65721ca91dcd78e54ad768500cc6c0975a9fe307a2","tier":"starter_2024"},"version":310,"publish_version":310,"role":null,"authored":false,"authors":[{"type":"individual","id":"979e07e6bb09b05a","login":"roblabs","name":"Rob | Labs","avatar_url":"https://avatars-next.observableusercontent.com/a46c63fe02259f75113a4e65721ca91dcd78e54ad768500cc6c0975a9fe307a2","tier":null}],"members":[{"type":"individual","id":"979e07e6bb09b05a","login":"roblabs","name":"Rob | Labs","avatar_url":"https://avatars-next.observableusercontent.com/a46c63fe02259f75113a4e65721ca91dcd78e54ad768500cc6c0975a9fe307a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Arranging Labels - Map of United Kingdom in d3","cells":[{"id":140,"value":"md`\n# Arranging Labels - Map of United Kingdom in d3\n\n## Revisting the 2012 post *Let's Make a Map* from @mbostock\n\n* https://bost.ocks.org/mike/map/\n\nThis is a great way to learn d3, d3.Geo, and Observable using an existing, known working TopoJSON data set and maps.\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`\n

\n*caveat* — the styling of the SVG is done in code rather than CSS.\n\nE.G., instead of styling in HTML\n\n

\n\n  html\\`\n     \\< style>\n       .subunit-boundary {\n         fill: none;\n         stroke: #777;\n         stroke-dasharray: 2,2;\n         stroke-linejoin: round;\n    }\n    \\< /style>\n  \\`\n\n

\n\nWe chose to do the styling directly in d3\n\n

\n\n      .attr(\"fill\", \"none\")\n      .attr(\"stroke\", \"#777\")\n      .attr(\"stroke-dasharray\", \"2,2\")\n      .attr(\"stroke-linejoin\", \"round\")\n

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`\n

\n## Step 2, Displaying Polygons\n\n* https://bost.ocks.org/mike/map/#displaying-polygons\n* https://bost.ocks.org/mike/map/step-2.html\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"\nstep2 = {\n \nvar width = 720,\n height = 200\n const projection = d3.geoMercator()\n\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n\n var path = d3.geoPath()\n .projection(projection)\n .pointRadius(2)\n\n var subunits = topojson.feature(uk, uk.objects.subunits)\n var places = topojson.feature(uk, uk.objects.places)\n \n console.log(subunits, places)\n\n svg.selectAll(\".subunit\")\n .data(subunits.features)\n .enter().append(\"path\")\n .attr(\"class\", function(d) { return \"subunit \" + d.id; })\n .attr(\"d\", path)\n\n svg.append(\"path\")\n .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== \"IRL\"; }))\n .attr(\"d\", path)\n .attr(\"class\", \"subunit-boundary\")\n\n svg.append(\"path\")\n .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === \"IRL\"; }))\n .attr(\"d\", path)\n .attr(\"class\", \"subunit-boundary IRL\")\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`\n

\n## Step 3, Displaying Polygons\n\n* https://bost.ocks.org/mike/map/#displaying-polygons\n* https://bost.ocks.org/mike/map/step-3.html\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"\nStep3 = {\n \nvar width = 960,\n height = 1160\n\n var projection = d3.geoAlbers()\n .center([0, 55.4])\n .rotate([4.4, 0])\n .parallels([50, 60])\n .scale(1200 * 5)\n .translate([width / 2, height / 2])\n \n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n\n var path = d3.geoPath()\n .projection(projection)\n\n var subunits = topojson.feature(uk, uk.objects.subunits)\n var places = topojson.feature(uk, uk.objects.places)\n \n console.log(subunits, places)\n\n svg.selectAll(\".subunit\")\n .data(subunits.features)\n .enter().append(\"path\")\n .attr(\"class\", function(d) { return \"subunit \" + d.id; })\n .attr(\"d\", path)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`\n

\n## Step 4, Styling Polygons\n\n* https://bost.ocks.org/mike/map/#styling-polygons\n* https://bost.ocks.org/mike/map/step-4.html\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"\nStep4 = {\n \nvar width = 960,\n height = 1160\n \n var projection = d3.geoAlbers()\n .center([0, 55.4])\n .rotate([4.4, 0])\n .parallels([50, 60])\n .scale(1200 * 5)\n .translate([width / 2, height / 2])\n \n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n\n var path = d3.geoPath()\n .projection(projection)\n\n var subunits = topojson.feature(uk, uk.objects.subunits)\n var places = topojson.feature(uk, uk.objects.places)\n \n console.log(subunits, places)\n\n var subunitFillColor = {\n \"SCT\": \"#ddc\",\n \"WLS\": \"#cdd\",\n \"NIR\": \"#cdc\",\n \"ENG\": \"#dcd\",\n \"IRL\": \"white\"\n }\n\n \n svg.selectAll(\".subunit\")\n .data(subunits.features)\n .enter().append(\"path\")\n .attr(\"class\", function(d) { return \"subunit \" + d.id; })\n .attr(\"fill\", function(d) {\n console.log(d.id, subunitFillColor[d.id])\n return subunitFillColor[d.id]\n })\n .attr(\"d\", path)\n \n\n return svg.node();\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`\n

\n## Step 5, Displaying Boundaries\n\n* https://bost.ocks.org/mike/map/#displaying-boundaries\n* https://bost.ocks.org/mike/map/step-5.html\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`\n

\n## Step 6, Displaying Labels\nhttps://bost.ocks.org/mike/map/#displaying-places\n\nhttps://bost.ocks.org/mike/map/step-6.html\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`\n

\n## Step 7, Country Labels\nhttps://bost.ocks.org/mike/map/#country-labels\n\nhttps://bost.ocks.org/mike/map/step-7.html\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`\n

\n## Step 8. Arrange labels, prevent ovelapping\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`\n

\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"topojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"uk = d3.json(\"https://bost.ocks.org/mike/map/uk.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"