Horizon bar chart

See version 2 for an example with a legend and updateable bands

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

rect,
        line {
            shape-rendering: crispEdges
        }
    </style>
</head>

<body>

<div id="horizon">
        <h2>Horizon bar chart</h2>
    </div>
    <div id="heat">
        <h2>Heat map</h2>
    </div>
    <div id="bar">
        <h2>Bar chart</h2>
    </div>

const height = 80;
        const width = 800;
        const margin = { "top": 10, "bottom": 10, "left": 50, "right": 10, };

//used Draw My Data https://www.robertgrantstats.co.uk/drawmydata.html
        const data = [9.5433, 4.5433, 4.5433, 6.0817, 8.7743, 10.6971, 22.2356, 34.5433, 37.2356, 37.6202, 37.2356, 35.6971, 34.5433, 38.3894, 43.3894, 47.6202, 52.2356, 55.3125, 59.1587, 59.9279, 58.3894, 56.851, 56.0817, 59.5433, 61.851, 64.9279, 67.6202, 69.9279, 69.9279, 68.004, 67.2356, 65.3125, 62.2356, 60.3125, 58.3894, 57.2356, 47.6202, 39.9279, 1.0817, 2.6202, 13.0048, 12.6202, 61.4663, 61.0817, 69.9279, 77.2356, 85.3125, 82.6202, 91.0817, 88.774, 77.6202, 66.0817, 64.5433, 54.5433, 45.3125, 46.4663, 49.9279, 40.6971, 37.6202, 36.0817, 35.3125, 39.5433, 38.774, 57.6202, 50.3125, 16.851, 17.6202, 18.774, 23.774, 58.774, 48.0048, 46.4663, 50.3125];

const barWidth = width / data.length - 1;

const xScale = d3.scaleLinear()
            .domain([0, data.length])
            .range([0, width]);

var yScaleBar = d3.scaleLinear()
            .domain([0, maxY])
            .range([height, 0]);

var colour = d3.scaleLinear()
            //.domain(d3.extent(data, function (d) { return d }))
        		.domain([0,100])
            .range(["yellow", "darkgreen"]);

drawHorizon(data);
        drawHeat(data);
        drawBarchart(data);

function drawHorizon(data) {

let yScale = d3.scaleLinear()
                .domain([0, bandWidth])
                .range([height, 0]);

let yAxis = d3.axisLeft(yScale);

let svg = d3.select("#horizon").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)

let g = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let axisG = g.append("g")
                .call(yAxis)

axisG.selectAll("text")
                .text(function (d) { return "..." + d });

axisG.select(".domain").remove();

let bars = g.selectAll(".bars")
                .data(data)
                .enter()
                .append("g")
                .attr("transform", function (d, i) {
                    return "translate(" + xScale(i) + ",0)";
                })

let backgroundBars = bars.append("rect")
                .attr("width", barWidth)
                .attr("height", height)
                .style("fill", function (d) {
                    
                    return d < bandWidth ? "white" : colour(band(d, bandWidth));
                });

/*var caps = bars.append("line")
                  .attr("x1", 0)
                  .attr("x2", barWidth)
                  .attr("y1", function(d){
              let thisHeight = barHeight(d, bandWidth);
              return yScale(thisHeight);
            })
                  .attr("y2", function(d){
              let thisHeight = barHeight(d, bandWidth);
              return yScale(thisHeight);
            })
                  .style("stroke", "white")*/

};

function drawHeat(data) {

let svg = d3.select("#heat").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)

let g = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

bars.append("rect")
                .attr("width", barWidth)
                .attr("height", height)
                .style("fill", function (d) {
                    return colour(d);
                });
        };

function drawBarchart(data) {

let yScale = d3.scaleLinear()
                .domain([0, maxY])
                .range([height, 0]);

let yAxis = d3.axisLeft(yScale);

let svg = d3.select("#bar").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)

let g = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let axisG = g.append("g")
                .call(yAxis)

axisG.select(".domain").remove();

let bars = g.selectAll(".bars")
                .data(data)
                .enter()
                .append("g")
                .attr("transform", function (d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });

bars.append("rect")
                .attr("x", 0)
                .attr("y", function (d) {
                    return yScale(d);
                })
                .attr("width", barWidth)
                .attr("height", function (d) {
                    return height - yScale(d);
                })
                .style("fill", colour(50));

};

function band(n, bandWidth) {
            return Math.floor(n / bandWidth) * bandWidth;
        };

function barHeight(n, bandWidth) {
            return n - band(n, bandWidth);
        };
    </script>
</body>

https://d3js.org/d3.v4.min.js