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.1) // 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)
color = d3.scaleSequential() // Escala secuencial en d3
.domain([0, d3.max(fruta, d => d.cantidad)]) // Rango: 0->max(cantidad)
.interpolator(d3.interpolateRgb("yellow", "red")) // Interpolar colores verde->rojo
color(21) // El color para 21 (máximo) es el rojo rgb(255,0,0)
color(0) // El color para 0 (mínimo) es el amarillo rgb(255,255,0)
legend({color, title: "Kg de fruta"})
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.
