<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();
}
{
const svg = d3.create('svg')
.attr('width', 500)
.attr('height' 1000)
}
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('hegiht', 100);
svg.selectAll('rect')
.data(rectInfo)
.join('rect')
.attr('x', d => d.xPos)
.attr('y', d => d.yPos)
.attr('width', d => d.width)
.attr('height', d => d.height)
.attr('fill', d => d.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 svg = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
return svg.node();
}
{
// 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', d => `translate(0,${d.y})`)
.attr('fill', d => d.color);
rows.selectAll('rect')
.data(d => d.rects)
.join('rect')
.attr('x', d => d.x)
.attr('y', 0)
.attr('width', d => d.width)
.attr('height', d => d.height);
return grafico.node();
}
{
const svg = d3.create("svg")
.attr("width", 500)
.attr("height", 300);
const rows = svg.selectAll("g")
.data(rectGrid)
.join("g")
.attr("transform", function(row) { return `translate(0,${row.y})`; })
.attr("fill", function(d) { return d.color; });
rows.selectAll("rect")
.data(function(d) { return d.rects; })
.join("rect")
.attr("x", function(d) { return d.x; })
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; });
return svg.node();
}
scaleDiagram
linearScale =
fahrenheitToCelsius =
scores = [
{name: 'Brian', score: 90},
{name: 'Taylor', score: 80},
{name: 'Kelly', score: 70},
{name: 'Jane', score: 45},
{name: 'Joe', score: 30},
]
width = 300
maxScore =
x = d3.scaleLinear()
x(0)
x(maxScore/2)
x(maxScore)
names = scores.map(d => d.name)
height = 100
y = d3.scaleBand()
y.bandwidth()
scores
{
// creamos nuestro elemento SVG externo con un tamaño de 500x100
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// barra por cada elemento en scores
const bars = svg.selectAll('rect')
.data(scores)
.join('rect')
.attr('fill', 'steelblue')
.attr('x', 0)
.attr('y', d => y(d.name)) // Posición en Y
.attr('width', d => x(d.score)) // Ancho según score
.attr('height', y.bandwidth()); // Altura de cada barra
return svg.node();
}
{
const x = d3.scaleLinear()
.domain([0, d3.max(scores, d => d.score)])
.range([0, 500]);
const y = d3.scaleBand()
.domain(scores.map(d => d.name))
.range([0, 100])
.padding(0.1);
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
svg.selectAll('rect')
.data(scores)
.join('rect')
.attr('fill', 'steelblue')
.attr('x', 0)
.attr('y', d => y(d.name))
.attr('width', d => x(d.score))
.attr('height', y.bandwidth());
return svg.node();
}
ordinalScale = d3.scaleOrdinal()
names
d3.schemeCategory10
ordinalColor = d3.scaleOrdinal()
.domain(names)
.range(d3.schemeCategory10)
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)) // Aquí
.attr('x', 0)
.attr('y', d => yscale(d.name))
.attr('width', d => x(d.score))
.attr('height', yscale.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.
