Skip to content

Instantly share code, notes, and snippets.

@stevenwmarks
Last active Nov 22, 2017
Embed
What would you like to do?
bar chart negative values - v4
license: mit
border: no
height: 900
scrolling: yes
indCode indTitle est2014 proj2024 netChange percentChange
11 Agriculture/Forestry/Fishing and Hunting 5188 5262 74 0.014299999475479
21 Mining 547 574 27 0.049400000572205
22 Utilities 5942 5556 -386 -0.065
23 Construction 55867 63236 7369 0.131899995803833
31 Manufacturing 159604 163997 4393 0.0275
42 Wholesale Trade 63098 66016 2918 0.046199998855591
44 Retail Trade 184907 190124 5217 0.028199999332428
48 Transportation and Warehousing 47041 50643 3602 0.076599998474121
51 Information 31989 32011 22 0.007000000029802
52 Finance and Insurance 109211 114180 4969 0.045500001907349
53 Real Estate and Rental and Leasing 19275 21195 1920 0.09960000038147
54 Professional/Scientific and Technical Services 95290 107179 11889 0.124799995422363
55 Management of Companies and Enterprises 31855 33207 1352 0.042399997711182
56 Admin/Support/Waste Mgmt and Remediation Svces 85736 94626 8890 0.103699998855591
61 Educational Services 182673 189762 7089 0.038800001144409
62 Health Care and Social Assistance 282156 313588 31432 0.111400003433228
67 Self Employed and Unpaid Family Workers/All Jobs 165000 176638 11638 0.070500001907349
71 Arts/Entertainment and Recreation 40266 38700 -1566 -0.038900001049042
72 Accommodation and Food Services 123986 131695 7709 0.062199997901917
81 Other Services (except Government) 74810 82578 7768 0.103800001144409
91 Total Federal Government Employment 13725 10914 -2811 -0.204799995422363
92 State Government/Excl. Education and Hospitals 28798 28231 -567 -0.019700000286102
93 Local Government/ Excl. Education and Hospitals 43898 44091 193 0.004399999976158
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment