xxxxxxxxxx<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 */ /* 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 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 (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 – 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> <!-- 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="https://www.MarciaGray.net/portfolio"> (www.MarciaGray.net/portfolio)</a>. December 2016.</p> </footer></body></html> https://d3js.org/d3.v4.js