fruta = [
{nombre: "🍊", cantidad: 21},
{nombre: "🍇", cantidad: 13},
{nombre: "🍏", cantidad: 8},
{nombre: "🍌", cantidad: 5},
{nombre: "🍐", cantidad: 3},
{nombre: "🍋", cantidad: 2},
{nombre: "🍎", cantidad: 1},
{nombre: "🍉", cantidad: 1}
]
fruta.map(d => d.cantidad) // cantidad de fruta, dimensión cuantitativa
//fruta.map(function(d) { return d.cantidad; } ) // Esta linea es equivalente a la de arriba
fruta.map(d => d.nombre) // el nombre de cada fruta, dimensión nominal
//fruta.map(function(d) { return d.nombre; } ) // Esta linea es equivalente a la de arriba
x = d3.scaleLinear() // Escala lineal
.domain([0, d3.max(fruta, d => d.cantidad)])// requiere un dominio 0 -> max(cantidad)
.range([margin.left, width - margin.right]) // y un rango en la gráfica: márgenes laterales
y = d3.scaleBand() // Escala por bandas
.domain(fruta.map(d => d.nombre)) // requiere un dominio (nombres de frutas)
.range([margin.top, height - margin.bottom]) // y un rango en la gráfica: márgenes sup/inf
.padding(0.5) // Además, podemos especificar una separación
x.domain()
x.range()
y("🍇") // La coordenada y de la fruta = uva
x(21) // la coordeanada x de la cantidad = 21
x(21) - x(0) // el ancho de la barra correspondiente a cantidad = 21
y.bandwidth() // la altura de cada barra (o banda)
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",40)
.style("font","10px sans-serif");
// 2. Dibujamos la barra
svg.append("g")
.attr("fill", "#ff006e")
.append("rect")
.attr("x", x(0))
.attr("width", x(count) - x(0))
.attr("height", 33);
// 3. Dibujamos el texto
svg.append("g").attr("transform", `translate(-16,20)`)
.attr("fill", "#fff")
.append("text")
.attr("x", x(count))
.text(count);
// n. Retornamos el canvas.
return svg.node();
}
color = d3.scaleSequential() // Escala secuencial en d3
.domain([0, d3.max(fruta, d => d.cantidad)]) // Rango: 0->max(cantidad)
.interpolator(d3.interpolateRgb("green", "red")) // Interpolar colores verde->rojo
color(0) // El color para 0 (mínimo) es el verde rgb(0,128,0)
color(21) // El color para 21 (máximo) es el rojo rgb(255,0,0)
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.
