{
const container = d3.create('svg')
.attr('height', 100)
.attr('width', 100);
return container.node();
}
{
const container = d3.create('svg')
.attr('height', 100)
.attr('width', 100);
container.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 50)
.attr('fill', 'RebeccaPurple');
return container.node();
}
{
const container = d3.create('svg')
.attr('height', 100)
.attr('width', 200);
container.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 50)
.attr('fill', 'RebeccaPurple');
container.append('rect')
.attr('x', 100)
.attr('y', 0)
.attr('width', 100)
.attr('height', 100)
.attr('fill', 'Violet');
return container.node();
}
{
const container = d3.create('svg')
.attr('height', 100)
.attr('width', 310);
const data = [
{x: 0, y: 0},
{x: 105, y: 0},
{x: 210, y: 0},
];
const cells = container.selectAll('g')
.data(data)
.join('g')
.attr('transform', d => `translate(${d.x},${d.y})`);
return container.node();
}
{
const container = d3.create('svg')
.attr('height', 100)
.attr('width', 310);
const data = [
{x: 0, y: 0, label: 'one'},
{x: 105, y: 0, label: 'two'},
{x: 210, y: 0, label: 'three'},
];
const cells = container.selectAll('g')
.data(data)
.join('g')
.attr('transform', d => `translate(${d.x},${d.y})`);
cells.append('rect')
.attr('width', 100)
.attr('height', 100)
.attr('fill', 'RebeccaPurple');
return container.node();
}
{
const container = d3.create('svg')
.attr('height', 100)
.attr('width', 310);
const data = [
{x: 0, y: 0, label: 'one'},
{x: 105, y: 0, label: 'two'},
{x: 210, y: 0, label: 'three'},
];
const cells = container.selectAll('g')
.data(data)
.join('g')
.attr('transform', d => `translate(${d.x},${d.y})`);
cells.append('rect')
.attr('width', 100)
.attr('height', 100)
.attr('fill', 'RebeccaPurple');
cells.append('text')
.attr('x', 50)
.attr('y', 50)
.attr('fill', 'white')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('font-family', 'sans-serif')
.text(d => d.label);
return container.node();
}
function getRandomData() {
const randCoord = d3.randomInt(5, 196);
const numInstances = d3.randomInt(20, 81)();
const data = [];
for (let i = 0; i < numInstances; i++) {
data.push({ x: randCoord(), y: randCoord() });
}
return data;
}
circlesData = getRandomData()
{
const svg = d3.create('svg')
.attr('height', 200)
.attr('width', 200);
svg.selectAll('circle')
.data(circlesData)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', 'steelblue')
.attr('r', 5);
return svg.node();
}
{
const svg = d3.create('svg')
.attr('height', 200)
.attr('width', 200);
for (const row of circlesData) {
svg.append('circle')
.attr('cx', row.x)
.attr('cy', row.y)
.attr('fill', 'steelblue')
.attr('r', 5);
}
return svg.node();
}
viewof button1 = Inputs.button('Draw')
dots1 = {
const svg = d3.create('svg')
.attr('height', 200)
.attr('width', 200);
// create a function to draw the circles for a given dataset
function draw(data) {
svg.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', 'steelblue')
.attr('r', 5);
}
// make it possible to call the draw function from another cell
svg.node().draw = draw;
return svg.node();
}
{
// every time the Draw button is clicked,
// call the draw function above with new data
button1;
dots1.draw(getRandomData());
}
viewof button2 = Inputs.button('Draw')
dots2 = {
const svg = d3.create('svg')
.attr('height', 200)
.attr('width', 200);
function draw(data) {
const t = svg.transition().duration(500);
svg.selectAll('circle')
.data(data)
.join('circle')
.transition(t)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', 'steelblue')
.attr('r', 5);
}
svg.node().draw = draw;
return svg.node();
}
{
button2;
dots2.draw(getRandomData());
}
viewof button3 = Inputs.button('Draw')
dots3 = {
const svg = d3.create('svg')
.attr('height', 200)
.attr('width', 200);
function draw(data) {
const t = svg.transition().duration(500);
svg.selectAll('circle')
.data(data)
.join(
enter => enter.append('circle'),
update => update,
exit => exit.remove()
)
.transition(t)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', 'steelblue')
.attr('r', 5);
}
svg.node().draw = draw;
return svg.node();
}
{
button3;
dots3.draw(getRandomData());
}
dots4 = {
const svg = d3.create('svg')
.attr('height', 200)
.attr('width', 200);
function draw(data) {
const t = svg.transition().duration(1000);
svg.selectAll('circle')
.data(data)
.join(
enter => enter.append('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', 5)
.attr('fill', 'steelblue')
.attr('opacity', 0)
// this function needs to return the enter selection
// so we do the transition inside of .call()
// otherwise, we'd return a transition, not the enter selection
.call(e => e.transition(t).attr('opacity', 1)),
// likewise, this function needs to return the update selection,
// so we wrap the transition inside of call
update => update.call(
u => u.transition(t)
.attr('fill', '#c0c0c0')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
),
exit => exit.attr('fill', 'crimson')
.call(
e => e.transition(t)
.attr('opacity', 0)
.remove()
)
);
}
svg.node().draw = draw;
return svg.node();
}
{
button4;
dots4.draw(getRandomData());
}
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.
