bar chart negative values - v4

Built with blockbuilder.org Built on Mike Bostock's block http://blockbuilder.org/mbostock/79a82f4b9bffb69d89ae and updated to version 4.

<!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%");

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>

https://d3js.org/d3.v4.min.js