All examples By author By category About

dougdowson

Full window Github gist

Line Chart: Prime-Age Workers

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

<style>

body, h1, h2, h3, p {
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #4a4a4a;
}

a, a:visited, a:active, a:hover {
  color: #4a4a4a;
  text-decoration: none;
}

a {
  text-decoration: underline;
}

#content {
  margin: 5px;
  padding: 0px 0px 50px 0px;
  width: 850px;
  text-align: left;
}

p.body {
  margin: 0px;
  padding: 15px 0px 13px 0px;
  line-height: 1.5rem;
}

#slides {
  margin: 0px;
  padding: 0px;
  background: #fff;
  height: 400px;
  width: 250px;
  float: right;
}

#slides p {
  margin: 0px;
  padding: 0px 0px 13px 15px;
  color: #4a4a4a;
  font-weight: normal;
}

#container {
  padding: 15px;
  border: 1px solid #ccc;
  height: 450px;
  clear: both;
}

#chart {
  margin: 0px;
  padding: 0px;
}

#header {
  margin: 0px;
  padding: 0px;
  height: 34px;
  background: #747474;
}

#block {
  float: left;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 10px;
  background: #ff0000;
}

#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 13px 15px;
}

#unit {
  padding: 13px 0px 0px 0px;
  font-weight: bold;
}

#date {
  margin: 0px;
  padding: 0px;
}

#source {
  margin: 0px 0px 20px 0px;
  padding: 0px;
  font-size: 11px;
}

.areaLabel {
  fill: #fff;
  font-weight: bold;
}

g.right.axis path.domain, g.left.axis path.domain {
  stroke-width: 0px;
}

g.left.axis g.tick line {
  stroke-width: 0px;
}

g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line {
  stroke: #4a4a4a;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #ddd;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

g.group text, g.tick text {
  color: #4a4a4a;
  font-size: 12px;
}

.left.label {
  fill: #772210;
  font-size: 12px;
}

.right.label {
  font-size: 12px;
  fill: #4a4a4a;
}

g.group text {
  opacity: 0;
}

.employment, .jobgains, .nilfLine {
  fill: none;
  stroke: #00a1ce;
  stroke-width: 2.5px;
}

.unemploymentrate {
  fill: none;
  stroke: #772210;
  stroke-width: 2.5px;
  opacity: 0;
}

.unempLineTwo {
  fill: none;
  stroke: #772210;
  stroke-width: 2.5px;
}

#buttons {
  margin: 0px 0px 0px 15px;
  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;
}

.empcircle, .unempcircle, .nilfcircle {
  stroke: #00a1ce;
  stroke-width: 2.5px;
  fill: #fff;
  opacity: 0;
}

.circleUnder25, .circle2554, .circleOver54 {
  stroke: #648d9e;
  stroke-width: 2.5px;
  fill: #fff;
}

.circle2554 {
  stroke: #00485d;
}

.circleOver54 {
  stroke: #00a1ce;
}

.group .unempcircle {
  stroke: #772210;
}

.areaUnder25 {
  fill: #648d9e;
  stroke-width: 0;
}

.area2554 {
  fill: #00485d;
  stroke-width: 0;
}

.areaOver54 {
  fill: #00a1ce;
  stroke-width: 0;
}
.stackedlineUnder25, .stackedline2554, .growthlineUnder25, .growthline2554 {
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

.slideone, .slidetwo, .slidethree, .slidefourone, .slidefourtwo, .slidefourthree, .slidefive, .slidesix, .slideseven {
  opacity: 0;
  display: none;
}

#text {
  margin: 0px;
  padding: 0px;
}

#progress {
  text-align: center;
  margin: 0px;
  padding: 7px 0px 0px 0px;
  display: block;
}

#next span {
  margin: 0px;
  padding: 0px 3px;
}

.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.darkblue {
  color: #00485d;
  font-weight: bold;
}

span.grayblue {
  color: #648d9e;
  font-weight: bold;
}

span.darkred {
  color: #772210;
  font-weight: bold;
}

</style>
<body>

<div id="content">
	<div id="header">
		<div id="block"></div>
		<h1>What happened to America's &ldquo;prime-age&rdquo; workers?</h1>
	</div>

<div id="slides">
			<div id="text">
				<p class="slideintro">Have America's prime-age workers been left out of the economic recovery?</p>
				<p class="slideone">Since the American labour market hit a bottom in early 2010, total nonfarm <span class="lightblue">employment</span> has grown steadily from 130m to 139m workers.</p>
				<p class="slidetwo">Meanwhile, the <span class="darkred">unemployment</span> rate has fallen from almost 10% to around 6%.</p>
				<p class="slidethree">But the 9m jobs created since 2010 have not been distributed evenly.</p>
				<p class="slidefourone"><span class="grayblue">Younger workers aged 16 to 24</span>, who represent 14% of the labour force, accounted for 17% of the job gains.</p>
				<p class="slidefourtwo"><span class="darkblue">Prime-age workers aged 25 to 54</span>, representing two-thirds of the labour force, accounted for just 28% of the job gains.</p>
				<p class="slidefourthree"><span class="lightblue">Older workers aged 55 and over</span>, who comprise a fifth of the labour force, accounted for more than half of all new jobs.</p>
				<p class="slidefive">Worryingly, <span class="darkblue">prime-age employment has grown just 1.4%</span> since 2010, compared to <span class="grayblue">8.5% for younger workers</span> and <span class="lightblue">18.2% for older workers</span>.</p>
				<p class="slidesix">Much of this growth is due to aging: the number of people over 55 is growing more rapidly than those aged 25 to 54. But it also reflects the difficulty that prime-aged workers -- especially men without college education -- have finding jobs.</p>
				<p class="slideseven">As America recovers from the Great Recession, the good economic news hides weaknesses. Employment has returned to pre-recession levels, but for many people a real recovery has yet to come.</p>
				<p class="slideseven">See story in our recent issue <a href="https://www.economist.com/news/briefing/21607810-new-figures-show-speed-which-americas-economy-can-grow-without-stoking-inflation-has">here</a>.</p>
			</div>

<div id="buttons">
				<div class="button" id="next" value="start">Start<span class="fa fa-caret-right"></span></div>
			</div>

</div>

<p id="source">Source: US Bureau of Labour Statistics</p>

</div>

<p class="body">American businesses added 209,000 jobs in July marking the sixth straight month of job growth above 200,000. But the favourable employment figures belie concerns about the economic recovery, from declining labour-force participation and anaemic wage growth, to high rates of long-term unemployment. This &ldquo;action chart&rdquo; highlights one troubling aspect of the economic climate: the lack of job growth among prime-age workers aged 25 to 54.</p>

</div>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js