2b:null 2c:["$","title",null,{"children":"Mapa departamental de Colombia con hexágonos | Néstor Andrés Peña | Observable"}] 31:T107a,async function ColombiaHexChart(data, { id = d => d.id, value = d => d.value, width_ = "550px", fontSize = 10, colorScale = d3.scaleLinear().range(["#fff", "#333"]).interpolate(d3.interpolateRgb), colorOrdinalRange = null, scaleDomain = null } = {}) { const N = d3.map(data, id) const V = d3.map(data, value) 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) } const tooltipId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) const containerId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) function plantillaTooltip_() { if(typeof(width_) === 'number') width_ = width_ + "px" return `

` } const mapa = await FileAttachment("canvas (3).svg").text(); const document = (new DOMParser).parseFromString(mapa, "image/svg+xml"); const container = d3.select( html`

${plantillaTooltip_()}

` ); const svg = container.append("svg") .attr("width", width_) .attr("height", width_) .attr('viewBox', `0 0 ${550} ${550}`) const tooltipDiv = container.select(`#${tooltipId}`) svg.html(d3.select(document.documentElement).remove().node().innerHTML) const nodes = svg.selectAll(".nodes") nodes.selectAll("text") .attr("font-size", fontSize) .attr('fill', '#333') .attr('font-family', 'sans-serif') .attr("dominant-baseline", "middle") nodes.selectAll("path") .attr('fill', '') nodes .datum((d,i) => { let resp = {...clean[i]} const index = N.findIndex(t=> t === resp.id) if(index > -1) resp.data = { value: V[index] } return resp }) .call(tooltip, tooltipDiv, container) .attr("fill", d=>d.data ? colorScale(d.data.value) : '#fff') .selectAll("path") const legend_group = svg.append("g") // .attr("transform", `translate(${10} ${parseInt(width_.slice(0, width_.length-2)) - 50})`) .attr("transform", `translate(${10} ${500})`) 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()); }32:T460,clean = [{"id":"05","nombre":"ANTIOQUIA"},{"id":"08","nombre":"ATLÁNTICO"},{"id":"11","nombre":"BOGOTÁ, D.C."},{"id":"13","nombre":"BOLÍVAR"},{"id":"15","nombre":"BOYACÁ"},{"id":"63","nombre":"QUINDIO"},{"id":"17","nombre":"CALDAS"},{"id":"18","nombre":"CAQUETÁ"},{"id":"19","nombre":"CAUCA"},{"id":"20","nombre":"CESAR"},{"id":"23","nombre":"CÓRDOBA"},{"id":"25","nombre":"CUNDINAMARCA"},{"id":"27","nombre":"CHOCÓ"},{"id":"41","nombre":"HUILA"},{"id":"44","nombre":"LA GUAJIRA"},{"id":"47","nombre":"MAGDALENA"},{"id":"50","nombre":"META"},{"id":"52","nombre":"NARIÑO"},{"id":"54","nombre":"NORTE DE SANTANDER"},{"id":"66","nombre":"RISARALDA"},{"id":"68","nombre":"SANTANDER"},{"id":"70","nombre":"SUCRE"},{"id":"73","nombre":"TOLIMA"},{"id":"76","nombre":"VALLE DEL CAUCA"},{"id":"81","nombre":"ARAUCA"},{"id":"85","nombre":"CASANARE"},{"id":"86","nombre":"PUTUMAYO"},{"id":"88","nombre":"ARCHIPIÉLAGO DE SAN ANDRÉS, PROVIDENCIA Y SANTA CATALINA"},{"id":"91","nombre":"AMAZONAS"},{"id":"94","nombre":"GUAINÍA"},{"id":"95","nombre":"GUAVIARE"},{"id":"97","nombre":"VAUPÉS"},{"id":"99","nombre":"VICHADA"}]33:[{"id":"d3b83919ff849db1fa56d828680f06358881e3299a746d1a2165c9b25c1338e689ff651827f3db635ce5d4b46de6fcf0df370e328445ee741d9e00ea73abc0b8","href":"https://static.observableusercontent.com/files/d3b83919ff849db1fa56d828680f06358881e3299a746d1a2165c9b25c1338e689ff651827f3db635ce5d4b46de6fcf0df370e328445ee741d9e00ea73abc0b8","name":"canvas (3).svg","type":"image/svg+xml","lastModified":1648562496423.009,"size":14077}] 2f:{"id":"c7e42062e15acf78","slug":"mapa-departamental-de-colombia-con-hexagonos","title":"Mapa departamental de Colombia con hexágonos","thumbnail":"129769fc10689e7646c39e1373553f8653cb976a8b5d61f127593add880df2ac","access_level":"public","create_time":"$D2022-03-29T02:49:53.324Z","update_time":"$D2022-04-25T17:19:47.649Z","view_time":null,"first_public_time":"$D2022-03-29T02:51:18.523Z","fork":false,"stars":1,"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":256,"publish_version":256,"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,"subscribed":null,"forks":0,"collection":{"id":"810b41eba511f21d","slug":"reutilizables","title":"Componentes DATAVIZ","owner":{"id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña"}},"type":"notebook","body":{"title":"Mapa departamental de Colombia con hexágonos","cells":[{"id":0,"value":"# Mapa departamental de Colombia con hexágonos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Referencias:\n- [Manipulating SVG Files\n](https://observablehq.com/@mbostock/manipulating-svg-files)\n- [De un geoJSON a hexágonos](https://observablehq.com/@nestorandrespe/geojson-to-svg-hexgrid)\n\nLos departamentos no están ordenados geográficamente pero si mantienen su cercanía con los departamentos vecinos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":135,"value":"howto(\"ColombiaHexChart\", {open: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"chart = ColombiaHexChart([], {\n width_: 600,\n fontSize: 13\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"updateContent = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this)\n\n tooltip.select('h5')\n .html(`${d.nombre} ${d.id}`)\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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"import {tooltip} with {updateContent} from \"@nestorandrespe/tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"import {howto} from \"@nestorandrespe/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"