https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248
let margin = { top: 20, right: 42, bottom: 30, left: 42 } let width = 450 - margin.left - margin.right let height = 400 - margin.top - margin.bottom //let dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160] //let dataset = [1, 2, 3, 4, 5] let data = [ { label: "n1", value: 80 }, { label: "n2", value: 100 }, { label: "n3", value: 56 }, { label: "n4", value: 120 }, { label: "n5", value: 180 }, { label: "n6", value: 30 }, { label: "n7", value: 40 }, { label: "n8", value: 120 }, { label: "n9", value: 160 } ] let svg = d3 .select("#my-chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") //let xScale = d3 // .scaleLinear() // .domain([1, dataset.length + 1]) // .range([0, width]) // https://observablehq.com/@d3/d3-scaleband let xScale = d3 .scaleBand() .domain(data.map((s) => s.label )) .range([0, width]) //.padding(2) //.paddingInner(1.2) //.paddingOuter(1.2) //.align(1) let yScale = d3 .scaleLinear() .domain([0, 200 /* d3.max(dataset) */]) .range([height, 0]) let barPadding = 5 let barWidth = (width / data.length) let xAxis = d3.axisBottom(xScale) let yAxis = d3.axisLeft(yScale) .tickSize(-width) .tickFormat(null) svg .append('g') .call(yAxis) svg .selectAll("rect") .data(data) .enter() .append("rect") .attr("y", (d) => { return yScale(d.value) }) .attr("height", (d) => { return height - yScale(d.value) }) .attr("width", barWidth - barPadding * 2) .attr("transform", (d, i) => { let translate = [barWidth * i + barPadding, 0] return "translate("+ translate +")" }) //.attr("fill", "#fe7a42") //.transition() //.duration(5000) .attr("fill", "#007000") .on("mouseover",function () { d3.select(this) .transition() .duration(500) .attr("fill", "#fe7a42") }) .on("mouseout",function () { d3.select(this) .transition() .duration(500) .attr("fill", "#007000") }) svg .selectAll("text") .data(data) .enter() .append("text") .text((d) => { return d.value }) .attr("y", (d, i) => { return yScale(d.value) }) .attr("x", (d, i) => { return barWidth * i + barPadding }) .attr("fill", "#0a0a0a") .attr("dy", "-.25em") .attr("dx", ".25em") svg .append('g') .attr("transform", "translate(0," + height + ")") .call(xAxis) //.selectAll("text") //.style("text-anchor", "end") //.attr("dx", "-.8em") //.attr("dy", "-.55em") //.attr("transform", "rotate(-48)" ) svg.append('text') .attr('x', 1) .attr('y', 1) .attr('transform', 'rotate(-90)') //.attr('text-anchor', 'middle') //.attr('text-anchor', 'end') .attr("dy", "-1em") .attr("dx", "-5em") .text('Level, m')