29:null 2a:["$","title",null,{"children":"Mapa de Colombia con San Andrés y Providencia V2 | Néstor Andrés Peña | Observable"}] 2f:T16fc,async function ColombiaChart( data, { id = ([x]) => x, value = ([, y]) => y, tooltipContent = null, width_ = 600, height_ = 600, nivel1 = true, nivel2 = true, nivel3 = false, colorMunicipios = "#fff", sColorMunicipios = "#dcdcdc", sWMunicipios = 0.5, colorDptos = "#fff", sColorDptos = "#999", sWDptos = 0.5, colorFondo = "#fff", colorPaises = "#dcdcdc", sanPro = true, sColorSanPro = "#333333", colorSanPro = "#fff", sanProBBox = { top: 10, left: 10, width: 150, padding: 10 }, tipo = "color", colorScale = d3 .scaleLinear() .range(["#fff", "#333"]) .interpolate(d3.interpolateRgb), picosScale = d3.scaleLinear().range([0, 50]), picosColor = "red", colorOrdinalRange = null, burbujaScale = d3.scalePow().range([0, 35]), burbujaColumnaR = null, label_nivel2 = false, zoom = false, zoomFilter = false, scaleDomain = null, picosDomain = null, burbujasMaxStroke = true, projectionType = "mercator" } = {} ) { const B = burbujaColumnaR ? d3.map(data, burbujaColumnaR) : null; const C = tooltipContent ? d3.map(data, tooltipContent) : null; const N = d3.map(data, id); const V = d3.map(data, value); const tooltipId = Math.random() .toString(36) .replace(/[^a-z]+/g, "") .substr(0, 5); const contentId = Math.random() .toString(36) .replace(/[^a-z]+/g, "") .substr(0, 5); const main_projection = d3.geoMercator(); if (projectionType === "spherical") { } const container = d3.select( html`

${plantillaTooltip_( tooltipId )}${plantillaContent_(contentId)}

` ); const tooltipDiv = container.select(`#${tooltipId}`); const contentDiv = container.select(`#${contentId}`); contentDiv.select("nav").on("click", () => { contentDiv.attr("style", "display: none"); }); const svg = container .append("svg") .attr("width", width_) .attr("height", height_) .attr("viewBox", `0 0 ${width_} ${height_}`); const patternSize = 4; const patternWidth = 2; const patternAngle = 30; const patternColor = colorPaises; // Credits pattern: Carmen Torrecilla const defs = svg.append("defs"); const hatchStripes = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "hatchStripes"); hatchStripes .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", patternColor) .style("stroke-width", patternWidth); svg .append("rect") .attr("width", width_) .attr("height", height_) .attr("fill", colorFondo); const nivel_1_group = svg.append("g"); const nivel_2_group = svg.append("g"); const nivel_3_group = svg.append("g"); const extra_group = svg.append("g"); if (nivel1 || nivel2 || nivel3) { main_projection.fitSize([width_, height_ - 20], nivel_2); } if (zoom) { let nivel_2_copy = { ...nivel_2 }; if (typeof zoom === "string") { main_projection.fitSize([width_, height_ - 20], { type: "FeatureCollection", features: nivel_2_copy.features.filter( (d) => d.properties["dpto_ccdgo"] === zoom ) }); } else if (Array.isArray(zoom)) { main_projection.fitSize([width_, height_ - 20], { type: "FeatureCollection", features: nivel_2_copy.features.filter((d) => zoom.includes(d.properties["dpto_ccdgo"]) ) }); } } if (tipo === "color") { // scale = d3.scaleSequential([d3.min(V),d3.max(V)], d3.interpolateViridis) colorScale.domain([0, d3.max(V)]); if (typeof V[0] === "string") { colorScale = d3.scaleOrdinal().range(d3.schemePastel1); if (colorOrdinalRange) colorScale.range(colorOrdinalRange); } } if (scaleDomain) { colorScale.domain(scaleDomain); } if (nivel1) { dibujarNivel1( nivel_1_group, main_projection, colorFondo, tooltipDiv, container ); } if (nivel2 && !nivel3) { drawCompleteLevel( nivel_2, nivel_2_group, colorScale, burbujaScale, N, zoomFilter, V, zoom, burbujaColumnaR, B, tipo, colorOrdinalRange, scaleDomain, main_projection, colorDptos, sColorDptos, sWDptos, tooltipDiv, container, picosScale, picosDomain, extra_group, "nivel_2", "dpto_ccdgo", updateContent ); } if (nivel3) { drawCompleteLevel( nivel_3, nivel_3_group, colorScale, burbujaScale, N, zoomFilter, V, zoom, burbujaColumnaR, B, tipo, colorOrdinalRange, scaleDomain, main_projection, colorMunicipios, sColorMunicipios, sWMunicipios, tooltipDiv, container, picosScale, picosDomain, extra_group, "nivel_3", "mpio_ccnct", updateContentNivel3 ); } svg .append("rect") .attr("fill", "rgba(255,255,255,0.95)") .attr("x", 0) .attr("y", height_ - 50) .attr("width", 350) .attr("height", 50); const legend_group = svg .append("g") .attr("transform", `translate(${10} ${height_ - 50})`); if (typeof V[0] !== "string") { const colorLegend = Legend(colorScale); const legend = d3.select(colorLegend); // const l = legend.innerHTML legend_group.html(legend.node().innerHTML); } else { const colorLegend = Swatches(colorScale); const l = d3.select(colorLegend); container.node().append(l.node()); } return Object.assign(container.node()); }30:T6cb,drawCompleteLevel = ( nivel_features, nivel_group, colorScale, burbujaScale, N, zoomFilter, V, zoom, burbujaColumnaR, B, tipo, colorOrdinalRange, scaleDomain, main_projection, colorDptos, sColorDptos, sWDptos, tooltipDiv, container, picosScale, picosDomain, extra_group, className, propertie, updateContent_ ) => { let nivel = appendDataToFeatures( nivel_features, N, zoomFilter, V, zoom, burbujaColumnaR, B, propertie ); const nivel2_node = drawLevel( nivel_group, nivel, main_projection, tipo, colorDptos, colorScale, sColorDptos, sWDptos, tooltipDiv, container, className, updateContent_ ); if (tipo === "picos" && typeof V[0] !== "string") { picosScale.domain([0, d3.max(V)]); colorScale.domain([0, d3.max(V)]); if (scaleDomain) { colorScale.domain(scaleDomain); } if (picosDomain) { picosScale.domain(picosDomain); } const nivel2_node_picos = drawPicos( extra_group, nivel, main_projection, colorScale, picosScale, tooltipDiv, container, className + "_picos" ); } if (tipo === "burbujas" && typeof V[0] !== "string") { burbujaScale.domain([0, d3.max(V)]); if (burbujaColumnaR) burbujaScale.domain([0, d3.max(B)]); colorScale.domain([0, d3.max(V)]); if (scaleDomain) { colorScale.domain(scaleDomain); } const burbujas = drawBurbujas( container, nivel, burbujaScale, colorScale, burbujaColumnaR, main_projection, extra_group, tooltip, tooltipDiv, invalidation, className + "_burbujas" ); } }31:T58e,drawBurbujas = ( container, nivel, burbujaScale, colorScale, burbujaColumnaR, main_projection, extra_group, tooltip, tooltipDiv, invalidation, className ) => { const node = extra_group .selectAll(`.${className}`) .data(nivel.features) .join("g") .attr("class", className) .call(tooltip, tooltipDiv, container); const simulation = d3 .forceSimulation(nivel.features) .force( "x", d3.forceX((d) => { const coor = main_projection(d3.geoCentroid(d.geometry)); return coor[0]; }) ) .force( "y", d3.forceY((d) => { const coor = main_projection(d3.geoCentroid(d.geometry)); return coor[1]; }) ) .force( "distancia", d3 .forceCollide((d) => { if (d.data) { return burbujaScale(d.data.value); } }) .iterations(2) ) .on("tick", () => { node.attr("transform", (d) => `translate(${d.x} ${d.y})`); }); node .append("circle") .attr("r", (d) => { if (d.data && !burbujaColumnaR) { return burbujaScale(d.data.value); } }) .attr("fill", (d) => { if (d.data) { return colorScale(d.data.value); } else return "#999"; }) .attr("stroke", (d) => colorScale(d3.max(colorScale.domain()))); invalidation.then(() => simulation.stop()); return node; }32:T400,appendDataToFeatures = ( nivel, N, zoomFilter, V, zoom, burbujaColumnaR, B, propertie ) => { let new_nivel = { type: "FeatureCollection", features: nivel.features.map((e) => { const d = { ...e }; d["data"] = null; d["group"] = null; let index = N.findIndex((t) => d.properties[propertie] === t); if (index >= 0 && !zoomFilter) { d["data"] = { value: V[index] }; } else if (zoomFilter && zoom) { if (typeof zoom === "string") { if (d.properties["dpto_ccdgo"] === zoom) { d["data"] = { value: V[index] }; } } else if (Array.isArray(zoom)) { if (zoom.includes(d.properties["dpto_ccdgo"])) { d["data"] = { value: V[index] }; } } } if (burbujaColumnaR && index >= 0) { d["group"] = { value: B[index] }; } return d; }) }; return new_nivel; }33:T845,plantillaTooltip_ = (tooltipId) => { return `

`; }34:[] 2d:{"id":"c9dc99dba4ad8c35","slug":"mapa-de-colombia-con-san-andres-y-providencia-v2","title":"Mapa de Colombia con San Andrés y Providencia V2","thumbnail":"438f6198e44960c43ed9f7cccb9f8b62686e01c105173b02145b75b00432a5a6","access_level":"public","create_time":"$D2023-01-14T23:09:25.209Z","update_time":"$D2024-01-21T18:29:30.568Z","view_time":null,"first_public_time":"$D2023-01-14T23:09:25.209Z","has_unpublished_edits":null,"fork":{"id":"ca27d42871207a0a","slug":"mapa-de-colombia-con-san-andres-y-providencia","title":"Mapa de Colombia con San Andrés y Providencia","owner":{"id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña"}},"stars":0,"starred":false,"owner":{"type":"team","id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":"starter_2024"},"version":1631,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a42999b55e39bcd","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":null}],"members":[{"type":"individual","id":"6a42999b55e39bcd","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mapa de Colombia con San Andrés y Providencia V2","cells":[{"id":0,"value":"md`# Mapa de Colombia con San Andrés y Providencia V2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"howto(\"ColombiaChart\", {open: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"departamentos_clean = nivel_2.features.map(d=>d.properties)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"chart = ColombiaChart(data, {\n id: (d) => d.name,\n value: (d) => d.value + \"\",\n burbujaColumnaR: (d) => d.value,\n width_: width,\n height_: 700,\n // nivel3: true,\n nivel2: true,\n colorMunicipios: \"#fff\",\n sColorMunicipios: \"#333\",\n sWMunicipios: 0.25,\n departamentos_: true,\n colorDptos: \"#fff\",\n sColorDptos: \"#999\",\n sColorSanPro: \"white\",\n sWDptos: 0.5,\n sanPro: true,\n tipo: \"color\",\n colorFondo: \"#fff\",\n sColorSanPro: \"#333\",\n colorScale: d3.scaleLinear().range([\"#fff\", \"orange\"]),\n colorRange: d3.schemePastel1,\n sanProBBox: { top: 10, left: 10, width: 150, padding: 20 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"data = [\n {\n name: \"88\",\n value: 323\n },\n {\n name: \"85\",\n value: 12\n },\n {\n name: \"50\",\n value: 456\n },\n {\n name: \"05\",\n value: 231\n },\n {\n name: \"81\",\n value: 32\n },\n {\n name: \"99\",\n value: 32\n },\n {\n name: \"63\",\n value: 12\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"drawPicos = (\n extra_group,\n nivel,\n main_projection,\n colorScale,\n picosScale,\n tooltipDiv,\n container,\n className\n) => {\n const node = extra_group\n .selectAll(`.${className}`)\n .data(nivel.features)\n .join(\"g\")\n .attr(\"class\", className)\n .attr(\"transform\", (d) => {\n const resp = main_projection(d3.geoCentroid(d.geometry));\n return `translate(${resp[0]}, ${resp[1]})`;\n });\n\n node\n .append(\"path\")\n .attr(\"fill\", (d) => {\n if (d.data) return colorScale(d.data.value);\n })\n .attr(\"stroke\", (d) => colorScale(d3.max(colorScale.domain())))\n .attr(\"stroke-width\", 1)\n .attr(\"d\", (d) => {\n if (d.data) return spike(picosScale(d.data.value));\n })\n .call(tooltip, tooltipDiv, container);\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"drawLevel = (\n nivel_2_group,\n new_nivel_2,\n main_projection,\n tipo,\n colorDptos,\n colorScale,\n sColorDptos,\n sWDptos,\n tooltipDiv,\n container,\n className,\n updateContent_\n) => {\n const node = nivel_2_group\n .selectAll(`.${className}`)\n .data(\n new_nivel_2.features.filter(\n (d) =>\n d.properties[\"dpto_cnmbr\"] !==\n \"ARCHIPIÉLAGO DE SAN ANDRÉS, PROVIDENCIA Y SANTA CATALINA\"\n )\n )\n .join(\"g\")\n .attr(\"class\", className);\n\n node\n .append(\"path\")\n .attr(\"d\", d3.geoPath(main_projection))\n .attr(\"fill\", (d) => {\n if (tipo !== \"color\") return colorDptos;\n else if (tipo === \"color\" && d.data !== null) {\n if (d.data.value) return colorScale(d.data.value);\n else return \"#fff\";\n } else if (tipo === \"color\" && d.data === null) return colorDptos;\n else return \"#fff\";\n })\n .attr(\"stroke\", sColorDptos)\n .attr(\"stroke-width\", sWDptos)\n .call(tooltip, tooltipDiv, container, updateContent_);\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"updateContent = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this)\n\n tooltip.attr('class',\"\")\n\n tooltip.select('h5')\n .html(`${d.properties.dpto_cnmbr} | ${d.properties['dpto_ccdgo']}`)\n\n if(d.data !== null){\n tooltip.select('p')\n .html(d.data.value)\n } else {\n tooltip.select('p')\n .html(\"\")\n }\n \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"updateContentNivel1 = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this);\n\n tooltip.attr(\"class\", \"etiqueta\");\n\n tooltip.select(\"h5\").html(`${d.properties.NAME}`);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"updateContentNivel3 = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this)\n tooltip.attr('class',\"\")\n \n tooltip.select('h5')\n .html(`${d.properties.mpio_cnmbr} | ${d.properties['mpio_ccnct']}`)\n\n if(d.data !== null){\n tooltip.select('p')\n .html(`${d.properties.dpto_cnmbr}${d.data.value}`)\n } else {\n tooltip.select('p')\n .html(\"\")\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"dibujarNivel1 = (\n nivel_1_group,\n main_projection,\n colorFondo,\n tooltipDiv,\n container\n) => {\n nivel_1_group\n .selectAll(\".cercanos\")\n .data(cercanos.features.filter((d) => d.properties[\"iso_a2\"] !== \"CO\"))\n .join(\"path\")\n .attr(\"class\", \"cercanos\")\n .attr(\"d\", d3.geoPath(main_projection))\n .attr(\"fill\", `url(#hatchStripes`)\n .attr(\"stroke\", colorFondo)\n .attr(\"stroke-width\", 2)\n .call(tooltip, tooltipDiv, container, updateContentNivel1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"plantillaContent_ = (contentId) => {\n return `\n \n \n

\n \n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"tooltip = (selectionGroup, tooltipDiv, containerDiv, updateContent_) => {\n selectionGroup.each(function () {\n d3.select(this)\n .on(\"mouseout\", handleMouseover)\n .on(\"mousemove\", handleMousemove);\n\n function handleMouseover() {\n tooltipDiv.style(\"display\", \"none\");\n }\n\n function handleMousemove(event, d) {\n const w = containerDiv.node().getBoundingClientRect().width;\n\n if (event.layerX > w / 2) {\n tooltipDiv\n .style(\"left\", event.layerX + 20 + \"px\")\n .style(\"top\", event.layerY + \"px\")\n .style(\"display\", \"block\")\n .style(\"transform\", \"translate(calc(-100% - 60px), 0px)\")\n .call(updateContent_, d);\n } else {\n tooltipDiv\n .style(\"left\", event.layerX + 20 + \"px\")\n .style(\"top\", event.layerY + \"px\")\n .style(\"display\", \"block\")\n .style(\"transform\", \"translate(0px, 0px)\")\n .call(updateContent_, d);\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"san_andres = {\n let resp = san_an.features.filter(d=>d.properties['dpto_cnmbr'] === 'ARCHIPIÉLAGO DE SAN ANDRÉS, PROVIDENCIA Y SANTA CATALINA')\n let resp_copy = [...resp]\n resp_copy[0].geometry.coordinates = [resp_copy[0].geometry.coordinates[0]]\n return resp_copy\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"providencia = {\n let resp = provi.features.filter(d=>d.properties['dpto_cnmbr'] === 'ARCHIPIÉLAGO DE SAN ANDRÉS, PROVIDENCIA Y SANTA CATALINA')\n let resp_copy = [...resp]\n resp_copy[0].geometry.coordinates = [resp_copy[0].geometry.coordinates[4],resp_copy[0].geometry.coordinates[5]]\n return resp_copy\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"provi = d3.json('https://gist.githubusercontent.com/nestorandrespe/2220a8f9d4095a2983f87504603d6ef1/raw/9bf7b991e80e21156cd04349df061cd2e44ef099/departamentos.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"san_an = d3.json('https://gist.githubusercontent.com/nestorandrespe/2220a8f9d4095a2983f87504603d6ef1/raw/9bf7b991e80e21156cd04349df061cd2e44ef099/departamentos.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"nivel_2 = d3.json('https://gist.githubusercontent.com/nestorandrespe/2220a8f9d4095a2983f87504603d6ef1/raw/9bf7b991e80e21156cd04349df061cd2e44ef099/departamentos.json')\n// departamentos = d3.json(\"https://gist.githubusercontent.com/john-guerra/43c7656821069d00dcbc/raw/3aadedf47badbdac823b00dbe259f6bc6d9e1899/colombia.geo.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"nivel_3 = {\n return d3.json('https://gist.githubusercontent.com/nestorandrespe/f2533e9bf810ee42ca9fa617ce138530/raw/b6bb3903e78c1a831ca442f94741fb4feef52921/municipios.json')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"projection_sa = d3.geoMercator()\n .translate([40, 100])\n .scale(40000)\n .center([-81.72729492187501, 12.543839666237682])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"projection_pro = d3.geoMercator()\n .translate([130, 60])\n .scale(40000)\n .center([-81.35925292968751, 13.378931658431565])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"cercanos = d3.json(\"https://gist.githubusercontent.com/nestorandrespe/4576e60ceed08d0395f585d549b02baf/raw/63983bb486a9728a5f4d10efd28fbceb67bce92c/mundo.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"projection = d3.geoMercator()\n .translate([width/2, width/2])\n .scale(3000)\n .center([-73.67431640625001,4.124080991005611])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"spike = (length, width = 7) => `M${-width / 2},0L0,${-length}L${width / 2},0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"import {howto} from \"@nestorandrespe/example-components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"