JSFiddle - React, Tailwind, and code Playground

by bhatuj

CSS

#multipleContracts {
  font-family: sans-serif;
  background: #fff;
}

.bar2 {
    fill: brown; 
}

.bar{
    fill: steelblue;
}

#yAxis path, .axis path {
  fill: none;
  stroke: #777;
  shape-rendering: crispEdges;
}

#yAxis path, .axis text {
  font-size: 11px;
  opacity: 0.5;
}

#yAxis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

#yAxis g.tick line, #xAxis g.tick line, #threshold {
  stroke: #777;
}

JavaScript

data = [{
    name: "25",
    value: 25,
    value2: -27
}, {
    name: "50",
    value: 50,
    value2: -56
}, {
    name: "7",
    value: 100,
    value2: -110
}, {
    name: "D",
    value: 150,
    value2: -156
}, {
    name: "E",
    value: 200,
    value2: -210
}]

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 20
},

width  = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

// set up xscale
	var x = d3.scale.linear()
    .range([0, width])

	 x.domain([d3.min(data, function(d){ return d.value2; }), 	d3.max(data, function(d){ return d.value; })]);    

    
// set  up y scale
  var y = d3.scale.ordinal()
						.rangeRoundBands([0, height], .1);
          
	/*var y = d3.scaleBand()
    .rangeRound([0, height])
    .padding(0.1);*/

  y.domain(data.map(function (d) {
    return d.name;
}));  

var svg = d3.select("body").append("svg")
    .attr("id","multipleContracts")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



// positive bars
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {
    return x(Math.min(0, d.value));
})
    .attr("y", function (d) {
    return y(d.name);
})
    .attr("width", function (d) {
    return Math.abs(x(d.value) - x(0));
})
    .attr("height", 15);

// negetive bars

svg.selectAll(".bar2")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar2")
    .attr("x", function (d) {
    return x(Math.min(0, d.value2));
})
    .attr("y", function (d) {
    return y(d.name);
})
    .attr("width", function (d) {
    return Math.abs(x(-d.value2) - x(0));
})
    .attr("height", 15);

// add and position xaxis

	 var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(x);
            
   var yAxis = d3.svg.axis()
           ...