datos_desempleo = d3.csvParse(await FileAttachment("desempleo@2.csv").text(),d3.autoType)
x = d3.scaleBand()
.domain(datos_desempleo.map(d => d.ciudad))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(datos_desempleo, d => d.desempleo)])
.range([height - margin.bottom,margin.top])
xAxis = function (g){
return g.attr("transform", `translate(0,${height - margin.bottom})`) // Esta línea llama al método transform y a translate y "desplaza" el eje dibujado desde 0 y movido sobre el eje Y en height - margin.bottom pixeles
.call(d3.axisBottom(x))
}
// Eje y, prueben el efecto de reemplazar {margin.left} por {width - margin.right}
// y {d3.axisLeft(y)} por {d3.axisRight(y)}
yAxis = function (g){ return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
chart_sin_barras = {
// 1. Canvas
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// 2. Dibujamos eje x
svg.append("g")
.call(xAxis) // Llamada a la función que sabe dibujar el eje x
.selectAll("text") // Editamos las etiquedas del eje, primero seleccionamos el text
.style("font","6px sans-serif") // Fuente
.style("text-anchor", "end") // Indentación de texto a derecha
.attr("dx", "-.8em") // Pequeño desplazamiento en x e y para que no tape el eje
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" ); // Rotación - prueben cambiar el ángulo
// 3. Dibujamos eje y
svg.append("g")
.call(yAxis); // Llamada a la función que sabe dibujar el eje y
return svg.node()
}
bar_chart = {
// Canvas
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Dibujamos eje x
svg.append("g")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.style("font","6px sans-serif") // Fuente
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" ); // prueben cambiar la rotación de la etiqueta
// Dibujamos eje y
svg.append("g")
.call(yAxis);
// Dibujamos las barras
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(datos_desempleo) // Una barra por cada fila
.join("rect")
.attr("x", d => x(d.ciudad)) // la posición en x corresponde a la ciudad
.attr("width", x.bandwidth()) // el ancho de la barra se lo pedimos a la escala x
.attr("y", d => y(d.desempleo)) // la posición en y corresponde al desempleo
.attr("height", d => y(0) - y(d.desempleo)); // la altura de la barra se la pedimos
// a la escala y
return svg.node();
}
height = 500
margin = ({top: 20, right: 20, bottom: 120, left: 40})
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.