D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
dougdowson
Full window
Github gist
Scatterplot: Labor Force Participation
<!DOCTYPE HTML> <meta charset="utf-8"> <html> <head> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body, h1, h2, h3, p { margin: 0px; padding: 0px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5em; color: #4a4a4a; } #content { margin: 5px; padding: 0px 0px 150px 0px; width: 900px; text-align: left; } #container { padding: 15px; border: 1px solid #ccc; height: 513px; clear: both; } #header h1 { margin: 0px 0px 0px 10px; padding: 4px 0px 0px 7px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: normal; color: #fff; } p { margin: 0px; padding: 0px 0px 15px 0px; color: #4a4a4a; font-weight: normal; line-height: 1.5rem; } p.body { padding: 15px 0px 15px 0px; } #slides { margin: 0px; padding: 0px; background: #fff; height: 400px; width: 300px; float: right; } #slides p { margin: 0px; padding: 0px 0px 13px 0px; color: #4a4a4a; font-weight: normal; } #yearmonth { font-family: Arial, sans-serif; font-size: 14px; color: #4a4a4a; font-weight: bold; } g.y.axis path.domain { stroke-width: 0px; } g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line { stroke: #333; stroke-width: 2px; shape-rendering: crispEdges; } .axis path, .axis line { fill: none; shape-rendering: crispEdges; border-width: 2px; } .axis line { stroke: #eee; stroke-width: 1; shape-rendering: crispEdges; } g.group text, g.tick text, .x.axis text { color: #4a4a4a; font-size: 12px; } #buttons { margin: 0px; padding: 0px; } .button { display: inline-block; margin: 0px 2px 0px 0px; padding: 4px 6px; line-height: 20px; background:#ff0000; min-width: 60px; border-radius: 3px; text-align: center; color: #fff; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; } .button:hover { background:#e3120b; color: #fff; cursor: pointer; } .button span { margin: 0px; padding: 0px 3px; } .regLine { fill: none; stroke: #00a1ce; stroke-width: 2.5; opacity: 0; } .unempLine { fill: none; stroke: #00a1ce; stroke-width: 3px; } .lfprLine { fill: none; stroke: #772210; stroke-width: 3px; } .unempCircle { stroke: #00a1ce; stroke-width: 3px; fill: #fff; opacity: 0; } .lfprCircle { stroke: #772210; stroke-width: 3px; fill: #fff; opacity: 0; } #header { margin: 0px; padding: 0px; height: 34px; background: #747474; } #block { float: left; margin: 0px; padding: 0px; height: 100%; width: 10px; background: #ff0000; } .left.label { font-size: 12px; fill: #4a4a4a; } .right.label { font-size: 12px; fill: #772210; } #source { margin: 0px 0px 20px 0px; padding: 0px; font-size: 11px; } g.group text { opacity: 0; } .dot1970s, .dot1980s, .dot1990s, .dot2000s, .dotcurrent { fill: #fff; stroke: #00a1ce; stroke-width: 2.5; opacity: 0; } .dot1970s, #line1970s { stroke: #648d9e; } .dot1980s, #line1980s { stroke: #00485d; } .dot1990s, #line1990s { stroke: #772210; } .dot2000s, #line2000s { stroke: #a5a6a7; } .dotcurrent, #lineCurrent { stroke: #00a1ce; } .currentlabel { font-family: Arial, sans-serif; font-size: 12px; color: #4a4a4a; font-weight: bold; } .slideone, .slidetwo, .slidethree, .slidefour, .slidefourthree, .slidefive, .slidesix, .slideseven { opacity: 0; display: none; } .legendbullet { fill: #fff; stroke-width: 3; } #legend text { font-family: Arial, sans-serif; font-size: 12px; color: #4a4a4a; } #again { position: absolute; margin: 20px 0px 0px 449px; background:#f4f4f4; color: #747474; font-weight: normal; opacity: 0; } #again:hover { background:#f4f4f4; color: #4a4a4a; cursor: pointer; } #progress { text-align: center; margin: 0px; padding: 5px 0px 2px 0px; display: block; } .dot { line-height: 12px; font-size: 30px; width: 12px; height: 20px; margin: 0px; padding: 0px; color: #ccc; } span.lightblue { color: #00a1ce; font-weight: bold; } span.darkred { color: #772210; font-weight: bold; } </style> </head> <body> <div id="content"> <div id="header"> <div id="block"></div> <h1>Unemployment and labour force participation</h1> </div> <div id="container"> <div id="progress"> <span class="dot" id="dotone">•</span> <span class="dot" id="dottwo">•</span> <span class="dot" id="dotthree">•</span> <span class="dot" id="dotfour">•</span> <span class="dot" id="dotfive">•</span> <span class="dot" id="dotsix">•</span> <span class="dot" id="dotseven">•</span> </div> <div id="slides"> <div id="text"> <p class="slideintro">The American economic recovery is underway, and employment has improved. But this is not pulling workers back into the labour market.</p> <p class="slideone">Since the height of the Great Recession in 2009, America's <span class="lightblue">unemployment rate</span> has fallen from 10% to 6.1%.</p> <p class="slideone">During this period, the <span class="darkred">labour force participation rate</span> -- the share of the population 16 and over that is either working or looking for work -- has fallen to 62.8 percent, a 36-year low.</p> <p class="slideone">This combination is unusual. In past recoveries, declining unemployment has led to rising, not falling, labour force participation.</p> <p class="slidetwo">During the economic recovery of the late 1970s, as unemployment fell from 8% to 5.5%, the labour force participation increased from 61% to 64%.</p> <p class="slidethree">During the 1980s recovery, it was the same story. As unemployment dropped from 11% to 5%, the labour force participation increased from 63.5% to 67%.</p> <p class="slidefour">During the 1990s, as unemployment fell from 8% to 4%, labour force participation edged up from 66% to nearly 67.5%.</p> <p class="slidefive">In the 2000s, as unemployment declined from 6.2% to 4.4%, the labour force participation remained steady at 66%.</p> <p class="slidesix">The current recovery has been different. Though unemployment has fallen from 10% to 6.1%, labour force participation has not increased. In fact, it has declined to its lowest level since 1978.</p> <p class="slidesix">This is controversial. Some economists say long-term structural factors, mainly aging, explain most of the recent drop in the labour force. Others argue that short-term, cyclical factors are mostly to blame: workers are sitting out the job hunt, waiting for better opportunities.</p> <p class="slideseven">This debate will shape the Federal Reserve's monetary policy decisions in the coming months.</p> <p class="slideseven">If the decline in labour force participation is mostly structural, then the unemployment rate is a reasonable measure of the remaining slack in the labour market, and the Fed will have to move relatively soon to raise interest rates to prevent the economy from overheating. But if there is a cyclical component to the depressed level of participation, then there is more slack than the unemployment rate suggests and the Fed can take its time about tightening.</p> <p class="slideseven">For now, though, the post-crisis economy looks unique: there are more people back at work -- and more people out of work too.</p> </div> <div id="buttons"> <div class="button" id="next" value="start">Start<span class="fa fa-caret-right"></span></div> </div> </div> <div class="button" id="again" value="start">Again<span class='fa fa-repeat'></span></div> <div id="chart"></div> <p id="source">Source: US Bureau of Labour Statistics</p> </div> <p class="body">AMERICA has experienced a puzzling decline in the proportion of people either working or looking for work. Historically the “labour force participation rate” fell during recessions as some of the unemployed gave up looking for work, and rose amid recoveries as discouraged workers returned.</p> <p>Not this time. The recovery is now five years old, yet the participation rate continues to drop, currently 62.8% from 66% in 2007. Cyclical factors may be at play: the slow recovery has driven an inordinate number of people out of the work force (or into part time work); they may return as the economy improves. Yet the aging population means a growing portion of people have retired, and are not coming back.</p> <p>The relative contribution of these two factors is crucial to the Federal Reserve. If cyclical factors are significant, then the unemployment rate understates slack in the labour market and the Fed can take its time about raising interest rates. If structural factors predominate, then the unemployment rate, at 6.1%, is a fair reading of slack and the Fed may need to move soon.</p> <p>On September 17th Janet Yellen, the Fed chairman, suggested that she held the former view. “There is,” she said, “a meaningful cyclical shortfall.” But that may not last if both unemployment and participation continue to slip.</p> </div> <script type="text/javascript" src="chart.js"></script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js