// 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"); });