Skip to content

Instantly share code, notes, and snippets.

@stevenwmarks

stevenwmarks/.block

Created February 18, 2018 02:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevenwmarks/e9fdde3668c0ee932f0f738501b6a874 to your computer and use it in GitHub Desktop.
Save stevenwmarks/e9fdde3668c0ee932f0f738501b6a874 to your computer and use it in GitHub Desktop.
Download ZIP
Conn. job outlook
Raw
.block
license: mit
scrolling: yes
height: 650
Raw
ctEmpl.csv
occupation projected2024 netChange percentChange hourly annual
Lawyers 13075 459 0.036 62.46 129926
Elem. School Teachers 17647 256 0.015 0 77030
Family and General Practitioners 1818 124 0.073 90 187200
Waiters and Waitresses 28101 877 0.032 9.59 19936
Secretaries - Admin. Assistants 34336 626 0.019 20.2 42019
Carpenters 16315 1211 0.08 24.9 51785
Bakers 1779 54 0.031 12.99 27029
Butchers and Meat Cutters 832 45 0.057 19.92 41442
Web Developers 2019 409 0.254 32.5 67616
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connecticut Job Outlook</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
width: 910px;
}
#content {
height: 100px;
width: 300px;
margin-bottom: 10px;
float: left;
font-family: sans-serif;
font-size: 10pt;
}
#projected {
font-weight: bold;
color: rgb(31,119,180);
}
#net {
font-weight: bold;
color: rgb(255,127,14);
}
#percent {
font-weight: bold;
color: rgb(44,160,44);
}
#wages {
font-weight: bold;
color: rgb(214,39,40);
}
#hede {
height: 65px;
width: 595px;
padding-left: 10px;
float: left;
font-family: sans-serif;
font-size: 28pt;
}
.button {
height: 35px;
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
float: left;
border: 1px solid gray;
font-family: sans-serif;
font-size: 10pt;
text-align: center;
}
#first {
background: radial-gradient(rgba(31,119,180,0),rgba(31,119,180,1));
}
#first:hover {
background: radial-gradient(rgba(31,31,31,0),rgba(31,31,31,1));
cursor: pointer;
}
#second {
background: radial-gradient(rgba(255,127,14,0),rgba(255,127,14,1));
}
#second:hover {
background: radial-gradient(rgba(255,127,14,0),rgba(31,31,31,1));
cursor: pointer;
}
#third {
background: radial-gradient(rgba(44,160,44,0),rgba(44,160,44,1));
}
#third:hover {
background: radial-gradient(rgba(44,160,44,0),rgba(31,31,31,1));
cursor: pointer;
}
#fourth {
background: radial-gradient(rgba(214,39,40,0),rgba(214,39,40,1));
}
#fourth:hover {
background: radial-gradient(rgba(214,39,40,0),rgba(31,31,31,1));
cursor: pointer;
}
#dataSource {
font-family: sans-serif;
font-size: 60%;
margin-left: 30px;
float: right;
}
</style>
</head>
<body>
<div id="content"><span id="projected">Projected employment</span> tells you how many jobs are expected in this
occupation in 2024. <span id="net">Net change</span> is the amount of the increase in this occupation
from the base year of 2014 to 2024. <span id="percent">Percent change</span> is the percent increase from
the base year to 2024. And <span id="wages">annual wages</span> are the wages as of the first quarter of 2016.</div>
<div id="hede">Statewide job projections for 2024</div>
<div class="button" id="first" style="line-height: 17.5px;">Projected Employment</div>
<div class="button" id="second" style="line-height: 35px;">Net Change</div>
<div class="button" id="third" style="line-height: 35px;">Percent Change</div>
<div class="button" id="fourth" style="line-height: 35px;">Annual Wages</div>
<div id="dataSource">Data Source: Conn. Dept. of Labor</div>
<script type="text/javascript">
function firstChart() {
// width, height, margins and padding
var margin = {top: 20, right: 20, bottom: 20, left: 160},
padding = {top: 20, right: 20, bottom: 20, left: 20},
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// row converter
var rowConverter = function(d) {
return {
occupation: d.occupation,
projected2024: parseInt(d.projected2024),
netChange: parseInt(d.netChange),
percentChange: parseFloat(d.percentChange),
hourly: parseFloat(d.hourly),
annual: parseInt(d.annual)
};
};
// load data
d3.csv("ctEmpl.csv", rowConverter, function(error, data) {
console.log(data);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// scales
var xScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.projected2024; })])
.range([0, width]);
var yScale = d3.scaleBand()
.domain(data.map( function(d) { return d.occupation; }))
.range([0, height])
.paddingInner(0.1);
// X axis
var xAxis = d3.axisBottom()
.scale(xScale);
var formatAsNumeral = d3.format(",.0f");
// Y axis
var yAxis = d3.axisLeft()
.scale(yScale);
// create bars
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("fill", "rgb(31,119,180)")
.attr("x", margin.left)
.attr("y", function(d) { return yScale(d.occupation); })
.attr("width", function(d) { return xScale(d.projected2024); })
.attr("height", yScale.bandwidth());
// create X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.left + "," + height + ")")
.call(xAxis.tickFormat(formatAsNumeral));
// create Y axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis);
// chart for net change
d3.select("#second")
.on("click", function() {
var formatAsNumeral = d3.format(",.0f");
xScale.domain([0, d3.max(data, function(d) { return d.netChange; })]);
svg.selectAll("rect")
.transition()
.duration(1000)
.attr("width", function(d) { return xScale(d.netChange); })
.attr("fill", "rgb(255,127,14)");
// update X axis
svg.select(".x.axis")
.transition()
.duration(250)
.call(xAxis.tickFormat(formatAsNumeral));
});
// chart for percent change
d3.select("#third")
.on("click", function() {
var formatAsPercentage = d3.format(".0%");
xScale.domain([0, d3.max(data, function(d) { return d.percentChange; })]);
svg.selectAll("rect")
.transition()
.duration(1000)
.attr("width", function(d) { return xScale(d.percentChange); })
.attr("fill", "rgb(44,160,44)");
// update X axis
svg.select(".x.axis")
.transition()
.duration(250)
.call(xAxis.tickFormat(formatAsPercentage));
});
// chart for annual
d3.selectAll("#fourth")
.on("click", function() {
var formatAsCurrency = d3.format("$,.0f");
xScale.domain([0, d3.max(data, function(d) { return d.annual; })]);
svg.selectAll("rect")
.transition()
.duration(1000)
.attr("width", function(d) { return xScale(d.annual); })
.attr("fill", "rgb(214,39,40)");
// update X axis
svg.select(".x.axis")
.transition()
.duration(250)
.call(xAxis.tickFormat(formatAsCurrency));
// .call(xAxis);
});
// recall first chart
d3.select("#first")
.on("click", function() {
var formatAsNumeral = d3.format(",.0f");
xScale.domain([0, d3.max(data, function(d) { return d.projected2024; })]);
svg.selectAll("rect")
.transition()
.duration(1000)
.attr("width", function(d) { return xScale(d.projected2024); })
.attr("fill", "rgb(31,119,180)");
// update X axis
svg.select(".x.axis")
.transition()
.duration(250)
.call(xAxis.tickFormat(formatAsNumeral));
});
}); // end of load data
}; // end of firstChart
firstChart();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment