data101 = FileAttachment("drogas_curso.xlsx").xlsx()
data = data101.sheet(0, { headers: true })
titulo = 'Consumo de drogas'
ejeX = 'Año'
ejeY = 'Porcentaje de nna'
variablesY = ["8vo Básico", '1ro Medio', '2do Medio']
coloresY = ["green", "red", "blue", "yellow", "purple"]
// Variable en el eje X
variableX = 'Año'
// Filtro 1
filtro1 = 'Droga'
opciones_1 = [...new Set(data.map(data => data[filtro1]))]
viewof filtro_1 = select({
title: filtro1,
value: opciones_1[1],
options: opciones_1,
selectStyle: {
background: "#EDEDED"
}
})
selectDiv = () => {
return html`
<div class="grid-container-select">
<div class="item5">${viewof filtro_1}</div>
</div>
`
}
data_filtro1 = data.filter(data => (data[filtro1] === filtro_1))
colorScale = d3.scaleOrdinal()
.domain(variablesY) // Dominio: lista de variablesY
.range(d3.schemeCategory10); // Rango: conjunto de 10 colores predefinidos
function graph(data) {
const marks = [
Plot.ruleY([0]), // Línea de referencia en y=0
];
// Crear la escala de colores
const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
.domain(variablesY); // Dominio: lista de variablesY
// Iterar sobre cada variable en la lista variablesY
variablesY.forEach((variableY, index) => {
const color = coloresY[index % coloresY.length]; // Selecciona un color de la lista de colores
marks.push(
Plot.lineY(data, { x: variableX, y: variableY, stroke: color, tip: true })
);
});
// Crear el gráfico y la leyenda como elementos HTML
const container = document.createElement("div");
// Agregar el filtro externo
container.appendChild(selectDiv());
// Crear la leyenda
const legend = d3.select(document.createElement("div"))
.style("margin-bottom", "10px")
.style("text-align", "center"); // Alinear la leyenda al centro
variablesY.forEach((variableY, index) => {
const color = colorScale(variableY);
const legendItem = legend.append("div")
.style("display", "inline-block") // Mostrar los elementos en línea
.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);
});
// Agregar la leyenda al contenedor principal
container.appendChild(legend.node()); // Agregar la leyenda antes del gráfico
container.appendChild(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, ".") + '%' // Formato para el eje Y
},
marks: marks
}));
// Retornar el contenedor que incluye el gráfico y la leyenda
return container;
}
viewof grafico = graph(data_filtro1)
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.
