JSFiddle - React, Tailwind, and code Playground

by jeffersonswartz

CSS

path {
    fill: none;
    stroke: black;
}

line {
    stroke: black;
}

JavaScript

var data = [1,2,3,20,25];

var lower = d3.scale.linear().domain([0,5]).range([280,180]).clamp(true),
    upper = d3.scale.linear().domain([15,30]).range([160,0]).clamp(true),
    color = d3.scale.category10();

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 300);

svg.selectAll("rect.lower")
   .data(data).enter()
   .append("rect")
   .attr("class", "lower")
   .attr("x", function(d, i) { return 50 + i * 20; })
   .attr("width", 10)
   .attr("y", function(d) { return lower(d); })
   .attr("height", function(d) { return 280 - lower(d); })
   .style("fill", color);


svg.selectAll("rect.upper")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "upper")
   .attr("x", function(d, i) { return 50 + i * 20; })
   .attr("width", 10)
   .attr("y", function(d) { return upper(d); })
   .attr("height", function(d) { return d >= 15 ? 160 - upper(d) : 0; })
   .style("fill", color);

svg.append("g").attr("transform", "translate(40,0)")
   .call(d3.svg.axis().scale(lower).orient("left").ticks(4));

svg.append("g").attr("transform", "translate(40,0)")
   .call(d3.svg.axis().scale(upper).orient("left").ticks(4));