wiki.unix7.org

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