Skip to content

Instantly share code, notes, and snippets.

@emagee

emagee/SeriesReport-combined-averageFirstLine-transposed.csv

Created December 22, 2016 22:41
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 emagee/e1fa13f6416af98aecd08296019acbb7 to your computer and use it in GitHub Desktop.
Save emagee/e1fa13f6416af98aecd08296019acbb7 to your computer and use it in GitHub Desktop.
Download ZIP
Multiseries Line Chart: US Unemployment by Occupation and/or Industry
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>US UNEMPLOYMENT 2000 - 2015</title>
<!-- <link rel="stylesheet" type="text/css" href="css/styles.css"> -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
/*
Created on : November 1, 2016, 4:25:47 PM
Author : marciagray
*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define visible focus styles!
:focus {
outline: ?????;
} */
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* MARCIA'S CSS BEGINS HERE */
body {
font-size: 14px;
font-family: Raleway, Helvetica, Futura, Arial, Verdana, sans-serif;
/* background-color: #7ABDFF; */
background-color: #ffeecc;
padding: 16px 30px 24px 30px;
box-sizing: border-box;
}
div#introduction {
/*border-top: 1px dotted black;
border-bottom: 1px dotted black;*/
margin-bottom: 12px;
padding: 6px 0 6px 0;
}
div#user_selects {
margin: 12px 12px 12px 0;
padding: 12px 0 12px 0;
width: auto;
display: inline block;
float:left;
font-weight:bold;
}
/*div#user_selects_occupation {
border-bottom: 1px dotted black;
margin: 12px 12px 12px 0;
padding: 6px 0 12px 0;
width: auto;
display: inline block;
float:left;
}
div#user_selects_industry {
margin: 12px 12px 12px 0;
padding: 6px 0 12px 0;
width: auto;
display: inline block;
float:left;
}
*/
div#stage {
margin: 12px 0 12px 6px;
padding: 6px 0 12px 0;
height: auto;
display: inline block;
width: auto;
background-color: #ffffff;
border-radius: 25px;
border: 1px solid #ffcc66;
float:left;
}
svg {
/*border: 1px dotted teal;*/
}
input[type=button]
{
background-color: #663d00;
font-size: 13px !important;
border-radius: 5px;
border: 2px solid #ffe6b3;
color: #ffebcc;
font-weight: bold;
padding: 6px;
}
input[type=button]:hover
{
background-color: #fff5e6;
color: #4d2e00;
font-weight: bold;
border: 2px solid #ffe6b3;
}
input[type=button]:active
{
background-color: black;
color: #fff;
font-weight: bold;
border: 2px solid #ffe6b3;
}
input[type=button]:focus
{
outline:none;
}
ul li {
margin-top: 1px;
}
footer {
color:#ffeecc;
background-color: #e69900;
margin-top: 5px;
padding: 10px 18px 8px 18px;
font-size: 1em;
border-radius: 8px;
clear: both;
}
footer a {
text-decoration: none;
color: inherit;
}
h1 {
font-weight: bold;
font-size: 2.7em;
margin-bottom: 0.5em;
color: #805500;
}
h2 {
font-weight: bold;
font-size: 1.5em;
margin-bottom: 0.5em;
}
p {
margin-top: 0.75em;
}
p:first-of-type {
margin-top: 0em;
}
p.category_head {
font-weight: bold;
font-size: 1.35em;
margin-bottom: 0.25em;
}
span.bold {
font-weight: bold;
font-size: larger;
}
span.bigger {
font-size: larger;
}
.red {
color: red;
}
input.red {
color: red;
}
.axis line,
.axis path {
fill: none;
stroke: #805500;
stroke-width: 1;
}
.labels {
font-size: 14px;
fill: #805500;
font-weight: bold;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
line {
stroke: black;
stroke-linecap: butt;
}
g.tick text {
fill: #996600;
font-size: 12px;
}
/* via arnicas */
.highlight {
fill: none;
stroke: red;
stroke-width: 6px;
}
/* text.linelabel, text.hidden and text.bolder via arnincas */
text.linelabel {
font-size: 9pt;
}
text.hidden {
display: none;
}
text.bolder {
font-size: 14pt;
font-family: 'Open Sans Condensed', sans-serif;
}
/* #focused via arnincas */
#focused {
stroke: black;
stroke-width: 8px;
stroke-opacity: 100%;
}
text.xLabel, text.yLabel {
font-size: 0.75em;
font-family: 'Raleway', sans-serif;
fill: #805500;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.4;
stroke-dasharray:1,5;
}
.grid path {
stroke-width: 0
}
.title {
font-family: 'Raleway', sans-serif;
font-weight: 600;
fill: #805500;
}
</style>
<script src="https://d3js.org/d3.v4.js"></script>
<!-- <script type="text/javascript" src="js/d3.min.js"></script> -->
<!-- <script type="text/javascript" src="js/charts.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
// "all_occupations" covers all industries, too (same numbers)
$(document).ready(function(){
var occupation_series = {
all_occupations:true,
management_professional:true,
management_business:true,
professional:true,
service:true,
sales_and_office:true,
sales_and_related:true,
office:true,
natural_resources:true,
farming:true,
construction:true,
installation:true,
production_plus:true,
production:true,
transportation:true,
nonagriculture_ind:false,
mining_ind:false,
construction_ind:false,
manufacturing_ind:false,
durable_ind:false,
nondurable_ind:false,
trade_ind:false,
transportation_ind:false,
information_ind:false,
financial_ind:false,
professional_ind:false,
education_ind:false,
leisure_ind:false,
other_services_ind:false,
agricultural_ind:false,
all_wage_ind:false,
all_nonwage_ind:false
};
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
//draw_multiseries_by_industry(industry_series);
$("input[type=checkbox][name=occupationSeries][value=all_occupations]").change(function() {
if(this.checked){
occupation_series.all_occupations = true;
} else {
occupation_series.all_occupations = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
//**************************************************************************
// CODE FOR OCCUPATION CHECKBOXES
//**************************************************************************
$("input[type=checkbox][name=occupationSeries][value=management_professional]").change(function() {
if(this.checked){
occupation_series.management_professional = true;
} else {
occupation_series.management_professional = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=management_business]").change(function() {
if(this.checked){
occupation_series.management_business = true;
} else {
occupation_series.management_business = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=professional]").change(function() {
if(this.checked){
occupation_series.professional = true;
} else {
occupation_series.professional = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=service]").change(function() {
if(this.checked){
occupation_series.service = true;
} else {
occupation_series.service = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=sales_and_office]").change(function() {
if(this.checked){
occupation_series.sales_and_office = true;
} else {
occupation_series.sales_and_office = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=sales_and_related]").change(function() {
if(this.checked){
occupation_series.sales_and_related = true;
} else {
occupation_series.sales_and_related = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=office]").change(function() {
if(this.checked){
occupation_series.office = true;
} else {
occupation_series.office = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=natural_resources]").change(function() {
if(this.checked){
occupation_series.natural_resources = true;
} else {
occupation_series.natural_resources = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=farming]").change(function() {
if(this.checked){
occupation_series.farming = true;
} else {
occupation_series.farming = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=construction]").change(function() {
if(this.checked){
occupation_series.construction = true;
} else {
occupation_series.construction = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=installation]").change(function() {
if(this.checked){
occupation_series.installation = true;
} else {
occupation_series.installation = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=production_plus]").change(function() {
if(this.checked){
occupation_series.production_plus = true;
} else {
occupation_series.production_plus = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=production]").change(function() {
if(this.checked){
occupation_series.production = true;
} else {
occupation_series.production = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=occupationSeries][value=transportation]").change(function() {
if(this.checked){
occupation_series.transportation = true;
} else {
occupation_series.transportation = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=button][name=checkall_occupations]").click(function(){
if(this.value == "Check all occupations"){
occupation_series.management_professional = true;
occupation_series.management_business = true;
occupation_series.professional = true;
occupation_series.service = true;
occupation_series.sales_and_office = true;
occupation_series.sales_and_related = true;
occupation_series.office = true;
occupation_series.natural_resources = true;
occupation_series.farming = true;
occupation_series.construction = true;
occupation_series.installation = true;
occupation_series.production_plus = true;
occupation_series.production = true;
occupation_series.transportation = true;
$("input[type=checkbox][name=occupationSeries][value=management_professional]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=management_business]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=professional]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=service]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=sales_and_office]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=sales_and_related]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=office]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=natural_resources]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=farming]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=construction]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=installation]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=production_plus]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=production]").prop("checked", true);
$("input[type=checkbox][name=occupationSeries][value=transportation]").prop("checked", true);
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
this.value = "Uncheck all occupations";
}else{
occupation_series.management_professional = false;
occupation_series.management_business = false;
occupation_series.professional = false;
occupation_series.service = false;
occupation_series.sales_and_office = false;
occupation_series.sales_and_related = false;
occupation_series.office = false;
occupation_series.natural_resources = false;
occupation_series.farming = false;
occupation_series.construction = false;
occupation_series.installation = false;
occupation_series.production_plus = false;
occupation_series.production = false;
occupation_series.transportation = false;
$("input[type=checkbox][name=occupationSeries][value=management_professional]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=management_business]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=professional]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=service]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=sales_and_office]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=sales_and_related]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=office]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=natural_resources]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=farming]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=construction]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=installation]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=production_plus]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=production]").prop("checked", false);
$("input[type=checkbox][name=occupationSeries][value=transportation]").prop("checked", false);
d3.select("#stage").select("svg").remove();
draw_multiseries_by_occupation(occupation_series);
this.value = "Check all occupations";
}
});
//**************************************************************************
// CODE FOR INDUSTRY CHECKBOXES
//**************************************************************************
$("input[type=checkbox][name=industrySeries][value=nonagriculture]").change(function() {
if(this.checked){
occupation_series.nonagriculture_ind = true;
} else {
occupation_series.nonagriculture_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=mining]").change(function() {
if(this.checked){
occupation_series.mining_ind = true;
} else {
occupation_series.mining_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=construction]").change(function() {
if(this.checked){
occupation_series.construction_ind = true;
} else {
occupation_series.construction_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=manufacturing]").change(function() {
if(this.checked){
occupation_series.manufacturing_ind = true;
} else {
occupation_series.manufacturing_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=durable]").change(function() {
if(this.checked){
occupation_series.durable_ind = true;
} else {
occupation_series.durable_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=nondurable]").change(function() {
if(this.checked){
occupation_series.nondurable_ind = true;
} else {
occupation_series.nondurable_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=trade]").change(function() {
if(this.checked){
occupation_series.trade_ind = true;
} else {
occupation_series.trade_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=transportation]").change(function() {
if(this.checked){
occupation_series.transportation_ind = true;
} else {
occupation_series.transportation_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=information]").change(function() {
if(this.checked){
occupation_series.information_ind = true;
} else {
occupation_series.information_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=financial]").change(function() {
if(this.checked){
occupation_series.financial_ind = true;
} else {
occupation_series.financial_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=professional]").change(function() {
if(this.checked){
occupation_series.professional_ind = true;
} else {
occupation_series.professional_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=education]").change(function() {
if(this.checked){
occupation_series.education_ind = true;
} else {
occupation_series.education_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=leisure]").change(function() {
if(this.checked){
occupation_series.leisure_ind = true;
} else {
occupation_series.leisure_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=other_services]").change(function() {
if(this.checked){
occupation_series.other_services_ind = true;
} else {
occupation_series.other_services_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=agricultural]").change(function() {
if(this.checked){
occupation_series.agricultural_ind = true;
} else {
occupation_series.agricultural_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=all_wage]").change(function() {
if(this.checked){
occupation_series.all_wage_ind = true;
} else {
occupation_series.all_wage_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=checkbox][name=industrySeries][value=all_nonwage]").change(function() {
if(this.checked){
occupation_series.all_nonwage_ind = true;
} else {
occupation_series.all_nonwage_ind = false;
}
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
});
$("input[type=button][name=checkall_industries]").click(function(){
if(this.value == "Check all industries"){
// occupation_series.all_industries = true;
occupation_series.nonagriculture_ind = true;
occupation_series.mining_ind = true;
occupation_series.construction_ind = true;
occupation_series.manufacturing_ind = true;
occupation_series.durable_ind = true;
occupation_series.nondurable_ind = true;
occupation_series.trade_ind = true;
occupation_series.transportation_ind = true;
occupation_series.information_ind = true;
occupation_series.financial_ind = true;
occupation_series.professional_ind = true;
occupation_series.education_ind = true;
occupation_series.leisure_ind = true;
occupation_series.other_services_ind = true;
occupation_series.agricultural_ind = true;
occupation_series.all_wage_ind = true;
occupation_series.all_nonwage_ind = true;
$("input[type=checkbox][name=industrySeries][value=nonagriculture]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=mining]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=construction]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=manufacturing]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=durable]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=nondurable]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=trade]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=transportation]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=information]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=financial]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=professional]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=education]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=leisure]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=other_services]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=agricultural]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=all_wage]").prop("checked", true);
$("input[type=checkbox][name=industrySeries][value=all_nonwage]").prop("checked", true);
d3.select("#stage").selectAll("svg").remove();
draw_multiseries_by_occupation(occupation_series);
this.value = "Uncheck all industries";
}else{
occupation_series.nonagriculture_ind = false;
occupation_series.mining_ind = false;
occupation_series.construction_ind = false;
occupation_series.manufacturing_ind = false;
occupation_series.durable_ind = false;
occupation_series.nondurable_ind = false;
occupation_series.trade_ind = false;
occupation_series.transportation_ind = false;
occupation_series.information_ind = false;
occupation_series.financial_ind = false;
occupation_series.professional_ind = false;
occupation_series.education_ind = false;
occupation_series.leisure_ind = false;
occupation_series.other_services_ind = false;
occupation_series.agricultural_ind = false;
occupation_series.all_wage_ind = false;
occupation_series.all_nonwage_ind = false;
$("input[type=checkbox][name=industrySeries][value=nonagriculture]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=mining]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=construction]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=manufacturing]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=durable]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=nondurable]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=trade]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=transportation]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=information]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=financial]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=professional]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=education]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=leisure]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=other_services]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=agricultural]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=all_wage]").prop("checked", false);
$("input[type=checkbox][name=industrySeries][value=all_nonwage]").prop("checked", false);
d3.select("#stage").select("svg").remove();
draw_multiseries_by_occupation(occupation_series);
this.value = "Check all industries";
}
});
});
/* Much of this code is adapted from examples
* in "Creating Web Charts with D3" by Fabio Nelli
*/
/* I realize there is a lot of repetitive code here that
* could have been rewritten as a function or two.
*/
function draw_multiseries_by_occupation(series) {
var occupationData = d3.csv("SeriesReport-combined-averageFirstLine-transposed.csv", function(error, data) {
data.forEach(function(d) {
d.year = parseDate(d.year);
d.rate = +d.rate;
} );
var x = d3.scaleTime().range([0,w]);
var y = d3.scaleLinear().range([h,0]);
var occupation_color = d3.scaleOrdinal(d3.schemeCategory10);
occupation_color.domain(d3.keys(data[0]).filter(function(key) {
return key !== "year";
}));
var occupations =
occupation_color.domain()
.map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {year: d.year,
rate: +d[name]};
})
};
});
var rate_max = d3.max(data, function(d) {return d.rate;});
x.domain(d3.extent(data, function(d) {return d.year}));
y.domain([0,
d3.max(occupations, function(c) {
return d3.max(c.values, function(v) {
return v.rate;}) }
)]);
if (typeof series === 'number') {
if (series < 32) {
occupations = [occupations[series]];
}
}
else if(typeof series === 'object'){
var tmp=[];
if (series.all_nonwage_ind)
tmp.push(occupations[31]);
if (series.all_wage_ind)
tmp.push(occupations[30]);
if (series.agricultural_ind)
tmp.push(occupations[29]);
if (series.other_services_ind)
tmp.push(occupations[28]);
if (series.leisure_ind)
tmp.push(occupations[27]);
if (series.education_ind)
tmp.push(occupations[26]);
if (series.professional_ind)
tmp.push(occupations[25]);
if (series.financial_ind)
tmp.push(occupations[24]);
if (series.information_ind)
tmp.push(occupations[23]);
if (series.transportation_ind)
tmp.push(occupations[22]);
if (series.trade_ind)
tmp.push(occupations[21]);
if (series.nondurable_ind)
tmp.push(occupations[20]);
if (series.durable_ind)
tmp.push(occupations[19]);
if (series.manufacturing_ind)
tmp.push(occupations[18]);
if (series.construction_ind)
tmp.push(occupations[17]);
if (series.mining_ind)
tmp.push(occupations[16]);
if (series.nonagriculture_ind)
tmp.push(occupations[15]);
if (series.transportation)
tmp.push(occupations[14]);
if (series.production)
tmp.push(occupations[13]);
if (series.production_plus)
tmp.push(occupations[12]);
if (series.installation)
tmp.push(occupations[11]);
if (series.construction)
tmp.push(occupations[10]);
if (series.farming)
tmp.push(occupations[9]);
if (series.natural_resources)
tmp.push(occupations[8]);
if (series.office)
tmp.push(occupations[7]);
if (series.sales_and_related)
tmp.push(occupations[6]);
if (series.sales_and_office)
tmp.push(occupations[5]);
if (series.service)
tmp.push(occupations[4]);
if (series.professional)
tmp.push(occupations[3]);
if (series.management_business)
tmp.push(occupations[2]);
if (series.management_professional)
tmp.push(occupations[1]);
//"all_occupations" covers all industries, too
if (series.all_occupations)
tmp.push(occupations[0]);
occupations = tmp;
console.log("occupations from tmp is " + occupations);
}
x_ticks = 15;
y_ticks = 8;
// now for the axes:
var xAxis = d3.axisBottom(x)
.tickArguments([x_ticks]);
var yAxis = d3.axisLeft(y)
.tickArguments([y_ticks]);
// set up the x and y grids (grid lines drawn first so they're behind the chart lines)
var xGrid = d3.axisBottom(x)
.tickArguments([x_ticks])
.tickSize(-h,0,0)
.tickFormat("");
var yGrid = d3.axisLeft(y)
.tickArguments([y_ticks])
.tickSize(-w,0,0)
.tickFormat("");
// creating the svg that will contain the chart and its axes
// also creating the group that will hold the elements of the chart together
var svg = d3.select("#stage")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + h + ")")
.call(xGrid);
svg.append("g")
.attr("class", "grid")
.call(yGrid);
// determine values for the line
var line = d3.line()
.curve(d3.curveCardinal)
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.rate); });
var occupation = svg.selectAll(".occupation")
.data(occupations)
.enter()
.append("g")
.attr("class", "occupation")
.style("cursor","pointer")
// attempting line hovers via arnicas
.on("mouseover", mouseoverFunc) // putting these on the g nodes gets us a lot!
.on("mouseout", mouseoutFunc);
occupation.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);})
.style("stroke-linecap", "round")
.style("stroke-width", function(d) {
if(d.name=="US average") {
return "8";}
})
.style("stroke", function(d) {
if(d.name=="US average") {
return "red";}
else {
return occupation_color(d.name); } });
/// attempting labels for each line
/// based on code from Lynn Cherney's dataviz class (http://arnicas.github.io/interactive-vis-course/)
var line_title = occupation.append("text");
line_title.style("fill", function(d) {
if(d.name=="US average") {
return "red";}
else {
return occupation_color(d.name); } });
line_title.datum(function(d) {
// this datum move is to access the data at the last data
// point and make it easier to refer to below.
return {occupation: d.name, value: d.values[d.values.length - 1]};
})
.attr("transform", function(d) {
// error on some with no d.value
if (d.value) {
console.log("x translate value is " + x(parseDate(d.year)) );
console.log("y translate value is " + y(+d.value.rate) );
return "translate(" + 685 + "," + y(+d.value.rate) + ")";
}
else {
return null;
}
})
.attr("x", 3)
.attr("dy", 3)
.text(function(d) {
console.log(d.occupation);
return d.occupation;
})
.classed("hidden", true) // basic formatting of labels;
/////////
// add tool tips to each line
occupation.append("title")
.attr("class", "tooltip")
.text(function(d) {
return d.name;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// add labels
var labels = svg.append("g")
.attr("class", "labels");
labels.append("text")
.attr("transform", "translate(0, " + h + ")")
.attr("x", (w-margin.right))
.attr("dy", "3.3em")
.style("text-anchor", "end")
.text("Year");
labels.append("text")
.attr("transform", "rotate(-90)")
.attr("x", margin.left)
.attr("y", "-40")
.attr("dy", ".71em")
.attr("dx", "-25.71em")
.style("text-anchor", "middle")
.text("Rate");
var title = svg.append("g")
.attr("class", "title");
title.append("text")
.attr("x", (w/2))
.attr("y", -40)
.attr("text-anchor", "middle")
.style("font-size", "24px")
.text("US Annual Unemployment Rate, 2000 - 2015");
var subtitle = title.append("text")
.attr("class", "title")
.attr("x", (w/2))
.attr("y", -20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", "#e69900")
.text("Hover the cursor over individual lines to see their corresponding occupation or industry.");
} );
var margin = {top:75, right:320, bottom:50, left: 60},
w = 1060 - margin.left - margin.right,
h = 780 - margin.top - margin.bottom;
// specifying a parser for the years
var parseDate = d3.timeParse("%Y");
//Now we handle the functions for the hover effect (from arnicas . . .):
function mouseoverFunc(d) {
// the "this" is the g parent node. That means we can select it, and then select
// the child nodes and style the]m as we want for the hover effect!
d3.select(this).select("path").attr("id", "focused"); // overrides the class
d3.select(this).select("text").classed("hidden", false); // show it if "hidden"
d3.select(this).select("text").classed("bolder", true);
}
function mouseoutFunc(d) {
d3.select(this).select("path").attr("id", null); // remove the focus style
d3.select(this).select("text").classed("hidden", true); // hide if not "hidden"
d3.select(this).select("text").classed("bolder", false); // remove the bolding on label
// rehide the ones that are in the low numbers
//if (+d.emissions[d.values.length-1].amount <= 700000) {
// d3.select(this).select("text").classed("hidden", true);
//}
}
//end of OCCUPATION multiseries function
}
</script>
</head>
<body>
<header>
<h1>Unemployment rate in the United States, 2000 &ndash; 2015, by occupation and/or industry</h1>
</header>
<main>
<div id="introduction">
<p>You might need to zoom out so the chart can be seen on the right side of the window.</p>
<p>Source: <a href="http://www.bls.gov/">Bureau of Labor Statistics (BLS), US Department of Labor</a>. For more information on the data presented, including definitions of "occupation" and "industry," visit <a href="http://www.bls.gov/oes/oes_ques.htm#def">BLS's FAQ page for Occupational Employment Statistics</a>.</p>
</div> <!-- end of introduction div -->
<div id="user_selects">
<h2>Choose what to show on the chart</h2>
<p><span class="bigger">Select any combo of the following occupations and industries:</span><br /><br /></p>
<form>
<input type="checkbox" name="occupationSeries" value="all_occupations" checked />
<span class="bold red"> Unemployment rate across all occupations and industries</span><br />
<fieldset id="selection_boxes">
<br />
<p class="category_head"> By occupation</p>
<ul>
<!--<li><input type="checkbox" name="occupationSeries" value="all_occupations" checked /><span class="red">Average rate of all occupations </li> -->
<li><input type="checkbox" name="occupationSeries" value="management_professional" checked />Management, Professional, and Related</li>
<li><input type="checkbox" name="occupationSeries" value="management_business" checked />Management, Business, and Financial Operations</li>
<li><input type="checkbox" name="occupationSeries" value="professional" checked />Professional and Related</li>
<li><input type="checkbox" name="occupationSeries" value="service" checked />Service</li>
<li><input type="checkbox" name="occupationSeries" value="sales_and_office" checked />Sales and Office</li>
<li><input type="checkbox" name="occupationSeries" value="sales_and_related" checked />Sales and Related</li>
<li><input type="checkbox" name="occupationSeries" value="office" checked />Office and Administrative Support</li>
<li><input type="checkbox" name="occupationSeries" value="natural_resources" checked />Natural Resources, Construction, and Maintenance</li>
<li><input type="checkbox" name="occupationSeries" value="farming" checked />Farming, Fishing, and Forestry</li>
<li><input type="checkbox" name="occupationSeries" value="construction" checked />Construction and Extraction</li>
<li><input type="checkbox" name="occupationSeries" value="installation" checked />Installation, Maintenance, and Repair</li>
<li><input type="checkbox" name="occupationSeries" value="production_plus" checked />Production, Transportation, and Material Moving</li>
<li><input type="checkbox" name="occupationSeries" value="production" checked />Production</li>
<li><input type="checkbox" name="occupationSeries" value="transportation" checked />Transportation and Material Moving</li>
<li><input type="button" name="checkall_occupations" value="Uncheck all occupations" /></li>
</ul>
</fieldset>
<fieldset id="selection_boxes">
<br />
<p class="category_head"> By industry</p>
<ul>
<!-- <input type="checkbox" name="industrySeries" value="all_industries" checked /><span class="red">Average rate across all industries</span> <br /> -->
<input type="checkbox" name="industrySeries" value="nonagriculture" />Nonagriculture <br />
<input type="checkbox" name="industrySeries" value="mining" />Mining, Quarrying, and Oil and Gas Extraction, Nonagricultural <br />
<input type="checkbox" name="industrySeries" value="construction" />Construction <br />
<input type="checkbox" name="industrySeries" value="manufacturing" />Manufacturing <br />
<input type="checkbox" name="industrySeries" value="durable" />Durable Goods <br />
<input type="checkbox" name="industrySeries" value="nondurable" />Nondurable goods <br />
<input type="checkbox" name="industrySeries" value="trade" />Wholesale and Retail Trades <br />
<input type="checkbox" name="industrySeries" value="transportation" />Transportation and Utilities <br />
<input type="checkbox" name="industrySeries" value="information" />Information <br />
<input type="checkbox" name="industrySeries" value="financial" />Financial Activities <br />
<input type="checkbox" name="industrySeries" value="professional" />Professional and Business Services <br />
<input type="checkbox" name="industrySeries" value="education" />Education and Health Services <br />
<input type="checkbox" name="industrySeries" value="leisure" />Leisure and Hospitality <br />
<input type="checkbox" name="industrySeries" value="other_services" />Other Services <br />
<input type="checkbox" name="industrySeries" value="agricultural" />Agricultural <br />
<input type="checkbox" name="industrySeries" value="all_wage" />All Industries, Government Wage and Salary Workers <br />
<input type="checkbox" name="industrySeries" value="all_nonwage" />All Industries, Self-Employed, Unincorporated, and Unpaid Family Workers <br />
<li><input type="button" name="checkall_industries" value="Check all industries" /></li>
</ul>
</fieldset>
</form>
</div> <!-- end of user_selectsdiv -->
<div id="stage">
<svg id="stage_svg"></svg>
</div> <!-- end of stage div -->
</main>
<footer>
<p>Chart created by Marcia Gray <a href="http://www.MarciaGray.net/portfolio"> (www.MarciaGray.net/portfolio)</a>. &nbsp; &nbsp; December 2016.</p>
</footer>
</body>
</html>
Raw
SeriesReport-combined-averageFirstLine-transposed.csv
year US average Management (professional) Management (business) Professional Service Sales and office Sales and related Office Natural resources Farming Construction (occupation) Installation Production plus transportation and material moving Production Transportation and material moving Nonagriculture Mining_etc (nonagricultural) Construction (industry) Manufacturing Durable goods Nondurable goods Wholesale and retail Transportation and utilities Information Financial activities Professional and business services Education and health Leisure and hospitality Other services Agricultural All Industries: wage and salary workers All industries: self-employed_unincorporated_etc.
2000 4 1.8 1.6 1.9 5.2 3.8 4.1 3.6 5.3 10.2 6.2 2.4 5.1 4.8 5.6 4.1 4.4 6.2 3.5 3.2 4 4.3 3.4 3.2 2.4 4.8 2.5 6.6 3.9 9 2.1 2.1
2001 4.7 2.3 2.2 2.3 5.8 4.4 4.7 4.2 6.4 13.4 7.3 3.2 6.4 6.6 6.2 5 4.2 7.1 5.2 5.2 5.2 4.9 4.3 4.9 2.9 6.1 2.8 7.5 4 11.2 2.2 2.1
2002 5.8 3 3 3 6.6 5.6 5.9 5.4 7.8 12 9.1 4.6 7.6 7.8 7.4 6.2 6.3 9.2 6.7 6.9 6.2 6.1 4.9 6.9 3.5 7.9 3.4 8.4 5.1 10.1 2.5 2.6
2003 6 3.1 3.1 3.2 7.1 5.5 5.9 5.2 8.1 11.4 9.1 5.5 7.9 7.7 8.2 6.3 6.7 9.3 6.6 6.9 6.1 6 5.3 6.8 3.5 8.2 3.6 8.7 5.7 10.2 2.8 2.7
2004 5.5 2.7 2.6 2.8 6.6 5.2 5.4 5 7.3 11.8 8.4 4.2 7.2 7 7.4 5.7 3.9 8.4 5.7 5.5 5.9 5.8 4.4 5.7 3.6 6.8 3.4 8.3 5.3 9.9 2.7 2.8
2005 5.1 2.3 2.2 2.4 6.4 4.8 5 4.6 6.5 9.6 7.6 3.9 6.5 6.7 6.2 5.2 3.1 7.4 4.9 4.6 5.3 5.4 4.1 5 2.9 6.2 3.4 7.8 4.8 8.3 2.6 2.7
2006 4.6 2.1 2 2.1 5.9 4.4 4.7 4.2 6 9.5 6.8 3.7 5.8 5.5 6.2 4.7 3.2 6.7 4.2 3.9 4.8 4.9 4 3.7 2.7 5.6 3 7.3 4.7 7.2 2.3 2.7
2007 4.6 2.1 1.9 2.1 5.9 4.3 4.8 4 6.3 8.5 7.6 3.4 5.8 5.7 6 4.7 3.4 7.4 4.3 4.2 4.5 4.7 3.9 3.6 3 5.3 3 7.4 3.9 6.3 2.3 2.8
2008 5.8 2.7 2.7 2.7 6.7 5.3 5.7 5.1 8.8 10.2 11 4.5 7.6 7.7 7.6 5.9 3.1 10.6 5.8 5.6 6 5.9 5.1 5 3.9 6.5 3.5 8.6 5.3 9.2 2.4 3.6
2009 9.3 4.6 4.9 4.4 9.6 8.5 8.8 8.3 15.6 16.2 19.7 8.5 13.3 14.7 12 9.8 11.6 19 12.1 12.9 10.6 9 8.9 9.2 6.4 10.8 5.3 11.7 7.5 14.3 3.6 5.5
2010 9.6 4.7 5.1 4.5 10.3 9 9.4 8.7 16.1 16.3 20.1 9.3 12.8 13.1 12.4 9.9 9.4 20.6 10.6 11.2 9.6 9.5 8.4 9.7 6.9 10.8 5.8 12.2 8.5 13.9 4.4 5.9
2011 8.9 4.5 4.7 4.3 9.9 8.7 8.8 8.5 13.3 15.3 16.6 7.7 11.3 11.2 11.4 9 6.1 16.4 9 9.2 8.5 8.9 8.2 7.3 6.4 9.7 5.6 11.6 8.8 12.5 4.7 6
2012 8.1 4.1 4 4.2 9.1 7.7 7.9 7.6 11.5 14.4 14.4 6.2 9.8 9.3 10.3 7.9 6 13.9 7.3 7.2 7.5 8.1 6.9 7.6 5.1 8.9 5.5 10.4 7.2 12.4 4.3 5.4
2013 7.4 3.6 3.5 3.6 8.6 7.2 7.3 7.1 9.8 11.4 12.5 5.4 9.1 8.7 9.4 7.2 5.8 11.3 6.6 6.3 7.1 7.3 6.6 6.2 4.5 8.3 4.9 10 6.9 10.1 4 5.3
2014 6.2 3.1 2.9 3.2 7.3 6 6.1 5.8 8 11.6 9.6 4.4 7.4 7 7.7 5.9 4.7 8.9 4.9 4.7 5.2 6.1 5.7 5.2 4 6.9 4.2 8.6 5.7 9.4 3.2 4.4
2015 5.3 2.5 2.4 2.6 6.7 5.1 5.5 4.7 7.2 10.9 8.4 4.3 6.3 5.7 6.8 5.1 8.6 7.3 4.3 4.1 4.6 5.5 4.4 3.9 2.6 5.6 3.6 7.9 5.2 9.4 2.7 3.9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment