JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>Bar Chart with Negative Values</title>
<body>
    <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
</body>

CSS

.bar.positive {
    fill: steelblue;
}
.bar.negative {
    fill: brown;
}
.axis text {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JavaScript

var data = [-15, -20, -22, -18, 2, 6, -26, -18];

//how to add additional data series?


var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 10
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = Math.max(-d3.min(data), d3.max(data));

var x = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeRoundBands([0, height], .2)
    .nice();

var y = d3.scale.linear()
    .domain([-x0, x0])
    .domain(d3.range(data.length))
    .range([0, width]);

var svg = d3.select("body").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 + ")");

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function (d, i) {
    return d < 0 ? "bar negative" : "bar positive";
})
    .attr("x", function (d, i) {
    return x(Math.min(0, d));
})
    .attr("y", function (d, i) {
    return y(i);
})
    .attr("width", function (d, i) {
    return Math.abs(x(d) - x(0));
})
    .attr("height", y.rangeBand());

svg.append("g")
    .attr("class", "x axis")
    .call(d3.svg.axis().scale(x).orient("top"));

svg.append("g")
    .attr("class", "y axis")
    .append("line")
    .attr("x1", x(0))
    .attr("x2", x(0))
    .attr("y1", 0)
    .attr("y2", height);