selector = selectDiv()
res = fetch('https://d2v5qzywcd0fzd.cloudfront.net/viz-decidechile/30annos/datos/data_demografia_years_v2.json')
data = res.json()
data
Type Table, then Shift-Enter. Ctrl-space for more options.
filterData = data.filter(d => d.year === years)
viewof years = slider({
title: "Año",
min: 1992,
max: 2050,
step: 1,
value: 2010
})
selectDiv = () => {
return html`
<div class="grid-container-select">
<div class="item5">${viewof years}</div>
</div>
`
}
titulo = (titulo) => {
return html`
<div class="titulo_mapa" style="font-family: 'Source Sans Pro', sans-serif;">${titulo}</div>
`;
}
variablesY = ["Mujeres", "Hombres"]
coloresY = ["#47a5da", "#075376"]
grafico = graph(filterData, 'year')
html`<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">`
function graph(data, facet) {
// Crear la escala de colores
const colorScale = d3.scaleOrdinal(schemeContrasting)
.domain(variablesY); // Dominio: lista de variablesY
// Definir el tamaño del contenedor
const containerWidth = 990; // Ancho del contenedor
const containerHeight = 660; // Alto del contenedor
// Agregar el título
const tituloDiv = titulo("Estimación y Proyección de la Población de Chile 1992 - 2050"); // Llama a la función titulo con el texto del título
tituloDiv.style.textAlign = "center"; // Alinear el título al centro
tituloDiv.style.marginBottom = "10px"; // Añadir margen inferior al título
tituloDiv.style.marginTop = "10px"; // Añadir margen inferior al título
// Agregar el gráfico populationPyramidPlot
const pyramidPlot = populationPyramidPlot(data, {
width: 990, // Ancho del gráfico
height: 500, // Alto del gráfico
colorScheme: schemeContrasting, // Esquema de color para el gráfico de pirámide de población
maxValue: 1200000,
nticks: 4,
facet, // The key of value based on which to generate facets
});
pyramidPlot.style.position = "relative"; // Establecer posición absoluta para el gráfico
pyramidPlot.style.left = "50%"; // Centrar horizontalmente el gráfico
pyramidPlot.style.transform = "translateX(-55.5%)";
pyramidPlot.style.marginTop = "-10px"; // Margen superior de 10px
pyramidPlot.style.marginBottom = "20px"; // Margen inferior de 20px
// Seleccionar y cambiar el tamaño de la fuente de los números en el eje y otras etiquetas
d3.select(pyramidPlot)
.selectAll(".tick text") // Selecciona todos los textos de las ticks
.style("font-size", "12px") // Cambia el tamaño de la fuente a 12px (ajusta según necesites)
.style("font-family", "'Source Sans Pro', sans-serif"); // Aplica la fuente Source Sans Pro
d3.select(pyramidPlot)
.selectAll("text") // Selecciona todos los textos
.style("font-family", "'Source Sans Pro', sans-serif"); // Aplica la fuente Source Sans Pro
// Crear el gráfico y la leyenda como elementos HTML
const container = document.createElement("div");
container.style.position = "relative"; // Establecer posición relativa para posicionar elementos hijos
container.style.width = containerWidth + "px"; // Establecer el ancho del contenedor
container.style.height = containerHeight + "px";
container.style.fontFamily = "'Source Sans Pro', sans-serif"; // Aplica la fuente Source Sans Pro al contenedor
// Agregar el título al contenedor principal
container.appendChild(tituloDiv); // Agregar el título antes del gráfico
// Crear la leyenda
const legend = d3.select(document.createElement("div"))
.style("margin-bottom", "0px")
.style("margin-top", "10px")
.style("text-align", "center") // Alinear la leyenda al centro
.style("display", "flex") // Usar flexbox para la alineación
.style("justify-content", "center") // Centrar los elementos dentro del contenedor
.style("align-items", "center") // Alinear los elementos verticalmente
.style("font-family", "'Source Sans Pro', sans-serif"); // Aplica la fuente Source Sans Pro
variablesY.forEach((variableY, index) => {
const color = colorScale(variableY);
const legendItem = legend.append("div")
.style("display", "flex") // Mostrar los elementos en línea usando flexbox
.style("align-items", "center") // Alinear verticalmente
.style("margin-right", "10px");
legendItem.append("div")
.style("width", "10px")
.style("height", "10px")
.style("background-color", color)
.style("margin-right", "5px");
legendItem.append("span")
.text(variableY)
.style("font-family", "'Source Sans Pro', sans-serif"); // Aplica la fuente Source Sans Pro
});
// Agregar el filtro externo
const filterDiv = selectDiv();
filterDiv.style.position = "relative"; // Establecer posición relativa para el filtro
filterDiv.style.marginTop = "10px"; // Margen superior de 10px
filterDiv.style.marginBottom = "10px"; // Margen inferior de 20px
filterDiv.style.fontFamily = "'Source Sans Pro', sans-serif"; // Aplica la fuente Source Sans Pro
// Crear el texto "Año"
const yearLabel = document.createElement("div");
yearLabel.innerText = "Año";
yearLabel.style.textAlign = "center"; // Alinear el texto al centro
yearLabel.style.marginTop = "-12px"; // Añadir margen superior
yearLabel.style.fontSize = "13px"; // Cambiar el tamaño de la fuente (puedes ajustar este valor según tus necesidades)
yearLabel.style.fontFamily = "'Source Sans Pro', sans-serif"; // Aplica la fuente Source Sans Pro
// Agregar la leyenda al contenedor principal
container.appendChild(legend.node()); // Agregar la leyenda antes del gráfico
container.appendChild(filterDiv); // Agregar el filtro
container.appendChild(yearLabel); // Agregar el texto "Año" antes del gráfico
container.appendChild(pyramidPlot); // Agregar el gráfico populationPyramidPlot al contenedor principal
// Agregar el logo "Powered by Unholster"
const unholsterLogoLink = document.createElement("a");
unholsterLogoLink.setAttribute("href", "https://unholster.com");
unholsterLogoLink.setAttribute("target", "_blank"); // Abrir enlace en una nueva pestaña
unholsterLogoLink.style.position = "absolute"; // Establecer posición absoluta para el logo
unholsterLogoLink.style.bottom = "40px"; // Posicionar el logo 10px desde el borde inferior
unholsterLogoLink.style.right = "120px"; // Posicionar el logo 10px desde el borde derecho
const unholsterLogo = document.createElement("img");
unholsterLogo.setAttribute("src", "https://d2v5qzywcd0fzd.cloudfront.net/viz-decidechile/30annos/logo-unholster/Powered%20by%20Unholster%202.png");
unholsterLogo.setAttribute("height", "20");
unholsterLogoLink.appendChild(unholsterLogo);
container.appendChild(unholsterLogoLink);
// Agregar el texto en la esquina inferior izquierda
const bottomLeftText = document.createElement("div");
bottomLeftText.innerText = "Fuente: Instituto Nacional de Estadísticas"; // Aquí puedes cambiar el texto a lo que necesites
bottomLeftText.style.position = "absolute"; // Establecer posición absoluta para el texto
bottomLeftText.style.bottom = "40px"; // Posicionar el texto 0px desde el borde inferior
bottomLeftText.style.left = "110px"; // Posicionar el texto 50px desde el borde izquierdo
bottomLeftText.style.fontSize = "14px"; // Tamaño de fuente del texto
bottomLeftText.style.color = "#707070"; // Color del texto (puedes cambiarlo según tus necesidades)
bottomLeftText.style.fontFamily = "'Source Sans Pro', sans-serif"; // Aplica la fuente Source Sans Pro
container.appendChild(bottomLeftText); // Agregar el texto al contenedor principal
// Retornar el contenedor que incluye el gráfico, la leyenda y el filtro centrados
return container;
}
<style>
@import url('${fonts['condensed']['url']}');
/* Grid container select */
.item3 {
grid-area: tipomapa;
min-width: 0;
min-height: 15;
}
.item4 {
grid-area: seleccion;
min-width: 0;
min-height: 15;
}
.item5 {
grid-area: genero;
min-width: 0;
min-height: 15;
}
.item6 {
grid-area: ano;
min-width: 15;
}
.grid-container-select {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-gap: 20px;
}
.titulo_mapa {
color: #000000 ;
font-weight: 900;
font-size: 24px;
padding-top: 0px;
justify-content: center;
display: flex;
}
</style>
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.
