<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>EDAV7_1_axes</title> <script src="https://d3js.org/d3.v7.js"></script> </head> <body> <script> // Create svg and initial bars const w = 400; const h = 300; const margin = {top: 25, right: 0, bottom: 25, left: 25}; const innerWidth = w - margin.left - margin.right; const innerHeight = h - margin.top - margin.bottom; const bardata = [{month: "Jan", value: 300}, {month: "Feb", value: 100}, {month: "Mar", value: 150}, {month: "Apr", value: 220}, {month: "May", value: 70}, {month: "Jun", value: 270}] const xScale = d3.scaleBand() .domain(bardata.map(d => d.month)) .range([0, innerWidth]) .paddingInner(.1); const yScale = d3.scaleLinear() .domain([0, d3.max(bardata.map(d => d.value))]) .range([innerHeight, 0]) const xAxis = d3.axisBottom() .scale(xScale); const yAxis = d3.axisLeft() .scale(yScale); // add svg const svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // add background rectangle svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", w) .attr("height", h) .attr("fill", "aliceblue"); // add bars as a group const bars = svg.append("g") .attr("id", "plot") .attr("transform", `translate (${margin.left}, ${margin.top})`) .selectAll("rect") .data(bardata); bars.enter().append("rect") .attr("x", d => xScale(d.month)) .attr("y", d => yScale(d.value)) .attr("width", xScale.bandwidth()) .attr("height", d => innerHeight - yScale(d.value)) .attr("fill", "lightgreen"); // add axes svg.append("g") .attr("class", "xAxis") .attr("transform", `translate (${margin.left}, ${h - margin.bottom})`) .call(xAxis); svg.append("g") .attr("class", "yAxis") .attr("transform", `translate (${margin.left}, ${margin.top})`) .call(yAxis); </script> </body> </html>