Published
Edited
Jun 29, 2020
Insert cell
md`# Scatter plot`
Insert cell
{
const svg = d3.create('svg').attr("viewBox", [0, 0, width, height]);

svg.append('g').attr("transform", `translate(0,${height - margin.bottom})`);

const xAxis = svg
.append('g')
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${height - margin.bottom})`);

xAxis
.append('text')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('x', width / 2)
.attr('y', margin.bottom - 5)
.attr('text-anchor', 'end')
.attr('fill', 'black')
.attr('font-weight', 'bold')
.text("Dewpoint →");

const yAxis = svg
.append('g')
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(5));

yAxis
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('font-weight', 'bold')
.attr('transform', 'rotate(-90)')
.attr('y', -30)
.attr('x', -height / 2)
.text('Humidity →');

const radius = 4;
const color = "#B5C8EC";

svg
.append('g')
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', d => x(d.dewPoint))
.attr('cy', d => y(d.humidity))
.attr('fill', color)
.attr('r', radius);

return svg.node();
}
Insert cell
x = d3
.scaleLinear()
.domain([d3.min(data, d => d.dewPoint), d3.max(data, d => d.dewPoint)])
.rangeRound([margin.left, width - margin.right])
Insert cell
y = d3
.scaleLinear()
.domain([d3.min(data, d => d.humidity), d3.max(data, d => d.humidity)])
.rangeRound([height - margin.bottom, margin.top])
Insert cell
margin = ({ top: 10, right: 20, bottom: 40, left: 40 })
Insert cell
height = width / 1.5
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