2b:null 2c:["$","title",null,{"children":"Visualizando datos geográficos de Colombia [parte 1] | Néstor Andrés Peña | Observable"}] 31:T556,chart10 = ColombiaChart(datos_mun_partido_ganador_codDep.filter(d=>d[select_partido_3] !== ''), { // Le indico al componente en que columna de mis datos está el código divipola del municipio id: d => d['Code'], // Le indico al componente cual es la columna con el valor que quiero representar, en este caso la columna corresponde a la del partido value: d => { let resp = null if(!isNaN(parseInt(d[select_partido_3]))) resp = parseFloat(d[select_partido_3] / d['Censo Electoral'] * 100) if(resp) return Math.round(resp) }, burbujaColumnaR: d => { if(!isNaN(parseInt(d['Censo Electoral']))) return parseInt(d['Censo Electoral']) }, // ancho del mapa más angosto para hacerlo un poco más pequeño width_ : 450, // altura del mapa height_ : 450, // el tipo de nuestro mapa, en este caso un mapa cloropleta tipo: 'burbujas', // color del borde de los municipios colorMunicipios: '#fff', sColorMunicipios: '#dcdcdc', // la escala de color que se usa colorScale: d3.scaleLinear().range(["#fff", colorEscala2]).interpolate(d3.interpolateRgb), // activo el nivel 3 que es el de municipios, por defecto son departamentos nivel3: true, colorDptos: '#fff', sColorDptos: '#dcdcdc', colorFondo: '#fff', // caja de san andres y providencia sanProBBox : {top: 5, left: 5, width: 100, padding: 10}, })32:T468,chart8 = ColombiaChart(datos_mun_partido_ganador_codDep.filter(d=>d[select_partido_2] !== ''), { // Le indico al componente en que columna de mis datos está el código divipola del municipio id: d => d['Code'], // Le indico al componente cual es la columna con el valor que quiero representar, en este caso la columna corresponde a la del partido value: d => { if(!isNaN(parseInt(d[select_partido_2]))) return parseInt(d[select_partido_2]) }, // ancho del mapa más angosto para hacerlo un poco más pequeño width_ : 450, // altura del mapa height_ : 450, // el tipo de nuestro mapa, en este caso un mapa cloropleta tipo: select_tipo, // color del borde de los municipios colorMunicipios: '#fff', sColorMunicipios: '#dcdcdc', // la escala de color que se usa colorScale: d3.scaleLinear().range(["#fff", colorEscala]), // activo el nivel 3 que es el de municipios, por defecto son departamentos nivel3: true, colorDptos: '#fff', sColorDptos: '#dcdcdc', colorFondo: '#fff', // caja de san andres y providencia sanProBBox : {top: 5, left: 5, width: 100, padding: 10}, })33:T42a,chart6 = ColombiaChart(datos_mun_partido_ganador_codDep.filter(d=>d[select_partido] !== ''), { // Le indico al componente en que columna de mis datos está el código divipola del municipio id: d => d['Code'], // Le indico al componente cual es la columna con el valor que quiero representar, en este caso la columna corresponde a la del partido value: d => { if(!isNaN(parseInt(d[select_partido]))) return parseInt(d[select_partido]) }, // ancho del mapa más angosto para hacerlo un poco más pequeño width_ : 400, // altura del mapa height_ : 500, // el tipo de nuestro mapa, en este caso un mapa cloropleta tipo: 'color', // color del borde de los municipios sColorMunicipios: '#dcdcdc', // la escala de color que se usa colorScale: d3.scaleLinear().range(["#fff", colorEscala]), // activo el nivel 3 que es el de municipios, por defecto son departamentos nivel3: true, sColorDptos: '#999', colorFondo: '#fff', // caja de san andres y providencia sanProBBox : {top: 5, left: 5, width: 100, padding: 10}, })34:[] 2f:{"id":"28f200699c072e2f","slug":"visualizando-datos-geograficos-de-colombia","title":"Visualizando datos geográficos de Colombia [parte 1]","thumbnail":"4627e342ff91f78c119ca70716d4c4d3f08a47bcee329a6058b369481b136603","access_level":"public","create_time":"$D2022-03-25T13:27:39.870Z","update_time":"$D2023-01-15T22:54:46.471Z","view_time":null,"first_public_time":"$D2022-03-25T13:28:06.486Z","fork":false,"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":637,"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,"subscribed":null,"forks":1,"collection":{"id":"85deb386dcbb7117","slug":"clases-u-bosque","title":"Clase Visualización de datos","owner":{"id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña"}},"type":"notebook","body":{"title":"Visualizando datos geográficos de Colombia [parte 1]","cells":[{"id":0,"value":"# Visualizando datos geográficos de Colombia [parte 1]\n## Explorando resultados electorales para Senado en 2018 por municipios","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"Para este ejemplo usaremos los datos electorales publicados por la MOE en [este](https://www.datoselectorales.org/datos-y-resultados-electorales/) enlace. Los datos fueron descargados y convertidos a un archivo sencillo _.csv_ para su uso en este aplicativo web.\n\nPara visualizar los datos sobre un mapa importamos el componente de Mapa de Colombia con San Andrés y Providencia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import { ColombiaChart } from \"@nestorandrespe/mapa-de-colombia-con-san-andres-y-providencia-v2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"Para empezar, vamos a importar los datos electorales por municipios.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":284,"value":"import {datos_mun_partido_ganador_codDep, partidos} from \"@nestorandrespe/limpiando-datos-electorales-para-visualizar\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"Existen varias formas en las que podemos visualizar estos datos. Como veremos, algunas son más útiles que otras y cada una responde a una pregunta distinta. La primera de estas podría ser ¿Cuales fueron los votos por partido por municipio? Y podríamos hacer un selector para el listado completo de partidos y un mapa:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":321,"value":"viewof select = Inputs.select(partidos.map(d=>d.original), {label: \"Escoje un partido\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"chart3 = ColombiaChart(datos_mun_partido_ganador_codDep.filter(d=>d[select] !== ''), {\n // Le indico al componente en que columna de mis datos está el código divipola del municipio\n id: d => d['Code'],\n // Le indico al componente cual es la columna con el valor que quiero representar, en este caso la columna corresponde a la del partido\n value: d => {\n if(!isNaN(parseInt(d[select]))) return parseInt(d[select])\n },\n\n // ancho del mapa\n width_ : width,\n // altura del mapa\n height_ : 600,\n\n // el tipo de nuestro mapa, en este caso un mapa cloropleta\n tipo: 'color',\n // color del borde de los municipios\n sColorMunicipios: '#dcdcdc',\n // la escala de color que se usa\n colorScale: d3.scaleLinear().range([\"#fff\", colorEscala]),\n colorFondo: '#fff',\n // colorPaises: 'red',\n\n // activo el nivel 3 que es el de municipios, por defecto son departamentos\n nivel3: true,\n \n sColorDptos: '#999',\n \n // caja de san andres y providencia\n sanProBBox : {top: 20, left: 20, width: 100, padding: 10}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"---\nAunque el mapa sirve y nos muestra la información que queremos ver es claro que no es la forma más efectiva de representar estos datos. Intentemos reforzar nuestro mapa con un gráfico de barras que me permita comparar los valores de una manera más efectiva:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":413,"value":"viewof select_partido = Inputs.select(partidos.map(d=>d.original), {label: \"Escoje un partido\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"dos_columnas(chart6, chart7, \"Votos por municipio\", \"Votos por municipio [20 primeros]\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"---\nYa hemos reforzado la lectura de nuestro gráfico un poco más gracias a la ayuda de otro gráfico. Pero eso no es todo, si nos fijamos bien podemos ver que la opción de color sobre nuestro mapa sigue siendo poco eficiente. Intentemos cambiando el tipo de mapa de _color_ a _burbujas_ o _picos_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"viewof select_tipo = Inputs.select([\"picos\", \"burbujas\", \"color\"], {label: \"Tipo\", value: \"picos\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"viewof select_partido_2 = Inputs.select(partidos.map(d=>d.original), {label: \"Escoje un partido\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"dos_columnas(chart8, chart9, \"Votos por municipio\", \"Votos por municipio [20 primeros]\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"---\nPodemos ver que la vista de _picos_ y la de _burbujas_ ayudan en algunos casos en la lectura pero podemos mejorar cada uno si les hacemos algunos cambios.\n\n---\n### Una nueva dimensión para las burbujas\n##### _Aprovechando uno de los canales de la representación para visualizar un atributo adicional_\n\nAunque en este momento la vista de nuestras burbujas ayuda a la lectura de los datos podemos diseccionar los atributos que estamos usando y reordenarlos para enfocar su efectividad. En este momento la cantidad de votos por partido se ve representada en dos canales de las burbujas: el tamaño y el color. Podemos dejar el color asociado a ese datos pero podemos mapear otro al tamaño de la burbuja, por ejemplo el censo electoral para ese municipio.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":501,"value":"viewof select_partido_3 = Inputs.select(partidos.map(d=>d.original), {label: \"Escoje un partido\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"dos_columnas(chart10, chart11, \"Votos por municipio (% censo electoral)\", \"Votos por municipio [20 primeros] (% censo electoral)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"En el ejemplo de arriba hemos hecho dos modificaciones para mejorar la lectura. Por un lado al radio de las burbujas le hemos mapeado el censo electoral para el municipio y por otro lado el color lo hemos vuelto relativo al calcular el porcentaje de votos obtenidos por el partido para cada municipio en base a su censo electoral. Con esto le damos otras capas de lectura a nuestros datos aunque en este caso es imperativo dejar claro que representa qué.\n\n---\n\nYa hemos visto como disponer algunos datos a nivel nacional. Sin embargo, aunque el análisis a nivel municipal es interesante también lo puede ser una vista a nivel departamental y no solo municipal. Esto lo veremos en el [siguiente capítulo]().\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":498,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"chart11 = Plot.plot({\n marginLeft: 150,\n marks: [\n Plot.barX(datos_mun_partido_ganador_codDep.filter(d=>d[select_partido_3] !== '').map(d=>{\n return {\n \"Municipio\": `${d[\"Municipio\"]} | ${d[\"Depto\"]}`,\n \"value\": d[select_partido_3] / d['Censo Electoral'] * 100\n }\n }), {x: \"value\", y: \"Municipio\",sort: {y: \"x\", reverse: true, limit: 20},fill: colorEscala2})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"chart9 = Plot.plot({\n marginLeft: 150,\n marks: [\n Plot.barX(datos_mun_partido_ganador_codDep.filter(d=>d[select_partido_2] !== ''), {x: select_partido_2, y: \"Municipio\",sort: {y: \"x\", reverse: true, limit: 20},fill: colorEscala})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"chart7 = Plot.plot({\n marginLeft: 150,\n marks: [\n Plot.barX(datos_mun_partido_ganador_codDep, {x: select_partido, y: \"Municipio\",sort: {y: \"x\", reverse: true, limit: 20},fill: colorEscala})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"datos_mun_partido_ganador_codDep","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"viewof h = Inputs.range([300, 1000], {label: \"Height\", value: 550})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"viewof w = Inputs.range([300, 2000], {label: \"Ancho\", value: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"viewof mun = Inputs.toggle({label: \"Municipios\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"viewof dep = Inputs.toggle({label: \"Departamentos\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"viewof colorEscala = Inputs.color({label: \"Color escala\", value: \"#f9a20b\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"viewof colorEscala2 = Inputs.color({label: \"Color escala\", value: \"#64dd72\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"viewof sColorDptos = Inputs.color({label: \"Color linea departamentos\", value: \"#999999\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"viewof colorPaises = Inputs.color({label: \"Color paises\", value: \"#f3f1f1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"viewof sWDptos = Inputs.range([0, 1.5], {label: \"Ancho\", value: .5, step: .05})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"import {ColombiaHexChart} from \"@nestorandrespe/mapa-departamental-de-colombia-con-hexagonos\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"dos_columnas = (chart_, chart2_, titulo_1 = 'Título uno', titulo_2 = 'Título dos') => {\n return html`\n \n

${titulo_1}

\n ${chart_}\n

${titulo_2}

\n ${chart2_}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"data = [\n {\n name: \"11\",\n value: 350\n },\n {\n name: \"88\",\n value: 360\n },\n {\n name: \"85\",\n value: 512\n },\n {\n name: \"50\",\n value: 33.3\n },\n {\n name: \"05\",\n value: 100\n },\n {\n name: \"81\",\n value: 50\n },\n {\n name: \"99\",\n value: 5\n },\n {\n name: \"63\",\n value: 25\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"