D3 Examples - bar chart negative values

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CT Employment Growth by Industry</title>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    <style>
    
    h2 {
        font-style: italic;
        text-decoration: underline;
    }
    
    .bar--positive {
        fill: black;
    }
​
    .bar--negative {
        fill: brown;
    }
​
    .axis text {
        font: 12px sans-serif;
    }
​
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    
    div.tooltip {
                position: absolute;
                text-align: right;
                width: 140px;
                height: 40px;
                padding: 6px;
                font: 12px sans-serif;
                background: white;
                border: 1px solid lightgray;
                border-radius: 8px;
                pointer-events: none;
        }
        
    #content {
        width: 500px;
        padding-left: 50px;
        font: 14px sans-serif;
        font-weight: bold;
        line-height: 1.5em;
    }
​
    </style>
</head>
<body>
    <div id="container">
    <h2>Projections for 2024</h2>
    <h1>Statewide Gains (and Losses) by Industry Group for Connecticut</h1>
    <script type="text/javascript">
    // width, height, margins and padding
    var margin = {top: 20, right: 30, bottom: 40, left: 30},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    // scales
    var xScale = d3.scaleLinear()
        .range([0, width]);
        
    var yScale = d3.scaleBand()
        .rangeRound([0, height])
        .paddingInner(0.1);
        
    var div = d3.select("#container").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
        
    // load data
    d3.csv("ctEmpl2.csv", type, function(error, data) { 
        
        console.log(data);
        
        // domains
//      xScale.domain([-.23, .18]); // approximates values in csv
        xScale.domain(d3.extent(data, function(d) { return d.percentChange; })).nice();
        yScale.domain(data.map(function(d) { return d.indTitle; }));
        
        // define X axis
        var formatAsPercentage = d3.format("1.0%");
​
        var xAxis = d3.axisBottom()
                              .scale(xScale)
                              .tickFormat(formatAsPercentage);
                                
        // create svg
        var svg = d3.select("#container")
            .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 + ")");
        
        // format tooltip
        var thsndFormat = d3.format(",");
        
        // create  bars
        svg.selectAll(".bar")
            .data(data)
            .enter()
            .append("rect")
                .attr("class", function(d) { return "bar bar--" + (d.percentChange < 0 ? "negative" : "positive"); })
                .attr("x", function(d) { return xScale(Math.min(0, d.percentChange)); })
                .attr("y", function(d) { return yScale(d.indTitle); })
                .attr("width", function(d) { return Math.abs(xScale(d.percentChange) - xScale(0)); })
                .attr("height", yScale.bandwidth())
            // tooltip
            .on("mouseover", function(d) {
                div.transition()
                 .duration(200)
         .style("opacity", 1.0);
                div.html("2014 estimate:   " + thsndFormat(d.est2014) + "<br/>" + "2024 projected:   " 
                        + thsndFormat(d.proj2024) + "<br/>" + "Net change:   " + thsndFormat(d.netChange))
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {
        div.transition()
                    .duration(500)
                    .style("opacity", 0);
      });
             
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")  
            .call(xAxis);                    
            
        // add tickNegative
        var tickNeg = svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + xScale(0) + ",0)")
                .call(d3.axisLeft(yScale))
            .selectAll(".tick")
            .filter(function(d, i) { return data[i].percentChange < 0; });
​
        tickNeg.select("line")
            .attr("x2", 6);
            
        tickNeg.select("text")
            .attr("x", 9)
            .style("text-anchor", "start");     
        
        });
        
function type(d) {
  d.percentChange = +d.percentChange;
  return d;
}
​
​
    </script>
    </div>
    <div id="content">
        <p>Want to know which industries will show the most growth in
        Connecticut by 2024? If you're a proponent of limited growth, you will
        be happy to see that the federal government will shrink by over 20%. And
        don't despair if you are in the mining industry; it will grow by about 5%.
        Where are the mines in Connecticut? I wondered, too. It turns out that 
        there are quite a few crushed stone and construction sand and gravel 
        operations. Lastly, it looks like you should stay out of
        state government, arts and entertainment, and utilities.</p>
    </div>
</body>
</html>
​
    