JSFiddle - React, Tailwind, and code Playground

by theblang

HTML

<div id="display">

CSS

#display {
    width: 20000px;
    height: 500px;
    border: 1px solid black;
    overflow:hidden;
}

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;	/* Gets overriden by D3-assigned height below */
    background-color: teal;
}

JavaScript

var data = [];

for (var i = 0; i < 1000; i++) {
    data.push(Math.random() * 10001);
}

var yscale = d3.scale.linear();
yscale.domain([0, 10000]);
yscale.range([0, 500]);

d3.select("#display").selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("background-color", "red")
    .style("height", function(d) { return Math.round(yscale(d)) + "px"; });