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', 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, 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 `

` } 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] } } 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 }) } // 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) .call(tooltip, tooltipDiv, container) 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()))) 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] } } 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] } } if(tooltipContent && index >= 0) { d['content'] = { html: C[index] } } return d }) } new_nivel_3.features = new_nivel_3.features.filter(d=>d['data'] !== null) 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(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('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=>colorScale(d3.max(colorScale.domain()))) invalidation.then(() => simulation.stop()) } } if(sanPro && !zoom) { svg.append('rect') .attr('width', sanProBBox.width) .attr('height', sanProBBox.width) .attr('fill', '#fff') .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 === 'none') return colorDptos else if(tipo === 'color' && d.data !== null) return colorScale(d.data.value) else return '#fff' }) .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 === 'none') return colorDptos else if(tipo === 'color' && d.data !== null) return colorScale(d.data.value) else return '#fff' }) .attr('stroke', sColorDptos) .attr('stroke-width', sWDptos) .attr('transform', `translate(${sanProBBox.left + sanProBBox.padding} ${sanProBBox.top + sanProBBox.padding})`) .call(tooltip, tooltipDiv, container) } 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()); }