Multiseries Line Chart: US Unemployment by Occupation and/or Industry

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>US UNEMPLOYMENT 2000 - 2015</title>
	
	<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
		*/
		/* https://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
  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) {

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 (https://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="https://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="https://www.bls.gov/oes/oes_ques.htm#def">BLS's FAQ page for Occupational Employment Statistics</a>.</p>
		</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="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="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> 
		
		<div id="stage">
		<svg id="stage_svg"></svg>
			
		</div> 
		
		
	</main>
	
	
	<footer>
		<p>Chart created by Marcia Gray <a href="https://www.MarciaGray.net/portfolio"> (www.MarciaGray.net/portfolio)</a>. &nbsp; &nbsp; December 2016.</p>
	</footer>
</body>
</html>

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