{
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();
}