d3: bar chart w/ negative values

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@*" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <svg id="chart"></svg>
  </body>

</html>

document.addEventListener('DOMContentLoaded', () => {
  var render = (selector, size, data) => {
    var margin = size.margin;
    var width = size.width - margin.left - margin.right;
    var height = size.height - margin.top - margin.bottom;
      
    var x = d3.scaleLinear()
      .domain(d3.extent(data, d => d.value))
      .range([0, width]);
    
    var y = d3.scaleBand()
      .domain(data.map(d => d.name))
      .rangeRound([0, height])
      .padding(0.2);
      
    var xAxis = d3.axisBottom(x);
    
    var yAxis = d3.axisLeft(y)
      .tickSize(0);
    
    var svg = d3.select(selector)
      .attr('width', size.width)
      .attr('height', size.height);
      
    var chart = svg.append('g')
      .attr('transform', `translate(${ margin.left }, ${ margin.top })`);
    
    var bar = chart.selectAll('.bar')
      .data(data)
      .enter().append('rect')
        .attr('class', d => `bar ${ d.value < 0 ? 'negative': 'positive' }`)
        .attr('x', d => x(Math.min(0, d.value)))
        .attr('y', d => y(d.name))
        .attr('width', d => Math.abs(x(d.value) - x(0)))
        .attr('height', y.bandwidth());

    chart.append('g')
      .attr('transform', `translate(0, ${ height })`)
      .attr('class', 'axis x')
      .call(xAxis);
      
    chart.append('g')
      .attr('class', 'axis y')
      .attr('transform', `translate(${ x(0) }, 0)`)
      .call(yAxis);
  };
  
  fetch('data.json')
    .then(data => data.json())
    .then(data => {
      var settings = {
        width: 500,
        height: 300,
        margin: {
          top: 20,
          right: 20,
          bottom: 30,
          left: 40
        }
      };
      
      render('#chart', settings, data);
    });
});

#chart {
  background-color: #ddd;
}

rect.positive {
  fill: steelblue;
}

rect.negative {
  fill: darkorange;
}

.axis text {
  font: 10px sans-serif;
  fill: black;
}

.axis.y text {
  text-anchor: end;
}

D3 Bar Chart
============

From the tutorials:

  * [Let's make a bar chart](https://bost.ocks.org/mike/bar/)
  * [Let's make a bar chart, Part II](https://bost.ocks.org/mike/bar/2/)
  * [Let's make a bar chart, Part III](https://bost.ocks.org/mike/bar/3/)
  * [Bar chart with negative values](https://bl.ocks.org/mbostock/2368837)

We are using D3 v4 while the examples are in v3 so there are some API
changes to be aware of

Additional resources
--------------------

  * [D3 tutorials](https://github.com/d3/d3/wiki/Tutorials)

[  
    {  
        "name":"A",
        "value":-15
    },
    {  
        "name":"B",
        "value":-20
    },
    {  
        "name":"C",
        "value":-22
    },
    {  
        "name":"D",
        "value":-18
    },
    {  
        "name":"E",
        "value":2
    },
    {  
        "name":"F",
        "value":6
    },
    {  
        "name":"G",
        "value":26
    },
    {  
        "name":"H",
        "value":18
    }
]