Published
Edited
Jun 17, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const canvas = {
width: 350,
height: 350,
margin: {
top: 10,
right: 20,
bottom: 25,
left: 25,
},
};
const x = d3.scaleLinear()
.domain([d3.min(datasetFiltered, d => d[x_column]), d3.max(datasetFiltered, d => d[x_column])])
.range([canvas.margin.left, canvas.width - canvas.margin.right]);
const y = d3.scaleLinear()
.domain([d3.min(datasetFiltered, d => d[y_column]), d3.max(datasetFiltered, d => d[y_column])])
.range([canvas.height - canvas.margin.bottom, canvas.margin.top]);

const svg = d3.select(DOM.svg(canvas.width, canvas.height));
// legends
svg
.append('g')
.attr('transform', `translate(0, ${canvas.height - canvas.margin.bottom})`)
.call(d3.axisBottom(x));
svg
.append('g')
.attr('transform', `translate(${canvas.margin.left}, 0)`)
.call(d3.axisLeft(y));

// Add dots
svg.append('g')
.selectAll('dot')
.data(datasetFiltered)
.enter()
.append('circle')
.attr('cx', d => x(d[x_column]))
.attr('cy', d => y(d[y_column]))
.attr('r', 3)
.style('fill', 'black')

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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