Public
Edited
May 26
md`# Ejercicio 1: Selecciones Básicas con D3.js`
frutas = ["Manzana", "Naranja", "Plátano", "Uva",
"Fresa", "Kiwi"]
{
// Crear un contenedor div
const div = d3.create("div");
// Agregar título
div.append("h2")
.text("Mi Primera Lista con D3.js")
.style("color", "green")
.style("font-family", "Verdana, sans-serif");
// Crear lista con datos
const lista = div.append("ul")
.style("list-style-type", "none")
.style("padding", "0");
lista.selectAll("li")
.data(frutas)
.enter()
.append("li")
.text(d => `🥝 ${d}`)
.style("color", (d, i) => i % 2 === 0 ? "9b59b6" :
"#27ae60")
.style("padding", "5px")
.style("margin", "2px")
.style("border-left", "3px solid")
.style("border-left-color", (d, i) => i % 2 === 0 ?
"#9b59b6" : "#27ae60")
.style("background-color", "#f8f9fa");
// Agregar contador
div.append("p")
.text(`Total de frutas: ${frutas.length}`)
.style("font-weight", "bold")
.style("color", "#34495e");
return div.node();
}
md`# Ejercicio 2: Gráfico de Barras`
datos = [
{nombre: "Producto A", valor: 30},
{nombre: "Producto B", valor: 80},
{nombre: "Producto C", valor: 45},
{nombre: "Producto D", valor: 60},
{nombre: "Producto E", valor: 95},
{nombre: "Producto F", valor: 25}
]
{
const config = {
width: 600,
height: 350,
margin: { top: 20, right: 20, bottom: 60, left: 50 }
};
const datos = [
{ nombre: "A", valor: 30 },
{ nombre: "B", valor: 80 },
{ nombre: "C", valor: 45 },
{ nombre: "D", valor: 60 },
{ nombre: "E", valor: 20 }
];
// Crear SVG
const svg = d3.create("svg")
.attr("width", config.width)
.attr("height", config.height)
.style("background", "#ffffff") // Fondo blanco
.style("border", "1px solid #ccc"); // Borde gris claro
// Escalas
const xScale = d3.scaleBand()
.domain(datos.map(d => d.nombre))
.range([config.margin.left, config.width - config.margin.right])
.padding(0.2);
const yScale = d3.scaleLinear()
.domain([0, d3.max(datos, d => d.valor)])
.range([config.height - config.margin.bottom, config.margin.top]);
// Escala de colores más vibrante
const colorScale = d3.scaleSequential(d3.interpolateTurbo)
.domain([0, d3.max(datos, d => d.valor)]);
// Crear barras
svg.selectAll(".bar")
.data(datos)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => xScale(d.nombre))
.attr("y", d => yScale(d.valor))
.attr("width", xScale.bandwidth())
.attr("height", d => config.height - config.margin.bottom - yScale(d.valor))
.attr("fill", d => colorScale(d.valor))
.attr("stroke", "#333") // Borde más oscuro
.attr("stroke-width", 1);
// Etiquetas de valores
svg.selectAll(".label")
.data(datos)
.enter()
.append("text")
.attr("class", "label")
.attr("x", d => xScale(d.nombre) + xScale.bandwidth() / 2)
.attr("y", d => yScale(d.valor) - 5)
.attr("text-anchor", "middle")
.style("font-size", "12px")
.style("font-weight", "bold")
.style("fill", "#1a1a1a") // Texto más oscuro
.text(d => d.valor);
return svg.node(); // ✅ ¡Al final!
}
md`# Ejercicio 3: Gráfico de Barras con Ejes`
chart = {
const config = {
width: 600,
height: 350,
margin: { top: 20, right: 20, bottom: 60, left: 50 }
};
const datos = [
{ nombre: "A", valor: 30 },
{ nombre: "B", valor: 80 },
{ nombre: "C", valor: 45 },
{ nombre: "D", valor: 60 },
{ nombre: "E", valor: 20 }
];
const svg = d3.create("svg")
.attr("width", config.width)
.attr("height", config.height)
.style("font-family", "Arial, sans-serif");
const xScale = d3.scaleBand()
.domain(datos.map(d => d.nombre))
.range([config.margin.left, config.width - config.margin.right])
.padding(0.2);
const yScale = d3.scaleLinear()
.domain([0, d3.max(datos, d => d.valor)])
.range([config.height - config.margin.bottom, config.margin.top]);
svg.selectAll(".bar")
.data(datos)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => xScale(d.nombre))
.attr("y", config.height - config.margin.bottom)
.attr("width", xScale.bandwidth())
.attr("height", 0)
.attr("fill", "#66bb6a") // ✅ Relleno verde
.attr("stroke", "#2e7d32") // ✅ Borde verde oscuro
.attr("stroke-width", 1)
.transition()
.duration(1000)
.delay((d, i) => i * 100)
.attr("y", d => yScale(d.valor))
.attr("height", d => config.height - config.margin.bottom - yScale(d.valor));
svg.append("g")
.attr("transform", `translate(0,${config.height - config.margin.bottom})`)
.call(d3.axisBottom(xScale))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)");
svg.append("g")
.attr("transform", `translate(${config.margin.left},0)`)
.call(d3.axisLeft(yScale).tickFormat(d => d + "%"));
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - config.margin.left + 10)
.attr("x", 0 - (config.height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", "#2c3e50")
.text("Porcentaje de Ventas (%)");
svg.append("text")
.attr("transform", `translate(${config.width / 2}, ${config.height - 10})`)
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", "#2c3e50")
.text("Productos");
svg.append("text")
.attr("x", config.width / 2)
.attr("y", config.margin.top / 2)
.attr("text-anchor", "middle")
.style("font-size", "18px")
.style("font-weight", "bold")
.style("fill", "#2c3e50")
.text("Ventas por Producto");
return svg.node();
}
d3 = require("d3@7")
md`# Ejercicio 4: Gráfico de Dispersión`
datosScatter = [
{x: 10, y: 20, categoria: "Tecnología", nombre: "Empresa A"},
{x: 25, y: 35, categoria: "Salud", nombre: "Empresa B"},
{x: 40, y: 15, categoria: "Tecnología", nombre: "Empresa C"},
{x: 55, y: 45, categoria: "Educación", nombre: "Empresa D"},
{x: 70, y: 30, categoria: "Salud", nombre: "Empresa E"},
{x: 85, y: 50, categoria: "Educación", nombre: "Empresa F"},
{x: 15, y: 60, categoria: "Tecnología", nombre: "Empresa G"},
{x: 90, y: 25, categoria: "Salud", nombre: "Empresa H"}
]
{
const config = {
width: 600,
height: 350,
margin: { top: 20, right: 20, bottom: 60, left: 50 }
};
const svg = d3.create("svg")
.attr("width", config.width)
.attr("height", config.height)
.style("font-family", "Arial, sans-serif");
const xScaleScatter = d3.scaleLinear()
.domain(d3.extent(datosScatter, d => d.x))
.range([config.margin.left, config.width - config.margin.right]);
const yScaleScatter = d3.scaleLinear()
.domain(d3.extent(datosScatter, d => d.y))
.range([config.height - config.margin.bottom, config.margin.top]);
// 🎨 colores: verde, amarillo, azul
const colorScale = d3.scaleOrdinal()
.domain(["Tecnología", "Salud", "Educación"])
.range(["#66bb6a", "#fdd835", "#42a5f5"]);
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("padding", "10px")
.style("background", "rgba(0,0,0,0.8)")
.style("color", "white")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0);
svg.selectAll(".dot")
.data(datosScatter)
.enter()
.append("circle")
.attr("class", "dot")
.attr("cx", d => xScaleScatter(d.x))
.attr("cy", d => yScaleScatter(d.y))
.attr("r", 0)
.style("fill", d => colorScale(d.categoria))
.style("stroke", "#2c3e50")
.style("stroke-width", 2)
.style("cursor", "pointer")
.transition()
.duration(800)
.delay((d, i) => i * 100)
.attr("r", 10)
.end().then(() => {
svg.selectAll(".dot")
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("r", 14)
.style("stroke-width", 3);
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(`
<strong>${d.nombre}</strong><br/>
Categoría: ${d.categoria}<br/>
X: ${d.x}, Y: ${d.y}
`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("r", 10)
.style("stroke-width", 2);
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
});
svg.append("g")
.attr("transform", `translate(0,${config.height - config.margin.bottom})`)
.call(d3.axisBottom(xScaleScatter));
svg.append("g")
.attr("transform", `translate(${config.margin.left},0)`)
.call(d3.axisLeft(yScaleScatter));
svg.append("text")
.attr("transform", `translate(${config.width/2},${config.height - 10})`)
.style("text-anchor", "middle")
.style("font-size", "14px")
.text("Inversión en Marketing");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - config.margin.left)
.attr("x", 0 - (config.height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-size", "14px")
.text("ROI (%)");
const legend = svg.selectAll(".legend")
.data(colorScale.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", (d, i) => `translate(${config.width - 120},${20 + i * 25})`);
legend.append("circle")
.attr("r", 6)
.style("fill", colorScale);
legend.append("text")
.attr("x", 15)
.attr("dy", ".35em")
.style("text-anchor", "start")
.style("font-size", "12px")
.text(d => d);
return svg.node();
}
md`# 📊 Dashboard Interactivo de Ventas - Proyecto Final`
ventasData = [
{mes: "Enero", ventas: 1200, gastos: 800, categoria: "Electrónicos", beneficio: 400},
{mes: "Febrero", ventas: 1500, gastos: 900, categoria: "Electrónicos", beneficio: 600},
{mes: "Marzo", ventas: 1800, gastos: 950, categoria: "Electrónicos", beneficio: 850},
{mes: "Abril", ventas: 1300, gastos: 850, categoria: "Ropa", beneficio: 450},
{mes: "Mayo", ventas: 1600, gastos: 920, categoria: "Ropa", beneficio: 680},
{mes: "Junio", ventas: 2000, gastos: 1000, categoria: "Ropa", beneficio: 1000},
{mes: "Julio", ventas: 1750, gastos: 950, categoria: "Electrónicos", beneficio: 800},
{mes: "Agosto", ventas: 1900, gastos: 1100, categoria: "Ropa", beneficio: 800}
]
viewof categoriaSeleccionada = Inputs.select(
["Todas", ...new Set(ventasData.map(d => d.categoria))],
{label: "Filtrar por categoría:", value: "Todas"}
)
datosFiltrados = categoriaSeleccionada === "Todas"
? ventasData
: ventasData.filter(d => d.categoria === categoriaSeleccionada)
dashboardConfig = ({
width: 800,
height: 400,
margin: {top: 40, right: 40, bottom: 60, left: 60},
colors: {
electronicosColor: "#3498db",
ropaColor: "#e74c3c",
ventasColor: "#2ecc71",
gastosColor: "#f39c12",
beneficioColor: "#9b59b6"
}
})
{
const svg = d3.create("svg")
.attr("width", dashboardConfig.width)
.attr("height", dashboardConfig.height)
.style("background", "#f8f9fa")
.style("border-radius", "8px")
.style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)");
// Escalas
const xScale = d3.scaleBand()
.domain(datosFiltrados.map(d => d.mes))
.range([dashboardConfig.margin.left, dashboardConfig.width - dashboardConfig.margin.right])
.padding(0.2);
const yScale = d3.scaleLinear()
.domain([0, d3.max(datosFiltrados, d => d.ventas)])
.range([dashboardConfig.height - dashboardConfig.margin.bottom, dashboardConfig.margin.top])
.nice();
// 🎨 colores: verde oscuro y verde claro
const verdeOscuro = "#2e7d32";
const verdeClaro = "#a5d6a7";
// Crear barras con join
svg.selectAll(".bar")
.data(datosFiltrados)
.join("rect")
.attr("class", "bar")
.attr("x", d => xScale(d.mes))
.attr("y", dashboardConfig.height - dashboardConfig.margin.bottom)
.attr("width", xScale.bandwidth())
.attr("height", 0)
.attr("fill", d => d.categoria === "Electrónicos"
? verdeOscuro
: verdeClaro)
.attr("stroke", "#1b5e20") // borde verde más oscuro
.attr("stroke-width", 1)
.transition()
.duration(1000)
.delay((d, i) => i * 100)
.attr("y", d => yScale(d.ventas))
.attr("height", d => dashboardConfig.height - dashboardConfig.margin.bottom - yScale(d.ventas));
// Etiquetas de valores
svg.selectAll(".value-label")
.data(datosFiltrados)
.join("text")
.attr("class", "value-label")
.attr("x", d => xScale(d.mes) + xScale.bandwidth() / 2)
.attr("y", d => yScale(d.ventas) - 5)
.attr("text-anchor", "middle")
.style("font-size", "11px")
.style("font-weight", "bold")
.style("fill", "#1b5e20") // texto verde muy oscuro
.text(d => `${d.ventas}`);
// Ejes
svg.append("g")
.attr("transform", `translate(0,${dashboardConfig.height - dashboardConfig.margin.bottom})`)
.call(d3.axisBottom(xScale))
.selectAll("text")
.style("font-size", "12px");
svg.append("g")
.attr("transform", `translate(${dashboardConfig.margin.left},0)`)
.call(d3.axisLeft(yScale).tickFormat(d => `${d}`))
.selectAll("text")
.style("font-size", "12px");
// Título
svg.append("text")
.attr("x", dashboardConfig.width / 2)
.attr("y", 25)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-weight", "bold")
.style("fill", "#1b5e20") // título verde oscuro
.text(`Ventas por Mes - ${categoriaSeleccionada}`);
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", dashboardConfig.width)
.attr("height", dashboardConfig.height)
.style("background", "#f8f9fa")
.style("border-radius", "8px")
.style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)")
.style("margin-top", "20px");
// Escalas
const xScale = d3.scaleBand()
.domain(datosFiltrados.map(d => d.mes))
.range([dashboardConfig.margin.left, dashboardConfig.width - dashboardConfig.margin.right])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(datosFiltrados, d => Math.max(d.ventas, d.gastos))])
.range([dashboardConfig.height - dashboardConfig.margin.bottom, dashboardConfig.margin.top])
.nice();
// 🎨 colores
const moradoClaro = "#ba68c8"; // para ventas
const verde = "#4caf50"; // para gastos
// Funciones de línea
const lineVentas = d3.line()
.x(d => xScale(d.mes) + xScale.bandwidth() / 2)
.y(d => yScale(d.ventas))
.curve(d3.curveMonotoneX);
const lineGastos = d3.line()
.x(d => xScale(d.mes) + xScale.bandwidth() / 2)
.y(d => yScale(d.gastos))
.curve(d3.curveMonotoneX);
// Línea de ventas
svg.append("path")
.datum(datosFiltrados)
.attr("fill", "none")
.attr("stroke", moradoClaro)
.attr("stroke-width", 3)
.attr("d", lineVentas);
// Línea de gastos
svg.append("path")
.datum(datosFiltrados)
.attr("fill", "none")
.attr("stroke", verde)
.attr("stroke-width", 3)
.attr("d", lineGastos);
// Puntos de ventas
svg.selectAll(".dot-ventas")
.data(datosFiltrados)
.join("circle")
.attr("class", "dot-ventas")
.attr("cx", d => xScale(d.mes) + xScale.bandwidth() / 2)
.attr("cy", d => yScale(d.ventas))
.attr("r", 5)
.attr("fill", moradoClaro)
.attr("stroke", "white")
.attr("stroke-width", 2);
// Puntos de gastos
svg.selectAll(".dot-gastos")
.data(datosFiltrados)
.join("circle")
.attr("class", "dot-gastos")
.attr("cx", d => xScale(d.mes) + xScale.bandwidth() / 2)
.attr("cy", d => yScale(d.gastos))
.attr("r", 5)
.attr("fill", verde)
.attr("stroke", "white")
.attr("stroke-width", 2);
// Ejes
svg.append("g")
.attr("transform", `translate(0,${dashboardConfig.height - dashboardConfig.margin.bottom})`)
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", `translate(${dashboardConfig.margin.left},0)`)
.call(d3.axisLeft(yScale).tickFormat(d => `${d}`));
// Leyenda
const legend = svg.append("g")
.attr("transform", `translate(${dashboardConfig.width - 150}, 50)`);
legend.append("line")
.attr("x1", 0).attr("x2", 20)
.attr("y1", 0).attr("y2", 0)
.attr("stroke", moradoClaro)
.attr("stroke-width", 3);
legend.append("text")
.attr("x", 25).attr("y", 5)
.text("Ventas")
.style("font-size", "12px");
legend.append("line")
.attr("x1", 0).attr("x2", 20)
.attr("y1", 20).attr("y2", 20)
.attr("stroke", verde)
.attr("stroke-width", 3);
legend.append("text")
.attr("x", 25).attr("y", 25)
.text("Gastos")
.style("font-size", "12px");
// Título
svg.append("text")
.attr("x", dashboardConfig.width / 2)
.attr("y", 25)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-weight", "bold")
.style("fill", "#2c3e50")
.text("Tendencia de Ventas vs Gastos");
return svg.node();
}
{
const totalVentas = d3.sum(datosFiltrados, d => d.ventas);
const totalGastos = d3.sum(datosFiltrados, d => d.gastos);
const beneficioTotal = totalVentas - totalGastos;
const promedioVentas = d3.mean(datosFiltrados, d => d.ventas);
const div = d3.create("div")
.style("background", "#fff")
.style("padding", "20px")
.style("border-radius", "8px")
.style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)")
.style("margin-top", "20px")
.style("font-family", "Arial, sans-serif");
div.append("h3")
.text("📊 Resumen Estadístico")
.style("color", "#2c3e50")
.style("margin-bottom", "15px");
const stats = [
{ label: "Total Ventas", value: `${totalVentas.toLocaleString()}`, color: "#2ecc71" }, // verde
{ label: "Total Gastos", value: `${totalGastos.toLocaleString()}`, color: "#3498db" }, // azul
{ label: "Beneficio Total", value: `${beneficioTotal.toLocaleString()}`, color: "#e67e22" }, // anaranjado
{ label: "Promedio Ventas", value: `${Math.round(promedioVentas).toLocaleString()}`, color: "#e91e63" } // rosado
];
const statsContainer = div.append("div")
.style("display", "grid")
.style("grid-template-columns", "repeat(auto-fit, minmax(200px, 1fr))")
.style("gap", "15px");
stats.forEach(stat => {
const statBox = statsContainer.append("div")
.style("padding", "15px")
.style("background", "#f8f9fa")
.style("border-radius", "6px")
.style("border-left", `4px solid ${stat.color}`);
statBox.append("div")
.text(stat.label)
.style("font-size", "14px")
.style("color", "#666")
.style("margin-bottom", "5px");
statBox.append("div")
.text(stat.value)
.style("font-size", "24px")
.style("font-weight", "bold")
.style("color", stat.color);
});
return div.node();
}
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.
