res = fetch('https://d109f9uztt08nv.cloudfront.net/deficit-cero/datos-deficit-cero/graficos/nuevos_predios_v4.json')
titulo = 'Título1'
ejeX = 'Año'
ejeY = 'Cantidad'
// variable en el eje Y
variableY = 'Cantidad predios'
// Variable en el eje X
variableX = 'Año'
// Filtro 1
filtro1 = 'Región'
// Filtro 2
filtro2 = 'Comuna'
opciones_1 = [...new Set(data.map(data => data[filtro1]))]
opciones_2 = [...new Set(data_filtro1.map(data => data[filtro2]))]
viewof filtro_1 = select({
title: "Región",
value: "Metropolitana",
options: opciones_1,
selectStyle: {
background: "#EDEDED"
}
})
viewof filtro_2 = select({
title: "Comuna",
value: "Metropolitana",
options: opciones_2,
selectStyle: {
background: "#EDEDED"
}
})
selectDiv = () => {
return html`
<div class="grid-container-select">
<div class="item5">${viewof filtro_1}</div>
<div class="item3">${viewof filtro_2}</div>
</div>
`
}
data_filtro1 = data.filter(data => (data.Región === filtro_1))
data_filtro2 = data_filtro1.filter(data => (data["Comuna"] === filtro_2))
function graph(data) {
return Plot.plot({
width: 1200, // Ancho del gráfico
height: 500, // Alto del gráfico
x: {
label: ejeX, // Etiqueta del eje X
tickFormat: d3.format(".0f") // Formato personalizado para el eje X
},
y: {
label: ejeY, // Etiqueta del eje Y
grid: true,
tickFormat: d => d3.format(",.0f")(d).replace(/,/g, ".")
},
color: {legend: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: variableX, y: variableY, stroke: "#31E0C9", tip: true}),
]
});
}
viewof grafico = graph(data_filtro2)
titulo_graph = (titulo) =>
{ return html`
<div class="titulo_mapa"> ${titulo}</div>`
}
<style>
/* 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;
}
.titulo_mapa {
color: #FFFFF ;
font-family: ${fonts['default']['family']};
font-weight: 900;
font-size: 24px;
padding-top: 0px;
justify-content: center;
display: flex;
}
</style>
import { get_secuential_colors, get_colors, fonts, colors, legend } from "981f894a8cb8875d"
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.
