import { select, scaleBand, scaleLinear, max, area } from
'd3'; const svg = select('body').append('svg')
.attr('width', 800) .attr('height', 500); const xScale =
scaleBand() .domain(dataset.map(d => d.month)) .range([0,
800]) .padding(0.4); const yScale = scaleLinear()
.domain([0, max(dataset, d => d.temperature)]) .range([500,
0]); const areaGenerator = area() .x(d => xScale(d.month) +
xScale.bandwidth() / 2) .y0(500) .y1(d =>
yScale(d.temperature)); svg.append('path') .datum(dataset)
.attr('fill', 'steelblue') .attr('d', areaGenerator); // Add
X-axis svg.append('g') .attr('transform',
'translate(0,500)') .call(axisBottom(xScale)); // Add Y-axis
svg.append('g') .call(axisLeft(yScale)); // X-axis label
svg.append('text') .attr('text-anchor', 'end') .attr('x',
800) .attr('y', 490) .text('Month'); // Y-axis label
svg.append('text') .attr('text-anchor', 'end')
.attr('transform', 'rotate(-90)') .attr('y', 20) .attr('x',
-50) .text('Temperature (°C)');