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)');