Public
Edited
Aug 7, 2024
Insert cell
Insert cell
Insert cell
dataset = FileAttachment("dataset.json").json()
Insert cell
Insert cell
//getComunaData({dataset, comunas_key: ["t.c.olmue", "t.c.nogales"], columns: "inscritos_nuevos", value: "inscritos_nuevos"})
//dataPorComuna1 = getComunaData({dataset, comunas_key: comunaList})
Insert cell
comunaList // .undefined
Insert cell
function addValue(){
let data = getComunaData({dataset, comunas_key: comunaList2(), columns:["inscritos_total", "contagiados"]})
data.map(x =>{
let a = 100 * x.contagiados / x.inscritos_total
x.value = a.toFixed(2)})
return data.slice()
}
Insert cell
// dataPorComuna = addValue()
dataPorComuna = FileAttachment(
"reclamos_resumidos_completos_modificado_array.json"
).json()
Insert cell
Insert cell
width = 600
Insert cell
Insert cell
dataFiltradaPorComuna = dataPorComuna.filter(
(data) => (data.year === año) & (data.month === mes)
)
Insert cell
Insert cell
Insert cell
Insert cell
mapaParticipacion = showMap()
Insert cell
viewof mapa = map(
dataFiltradaPorComuna,
dataPorComuna,
createTooltip,
"Porcentaje de abstención",
[0, 20, 40, 60, 80, 100]
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// comunasPorDistrito = filterComunasBy('DIS_ELEC')
Insert cell
comunasPorPais = filterComunasBy('País')
Insert cell
Insert cell
Insert cell
comunasPorPais.undefined
Insert cell
Insert cell
Insert cell
Insert cell
año = [...new Set(dataPorComuna.map((data) => data.year))]
Insert cell
mes = [...new Set(dataPorComuna.map((data) => data.month))]
Insert cell
Insert cell
showMap = () => {
if (tipoMapa === "País") {
return html`
<div class="map-container">
${viewof mapa}
</div>`;
}
return html`${viewof mapa}`;
}

Insert cell
selectDiv = () => {
if (tipoMapa === "Regional") {
return html`
<div class="grid-container-select">
<div class="item3">${viewof tipoMapa}</div>
<div class="item4">${viewof region}</div>
<div class="item5">${viewof año}</div>
<div class="item6">${viewof mes}</div>
</div>
`;
} else {
return html`
<div class="grid-container-select">
<div class="item3">${viewof tipoMapa}</div>
<div class="item5">${viewof año}</div>
<div class="item6">${viewof mes}</div>
</div>`;
}
}
Insert cell
viewof region = select({
selected: "Región Metropolitana de Santiago",
options: regiones,
onchange: objs => {
d3.select(objs.select)
.style('background', 'white')
.on('end', () => objs.div.update(objs.select.value));
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("dataset_exp.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mapStyle = html`
<style>
@import url('${fonts['condensed']['url']}');

/* Grid container select */

.item3 {
grid-area: tipomapa;
min-width: 0;
min-height: 0;
}

.item4 {
grid-area: seleccion;
min-width: 0;
min-height: 0;
}

.item5 {
grid-area: genero;
min-width: 0;
min-height: 0;
}

.item6 {
grid-area: ano;
min-width: 0;
min-height: 0;
}

.grid-container-select {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-gap: 20px;
}

/* Mapa */

.decideChileMap {
stroke:#FFFFFF;
stroke-width: 0.2;
stroke-linejoin: round;
}

.map-container {
max-height: 200px;
}

/* Tooltip */

.arrow_box {
pointer-events: none;
font-family: ${fonts['default']['family']};
font-size: 13px;
padding: 8px 15px;
position: absolute;
background: #ffffff;
border-radius: 2px;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),8px 6px 15px 0 rgba(0,0,0,0.19);
display: flex;
flex-direction: column;
}

strong {
border-bottom: 1px solid black;
font-family: ${fonts['default']['family']};
padding-bottom: 2px;
justify-content: center;
display: flex;
color: #1A1A1A;
font-weight: 900;
font-size: 13px;
}

.texto-subtitulo {
font-family: ${fonts['condensed']['family']};
color: #1A1A1A;
font-weight: 400;
font-size: 10px;
justify-content: center;
display: flex;
}

.texto-primario {
color: #2150E8;
font-family: ${fonts['default']['family']};
font-weight: 700;
font-size: 12px;
padding-top: 3px;
justify-content: center;
display: flex;
}

.texto-sin-informacion {
color: #CC0014;
font-family: ${fonts['condensed']['family']};
font-weight: 450;
font-size: 12px;
padding-top: 3px;
justify-content: center;
display: flex;
}

.texto-secundario {
color: #828282;
font-family: ${fonts['condensed']['family']};
font-size: 10px;
font-weight: 400;
justify-content: center;
display: flex;
}

</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {select} from "f5d4cba9b02532ea"
Insert cell
import {uniqueValid} from "@uwdata/data-utilities"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more