<svg width="500" height="100">
<rect x="10" y="10" width="300" height="20" fill="purple"/>
<rect x="10" y="40" width="250" height="20" fill="brown"/>
<rect x="10" y="70" width="200" height="20" fill="orange"/>
</svg>
{
const svg = d3.create("svg")
.attr("width", 500)
.attr("height", 100)
svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 300)
.attr("height", 20)
.attr("fill", "purple")
svg.append("rect")
.attr("x", 10)
.attr("y", 40)
.attr("width", 250)
.attr("height", 20)
.attr("fill", "brown")
svg.append("rect")
.attr("x", 10)
.attr("y", 70)
.attr("width", 200)
.attr("height", 20)
.attr("fill", "orange")
return svg.node()
}
rectInfo = [
{ xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },
{ xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },
{ xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },
]
{
const svg = d3.create("svg")
.attr("width", 500)
.attr("height", 100)
svg.selectAll("rect")
.data(rectInfo)
.join("rect")
.attr("x", r => r.xPos)
.attr("y", r => r.yPos)
.attr("width", r => r.width)
.attr("height", r => r.height)
.attr("fill", r => r.color)
return svg.node()
}
circleGrid = [
{
y: 50,
color: 'purple',
label: 'Row A',
circles: [
{ x: 25, radius: 5 },
{ x: 75, radius: 10 },
{ x: 125, radius: 15 },
{ x: 175, radius: 20 },
{ x: 225, radius: 25 }
]
},
{
y: 150,
color: 'brown',
label: 'Row B',
circles: [
{ x: 25, radius: 25 },
{ x: 75, radius: 20 },
{ x: 125, radius: 15 },
{ x: 175, radius: 10 },
{ x: 225, radius: 5 }
]
},
{
y: 250,
color: 'orange',
label: 'Row C',
circles: [
{ x: 25, radius: 20 },
{ x: 75, radius: 10 },
{ x: 125, radius: 5 },
{ x: 175, radius: 10 },
{ x: 225, radius: 20 }
]
}
]
{
//Crear SVG
const grafico = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
// Crear un grupo para cada círculo
const rows = grafico.selectAll('g')
.data(circleGrid)
.join('g')
//Colocamos la posición en y
.attr('transform', row => `translate(0,${row.y})`)
.attr('fill', row => row.color);
// Adicionamos el label
rows.append('text')
.attr('font-family', 'sans-serif')
.attr('y', -30)
.text(d => d.label)
// Se adiciona otro data join para dibujar cada uno de los círculos
rows.selectAll('circle')
// row.circles contiene los círculos de cada fila
.data(row => row.circles)
.join('circle')
.attr('cx', circ => circ.x)
.attr('r', circ => circ.radius);
return grafico.node();
}
rectGrid = [
{
y: 50,
color: 'purple',
rects: [
{ x: 25, width: 10, height: 30 },
{ x: 75, width: 30, height: 10 },
{ x: 125, width: 20, height: 20 },
{ x: 175, width: 30, height: 10 },
{ x: 225, width: 10, height: 30 }
]
},
{
y: 150,
color: 'brown',
rects: [
{ x: 25, width: 5, height: 5 },
{ x: 75, width: 10, height: 10 },
{ x: 125, width: 15, height: 15 },
{ x: 175, width: 20, height: 20 },
{ x: 225, width: 25, height: 25 }
]
},
{
y: 250,
color: 'orange',
rects: [
{ x: 25, width: 10, height: 10 },
{ x: 75, width: 10, height: 15 },
{ x: 125, width: 10, height: 20 },
{ x: 175, width: 10, height: 25 },
{ x: 225, width: 10, height: 30 }
]
}
]
{
const grafico = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
const rows = grafico.selectAll("g")
.data(rectGrid)
.join("g")
.attr("transform", row => `translate(0, ${row.y})`)
.attr("fill", row => row.color)
rows.selectAll("rect")
.data(r => r.rects)
.join("rect")
.attr("x", r => r.x)
.attr("width", r => r.width)
.attr("height", r => r.height)
return grafico.node();
}
scaleDiagram
linearScale = d3.scaleLinear().domain([0,10]).range([0,100])(0)
fahrenheitToCelsius = d3.scaleLinear().domain([32, 212]).range([0, 100])(68)
scores = [
{name: 'Brian', score: 90},
{name: 'Taylor', score: 80},
{name: 'Kelly', score: 70},
{name: 'Jane', score: 45},
{name: 'Joe', score: 30},
]
width = 300
maxScore = d3.max(scores, data => data.score)
x = d3.scaleLinear()
.domain([0, maxScore])
.range([0, width])
x(0)
x(maxScore/2)
x(maxScore)
names = scores.map(d => d.name)
height = 100
y = d3.scaleBand()
.domain(names)
.range([0, height])
.padding(0.2)
y.bandwidth()
scores
{
// creamos nuestro elemento SVG externo con un tamaño de 500x100
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 100);
// barra por cada elemento en scores
const bars = svg.selectAll('rect')
.data(scores)
.join('rect')
// establecemos los atributos para los rectángulos
.attr('fill', 'steelblue')
.attr('x', d => 0)
.attr('y', d => y(d.name)) // EDITAR aquí
.attr('width', d => d.score) // EDITAR aquí
.attr('height', y.bandwidth); // EDITAR aquí
// devolvemos el elemento SVG externo para que se pueda renderizar
return svg.node();
}
ordinalScale = d3.scaleOrdinal()
names
colors = d3.schemeCategory10
ordinalColor = d3.scaleOrdinal(names, colors)
import {swatches} from "@d3/color-legend"
swatches({color: ordinalColor})
{
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
const circles = svg.selectAll('rect')
.data(scores)
.join('rect')
.attr('fill', d => ordinalColor(d.name)) // Aquí
.attr('x', 0)
.attr('y', d => y(d.name))
.attr('width', d => x(d.score))
.attr('height', y.bandwidth())
return svg.node();
}
d3 = require('d3@7')
import {chart as scaleDiagram} from '@uw-info474/animated-scale-diagram'
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.
