<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 data = [
{ width: 300, color: "purple", y: 10 },
{ width: 250, color: "brown", y: 40 },
{ width: 200, color: "orange", y: 70 }
];
const svg = d3.create("svg")
.attr("width", 500)
.attr("height", 100);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 10)
.attr("y", d => d.y)
.attr("width", d => d.width)
.attr("height", 20)
.attr("fill", d => d.color);
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' },
]
//tu código aquí
{
const 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', 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();
}
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 }
]
}
]
// Tu código aquí
{
const 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 svg = d3.create("svg")
.attr("width", 300)
.attr("height", 350);
const rows = svg.selectAll("g")
.data(rectGrid)
.join("g")
.attr("transform", d => `translate(0, ${d.y})`)
.attr("fill", d => d.color);
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 = d3.max(scores, d=>d.score
)
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')
// establecemos los atributos para los rectángulos
.attr('fill', 'steelblue')
.attr('x', 0)
.attr('y', d => yscale(d.name))
.attr('width', d => x(d.value)) // EDITAR aquí
.attr('height', yscale.bandwidth()); // EDITAR aquí
// devolvemos el elemento SVG externo para que se pueda renderizar
return svg.node();
}
ordinalScale = d3.scaleOrdinal()
.domain(['one', 'two','three'])
.range([1,2,3])
ordinalScale('one')
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 => 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.
