Public
Edited
Apr 13, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
var myData = [40, 10, 20, 60, 30];

const container = d3.create('svg')
.attr('width', 600)
.attr('height', 100);

container.selectAll('circle')
.data(myData)
.join('circle')
.attr('cx', function(d, i) {
return i * 100;
})
.attr('cy', 50)
.attr('r', function(d) {
return 0.5 * d;
})
.style('fill', 'orange');

// return SVG DOM element
return container.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const container = d3.create('svg')
.attr('width', 600)
.attr('height', 100);

// Code here
// return SVG DOM element
return container.node();
}
Insert cell
Insert cell
Insert cell
{
const container = d3.create('svg')
.attr('width', 600)
.attr('height', 100);

// Code here
container.selectAll('circle')
.data(myData)
.join('circle')
.attr('cx', 200)
.attr('cy', 50)
.attr('r', 40)
.style('fill', 'orange');
// return SVG DOM element
return container.node();
}
Insert cell
Insert cell
{
const container = d3.create('svg')
.attr('width', 600)
.attr('height', 100);

// Code here
container.selectAll('circle')
.data(myData)
.join('circle')
.attr('cx', function(d, i) {
return i * 100;
})
.attr('cy', 50)
.attr('r', 40)
.style('fill', 'orange');
// return SVG DOM element
return container.node();
}
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
cities = [
{ name: 'London', population: 8674000},
{ name: 'New York', population: 8406000},
{ name: 'Sydney', population: 4293000},
{ name: 'Paris', population: 2244000},
{ name: 'Beijing', population: 11510000}
];
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
// Code here
Insert cell

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.
Learn more