2a:null 2b:["$","title",null,{"children":"Mapa de Colombia Twitch | Néstor Andrés Peña | Observable"}] 30:T5573,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 = .5, colorDptos = '#fff', sColorDptos = '#999', sWDptos = .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) function plantillaContent_() { return `

` } function plantillaTooltip_() { return `

Streamer

Seguidores Ganados

Promedio Viewers

Horas de Stream

` } const main_projection = d3.geoMercator() if(projectionType === 'spherical'){ } const container = d3.select( html`

${plantillaTooltip_()}${plantillaContent_()}

` ); 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(nivel1) { nivel_1_group.selectAll('.cercanos') .data(cercanos.features.filter(d=>d.properties["iso_a2"] !== 'CO')) .join('path') .attr('class', 'cercanos') .attr('d', d3.geoPath(main_projection)) .attr('fill', `url(#hatchStripes`) .attr('stroke', colorFondo) .attr('stroke-width', 2) // .call(tooltip_nivel_1, tooltipDiv, container) // .attr('fill-opacity', .1) } if(nivel2){ let new_nivel_2 = null new_nivel_2 = { type: "FeatureCollection", features: nivel_2.features.map(e => { const d = {...e} d['data'] = null d['group'] = null let index = N.findIndex(t => d.properties['dpto_ccdgo'] === t) if(index >= 0 && !zoomFilter){ d['data'] = { value: V[index], properties: data_limpia[index] } } else if (zoomFilter && zoom){ if(typeof zoom === 'string'){ if(d.properties['dpto_ccdgo'] === zoom){ d['data'] = { value: V[index], properties: data_limpia[index] } } } else if(Array.isArray(zoom)){ if(zoom.includes(d.properties['dpto_ccdgo'])){ d['data'] = { value: V[index], properties: data_limpia[index] } } } } if(burbujaColumnaR && index >= 0) { d['group'] = { value: B[index] } } return d }) } // console.log(new_nivel_2.features.filter(d=>d.data !== null)) 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) } const nivel2_node = nivel_2_group.selectAll('.nivel_2') .data(new_nivel_2.features.filter(d=>d.properties['dpto_cnmbr'] !== 'ARCHIPIÉLAGO DE SAN ANDRÉS, PROVIDENCIA Y SANTA CATALINA')) .join('g') .attr('class', 'nivel_2') nivel2_node.append('path').attr('d', d3.geoPath(main_projection)) .attr('fill', d => { if(tipo !== 'color') return colorDptos else if(tipo === 'color' && d.data !== null) { if(d.data.value) return colorScale(d.data.value) else return '#fff' } else if(tipo === 'color' && d.data === null) return colorDptos else return '#fff' }) .attr('stroke', sColorDptos) .attr('stroke-width', sWDptos) if(tipo === 'picos'){ 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 = extra_group.selectAll('.nivel_2_picos') .data(new_nivel_2.features) .join('g') .attr('class', 'nivel_2_picos') .attr("transform", d => { const resp = main_projection(d3.geoCentroid(d.geometry)) return `translate(${resp[0]}, ${resp[1]})` }) nivel2_node_picos.append("path") .attr("fill", d => { if(d.data) return colorScale(d.data.value) }) .attr("stroke", d=>colorScale(d3.max(colorScale.domain()))) .attr("stroke-width", 1) .attr("d", d => { if(d.data) return spike(picosScale(d.data.value)) }) .call(tooltip, tooltipDiv, container) } 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 = extra_group.selectAll(".burbujas") .data(new_nivel_2.features) .join("g") .attr("class", "burbujas") .call(tooltip, tooltipDiv, container) const simulation = d3.forceSimulation(new_nivel_2.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", () => { burbujas.attr("transform", d => `translate(${d.x} ${d.y})`) }) burbujas.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()))) .call(tooltip, tooltipDiv, container) invalidation.then(() => simulation.stop()) } if(label_nivel2) { const dpto_labels = svg.append('g').selectAll('.nivel_2_label') .data(nivel_2.features) .join('g') .attr('class', 'nivel_2_label') .attr('transform', d=>{ const coor = d3.geoCentroid(d.geometry) const pos = main_projection(coor) return `translate(${pos[0]} ${pos[1]})` }) dpto_labels.append('text') .text(d=>d.properties['dpto_cnmbr']) .attr('text-anchor', 'middle') } } if(nivel3) { let new_nivel_3 = null new_nivel_3 = { type: "FeatureCollection", features: nivel_3.features.map(e => { const d = {...e} d['data'] = null d['group'] = null d['content'] = null let index = N.findIndex(t => d.properties['mpio_ccnct'] === t) if(index >= 0 && !zoomFilter){ d['data'] = { value: V[index], properties: data_limpia[index] } } else if (zoomFilter && zoom){ if(typeof zoom === 'string'){ if(d.properties['dpto_ccdgo'] === zoom){ d['data'] = { value: V[index], properties: data_limpia[index] } } } else if(Array.isArray(zoom)){ if(zoom.includes(d.properties['dpto_ccdgo'])){ d['data'] = { value: V[index], properties: data_limpia[index] } } } } if(burbujaColumnaR && index >= 0) { d['group'] = { value: B[index] } } if(tooltipContent && index >= 0) { d['content'] = { html: C[index] } } return d }) } new_nivel_3.features = new_nivel_3.features.filter(d=>d['data'] !== null) const shapes_nivel3 = nivel_3_group.selectAll('.nivel_3') .data(new_nivel_3.features.filter(d=>d.properties['dpto_cnmbr'] !== 'ARCHIPIÉLAGO DE SAN ANDRÉS, PROVIDENCIA Y SANTA CATALINA')) .join('path') .attr('class', 'nivel_3') .attr('d', d3.geoPath(main_projection)) .attr('fill', d=> { if(tipo !== 'color') return colorMunicipios else if(tipo === 'color' && d.data !== null) { // if(!isNaN(d.data.value)) if(d.data.value) return colorScale(d.data.value) else return '#fff' } else return '#fff' }) .attr('stroke', sColorMunicipios) .attr('stroke-width', sWMunicipios) .call(tooltip_nivel_3, tooltipDiv, container) if(tooltipDiv){ shapes_nivel3.on('click', (e,d) => { contentDiv.attr('style', 'display: block') contentDiv.select('.info').html(`${d.properties.mpio_cnmbr} | ${d.properties.dpto_cnmbr}`) contentDiv.select('.inside').html(d.content.html) }) } if(tipo === 'picos'){ picosScale.domain([0, d3.max(V)]) colorScale.domain([0, d3.max(V)]) if(scaleDomain){ colorScale.domain(scaleDomain) } if(picosDomain){ picosScale.domain(picosDomain) } const nivel3_node_picos = extra_group.selectAll('.nivel_2_picos') .data(new_nivel_3.features) .join('g') .attr('class', 'nivel_2_picos') .attr("transform", d => { const resp = main_projection(d3.geoCentroid(d.geometry)) return `translate(${resp[0]}, ${resp[1]})` }) nivel3_node_picos.append("path") .attr("fill", d => { if(d.data) return colorScale(d.data.value) }) .attr("stroke", d=>colorScale(d3.max(colorScale.domain()))) .attr("stroke-width", 1) .attr("d", d => { if(d.data) return spike(picosScale(d.data.value)) }) .call(tooltip_nivel_3, tooltipDiv, container) } 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 = extra_group.selectAll(".burbujas") .data(new_nivel_3.features) .join("g") .attr("class", "burbujas") .call(tooltip_nivel_3, tooltipDiv, container) .on('mouseenter', (e,d)=> console.log(e,d)) if(tooltipDiv){ burbujas.on('click', (e,d) => { contentDiv.attr('style', 'display: block') contentDiv.select('.info').html(`${d.properties.mpio_cnmbr} | ${d.properties.dpto_cnmbr}`) contentDiv.select('.inside').html(d.content.html) }) } const simulation = d3.forceSimulation(new_nivel_3.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,i)=>{ if(d.data && !burbujaColumnaR){ return burbujaScale(d.data.value) + 1 } else if (burbujaColumnaR) { return burbujaScale(d.group.value) + 1 } }).iterations(2)) .on("tick", () => { burbujas.attr("transform", d => `translate(${d.x} ${d.y})`) }) burbujas.append("circle") .attr("r", (d,i)=>{ if(d.data && !burbujaColumnaR){ return burbujaScale(d.data.value) } else if (burbujaColumnaR) { return burbujaScale(d.group.value) } }) .attr("fill", d=>{ if(d.data){ return colorScale(d.data.value) } else return '#999' }) .attr("stroke", d=>{ if(burbujasMaxStroke){ return colorScale(d3.max(colorScale.domain())) } else { return colorScale(d.data.value) } }) invalidation.then(() => simulation.stop()) } } if(sanPro && !zoom) { svg.append('rect') .attr('width', sanProBBox.width) .attr('height', sanProBBox.width) .attr('fill', colorFondo) .attr('stroke', sColorSanPro) .attr('x', sanProBBox.left) .attr('y', sanProBBox.top) .attr('stroke-width', 0.25) svg.append('rect') .attr('width', sanProBBox.width) .attr('height', sanProBBox.width) .attr('fill', `url(#n_mar`) .attr('fill-opacity', 0.05) .attr('stroke', sColorSanPro) .attr('x', sanProBBox.left) .attr('y', sanProBBox.top) .attr('stroke-width', 0.25) svg.append('line') .attr('x1', sanProBBox.left + sanProBBox.width / 2 ) .attr('y1', sanProBBox.top) .attr('x2', sanProBBox.left + sanProBBox.width / 2 ) .attr('y2', sanProBBox.top + sanProBBox.width ) .attr('stroke', sColorSanPro) .attr('stroke-width', 0.25) .attr('stroke-dasharray', '4 3') main_projection.fitSize([sanProBBox.width / 2 - sanProBBox.padding * 2, sanProBBox.width - sanProBBox.padding * 2], providencia[0]) let index = N.findIndex(t => '88' === t) let providencia_new = providencia.map(d => { d['data'] = null let index = N.findIndex(t => '88' === t) if(index >= 0) { d['data'] = { value: V[index] } } return d }) let san_andres_new = san_andres.map(d => { d['data'] = null let index = N.findIndex(t => '88' === t) if(index >= 0) { d['data'] = { value: V[index] } } return d }) svg.append('g').selectAll('.pro') .data(providencia_new) .join('path') .attr('class', 'pro') .attr('d', d3.geoPath(main_projection)) .attr('fill', d=> { if(tipo !== 'color') return colorDptos else if(tipo === 'color' && d.data !== null) { // if(!isNaN(d.data.value)) if(d.data.value) return colorScale(d.data.value) else return colorSanPro } else return colorSanPro }) .attr('stroke', sColorDptos) .attr('stroke-width', sWDptos) .attr('transform', `translate(${sanProBBox.left + sanProBBox.width / 2 + sanProBBox.padding} ${sanProBBox.top + sanProBBox.padding})`) .call(tooltip, tooltipDiv, container) main_projection.fitSize([sanProBBox.width / 2 - sanProBBox.padding * 2, sanProBBox.width - sanProBBox.padding * 2], san_andres[0].geometry) svg.append('g').selectAll('.sa') .data(san_andres_new) .join('path') .attr('class', 'sa') .attr('d', d3.geoPath(main_projection)) .attr('fill', d=> { if(tipo !== 'color') return colorDptos else if(tipo === 'color' && d.data !== null) { // if(!isNaN(d.data.value)) if(d.data.value) return colorScale(d.data.value) else return colorSanPro } else return colorSanPro }) .attr('stroke', sColorDptos) .attr('stroke-width', sWDptos) .attr('transform', `translate(${sanProBBox.left + sanProBBox.padding} ${sanProBBox.top + sanProBBox.padding})`) .call(tooltip, tooltipDiv, container) } 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()) } // svg.append(legend.select("g:not(.tick)")) return Object.assign(container.node()); }31:[{"id":"3f286704da36ce6a0111fbcde6139af8a3e93a0d51c6b523a06d574821705a34204bed537edfa4dbf8c12f13cfb33482d9bdf7d9a3b6c59921cdc432164af119","href":"https://static.observableusercontent.com/files/3f286704da36ce6a0111fbcde6139af8a3e93a0d51c6b523a06d574821705a34204bed537edfa4dbf8c12f13cfb33482d9bdf7d9a3b6c59921cdc432164af119","name":"card-pattern.svg","type":"image/svg+xml","lastModified":1653513689924.001,"size":34717}] 2e:{"id":"77f58a610cedcec9","slug":"mapa-de-colombia-twitch","title":"Mapa de Colombia Twitch","thumbnail":"f03237d9d36393c9e363c114b68285b460b0ea093bc5cc761d327c929919b478","access_level":"public","create_time":"$D2022-05-18T22:17:25.267Z","update_time":"$D2022-05-25T21:32:58.021Z","view_time":null,"first_public_time":"$D2022-05-25T19:28:16.113Z","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":1507,"publish_version":1507,"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":2,"collection":null,"type":"notebook","body":{"title":"Mapa de Colombia Twitch","cells":[{"id":0,"value":"md`# Mapa de Colombia Twitch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"howto(\"ColombiaChart\", {open: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1449,"value":"data_limpia = Datos.map(d => {\n var cod = d['DMpola']\n if(cod.length === 4) cod = '0' + cod\n d['DMpola'] = cod\n return d\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1446,"value":"import {Datos} from \"@2c48f62b076022b8/bitacora-proyecto-twitch/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1490,"value":"url_patron = await FileAttachment(\"card-pattern.svg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1501,"value":"arreglo_menu = [\n \"Horas de Stream\",\n \"Promedio Viewers\",\n \"Maximo Viewers\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1503,"value":"viewof select_usuario = Inputs.select(arreglo_menu, {label: \"Selecciona un dato\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"chart = ColombiaChart(data_limpia, {\n id: d => d['DMpola'],\n value: d => parseInt(d[select_usuario]),\n width_ : width,\n height_ : 700,\n nivel3 : true,\n nivel2 : true,\n colorMunicipios : '#fff',\n sColorMunicipios : '#333',\n sWMunicipios : .25,\n departamentos_ : true,\n colorDptos : '#fff',\n sColorDptos : '#999',\n sColorSanPro: 'white',\n burbujaScale: d3.scalePow().range([15, 15]),\n sWDptos : .5,\n sanPro : true,\n tipo: 'burbujas',\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":240,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"updateContent = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this)\n\n tooltip.attr('class',\"\")\n\n if(d.data !== null){\n tooltip.select('.nombre')\n .html(d.data.properties['Nombre'])\n }\n \n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":997,"value":"updateContentNivel3 = (selectionGroup, d) => {\n selectionGroup.each(function () {\n const tooltip = d3.select(this)\n\n tooltip.attr('class',\"\")\n\n if(d.data !== null){\n // cambiar el nombre\n tooltip.select('.nombre')\n .html(d.data.properties['Nombre'])\n\n // cambiar la ciudad\n tooltip.select('.ciudad')\n .html(d.data.properties['Ciudad'])\n\n // cambiar la img\n tooltip.select('.img')\n .attr('style', `background-image: url('${d.data.properties['Imagen']}')`)\n }\n \n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1485,"value":"cardPattern = FileAttachment(\"card-pattern.svg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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')\n .html(`${d.properties.NAME}`)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":783,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1001,"value":"import {tooltip as tooltip_nivel_3} with {updateContentNivel3 as updateContent} from \"@nestorandrespe/tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"import {tooltip as tooltip_nivel_1} with {updateContentNivel1 as updateContent} from \"@nestorandrespe/tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"import {tooltip} with {updateContent} from \"@nestorandrespe/tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"id":183,"value":"nivel_3 = {\n return d3.json('https://gist.githubusercontent.com/nestorandrespe/f2533e9bf810ee42ca9fa617ce138530/raw/b6bb3903e78c1a831ca442f94741fb4feef52921/municipios.json')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"projection_sa = d3.geoMercator()\n .translate([40, 100])\n .scale(40000)\n .center([-81.72729492187501, 12.543839666237682])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"projection_pro = d3.geoMercator()\n .translate([130, 60])\n .scale(40000)\n .center([-81.35925292968751, 13.378931658431565])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"cercanos = d3.json(\"https://gist.githubusercontent.com/nestorandrespe/4576e60ceed08d0395f585d549b02baf/raw/63983bb486a9728a5f4d10efd28fbceb67bce92c/mundo.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"projection = d3.geoMercator()\n .translate([width/2, width/2])\n .scale(3000)\n .center([-73.67431640625001,4.124080991005611])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":887,"value":"spike = (length, width = 7) => `M${-width / 2},0L0,${-length}L${width / 2},0`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"import {howto} from \"@nestorandrespe/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1274,"value":"departamentos_clean = nivel_2.features.map(d=>d.properties)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"