// Import D3 library import * as d3 from "d3"; // Load your
CSV file (you'll upload it next)
d3.csv("city_temperature.csv").then(data => { // Set up
chart size const width = 800; const height = 500; const
margin = { top: 50, right: 30, bottom: 60, left: 70 }; //
Create the SVG canvas const svg = d3.select("body")
.append("svg") .attr("width", width) .attr("height",
height); // Define X and Y scales const x = d3.scaleBand()
.domain(data.map(d => d.City)) .range([margin.left, width -
margin.right]) .padding(0.2); const y = d3.scaleLinear()
.domain([0, d3.max(data, d => +d.AvgTemperature)]) .nice()
.range([height - margin.bottom, margin.top]); // Draw bars
svg.selectAll("rect") .data(data) .join("rect") .attr("x", d
=> x(d.City)) .attr("y", d => y(+d.AvgTemperature))
.attr("width", x.bandwidth()) .attr("height", d => y(0) -
y(+d.AvgTemperature)) .attr("fill", "steelblue"); // Add X
axis svg.append("g") .attr("transform",
`translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickValues(x.domain().filter((d, i)
=> !(i % 10)))); // Add Y axis svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y)); // Add chart title svg.append("text")
.attr("x", width / 2) .attr("y", 30) .attr("text-anchor",
"middle") .attr("font-size", "16px") .text("Average
Temperature by City"); });