Built with blockbuilder.org Built on Mike Bostock's block http://blockbuilder.org/mbostock/79a82f4b9bffb69d89ae and updated to version 4.
Last active
November 22, 2017 05:05
Star
You must be signed in to star a gist
bar chart negative values - v4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
border: no | |
height: 900 | |
scrolling: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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