Public
Edited
May 23
viewof data = Inputs.table([
{ name: "A", value: 30 },
{ name: "B", value: 80 },
{ name: "C", value: 45 },
{ name: "D", value: 60 },
{ name: "E", value: 20 },
{ name: "F", value: 90 },
{ name: "G", value: 55 }
])
chart = {
const svg = d3.create("svg")
.attr("width", 500)
.attr("height", 300);
const x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, 480])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([280, 0]);
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.name))
.attr("y", 280)
.attr("width", x.bandwidth())
.attr("height", 0)
.attr("fill", "steelblue")
.transition()
.duration(1000)
.attr("y", d => y(d.value))
.attr("height", d => 280 - y(d.value))
.attr("fill", "orange");
return svg.node();
}
scatterChart = {
const svg = d3.create("svg")
.attr("width", 500)
.attr("height", 300);
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([40, 480]);
const y = d3.scaleLinear()
.domain([0, data.length])
.range([280, 20]);
const color = d3.scaleSequential(d3.interpolateBlues)
.domain([0, d3.max(data, d => d.value)]);
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.value))
.attr("cy", (d, i) => y(i))
.attr("r", 0)
.attr("fill", d => color(d.value))
.transition()
.duration(1000)
.attr("r", 8);
// Transición de escala después de 1.5 segundos
setTimeout(() => {
const xLog = d3.scaleLog()
.domain([1, d3.max(data, d => d.value)])
.range([40, 480]);
svg.selectAll("circle")
.transition()
.duration(1000)
.attr("cx", d => xLog(d.value))
.attr("fill", "purple");
}, 1500);
return svg.node();
}
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.
