Data editor @ NBC News.
{
const svg = d3.create('svg').attr('viewbox', [0, 0, width, height]);
var rects = svg
.append('g')
.attr('fill', '#cccccc')
.selectAll('rect')
.data(randomNumbers(6))
.join('rect')
.attr('x', (d, i) => x(i))
.attr('y', (d, i) => y(d))
.attr('height', d => y(0) - y(d))
.attr('width', x.bandwidth());
return svg.node();
}
{
const svg = d3.create('svg').attr('viewbox', [0, 0, width, height]);
const svgg = svg.append('g').attr('fill', '#cccccc');
let i = 0;
let max = 7;
while (true) {
i += 1;
if (i % max == 0) i = 0;
var rects = svgg
.selectAll('rect')
.data(randomNumbers(i))
.join('rect')
.attr('x', (d, i) => x(i))
.attr('y', (d, i) => y(d))
.attr('height', d => y(0) - y(d))
.attr('width', x.bandwidth());
yield svg.node();
await Promises.tick(1000);
}
}
{
const svg = d3.create('svg').attr('viewbox', [0, 0, width, height]);
const svgg = svg.append('g').attr('fill', '#cccccc');
let i = 0;
let max = 7;
while (true) {
i += 1;
if (i % max == 0) i = 0;
var rects = svgg.selectAll('rect').data(randomNumbers(i));
rects
.join(
enter => enter.append('rect').attr('fill', 'green'),
update => update.attr('fill', '#fd614d')
)
.attr('x', (d, i) => x(i))
.attr('y', (d, i) => y(d))
.attr('height', d => y(0) - y(d))
.attr('width', x.bandwidth());
yield svg.node();
await Promises.tick(1000);
}
}
{
const svg = d3.create('svg').attr('viewbox', [0, 0, width, height]);
// we don't want to rewrite the <g> so we append it outside the loop.
const svgg = svg.append('g').attr('fill', '#fd614d');
// i and max let us change the number of bars in the chart
let i = 0;
let max = 4;
while (true) {
const t = svg.transition().duration(500);
// i and max let us change the number of bars in the chart
i += 1;
if (i % max == 0) i = 0;
var rects = svgg
.selectAll('rect')
.data(randomNumbers(i))
.join(
enter =>
enter
.append('rect')
.attr('fill', 'green')
// These next four lines are what we would call to create the static chart.
.attr('x', (d, i) => x(i))
.attr('y', d => y(d))
.attr('height', 0)
.attr('width', x.bandwidth())
// The things we want to animate go in the call() statement
.call(enter =>
enter.transition(t).attr('height', d => y(0) - y(d))
),
update =>
// The things we want to animate (the y value and the height) go in the call() statement
update.attr('fill', '#fd614d').call(update =>
update
.transition(t)
.attr('y', d => y(d))
.attr('height', d => y(0) - y(d))
),
exit =>
exit.attr('fill', 'black').call(exit =>
exit
.transition(t)
// Figured out through hackery that 100 was the midpoint of the chart,
// that's what makes it look like it squashes down to nothing
.attr('y', 100)
.attr('height', 0)
.remove()
)
);
yield svg.node();
await Promises.tick(1000);
}
}
randomNumbers(5)
function randomNumbers(len) {
return d3.shuffle("123456789".split("")).slice(0, len);
}
function randomLetters() {
return d3.shuffle("abcdefghijklmnopqrstuvwxyz".split(""))
.slice(0, Math.floor(6 + Math.random() * 20))
.sort();
}
d3 = require("d3@6")
width = 500
height = 100;
margin = { return { top: 0, bottom: 0, left: 20, right: 20 } };
x = d3
.scaleBand()
.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
.rangeRound([margin.left, width - margin.right])
.padding(0)
y = d3
.scaleLinear()
.domain([0, 9])
.range([height - margin.top, margin.bottom])
html`<style>
.observablehq > svg:only-child {
font: var(--mono_fonts);
display: block;
}
</style>`
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.
