D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
dougdowson
Full window
Github gist
Line Chart: Season of Birth
<!DOCTYPE HTML> <meta charset="utf-8"> <html> <head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body, h1, h2, h3, p { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; color: #333; font-weight: 400; } #content { margin: 5px; padding: 20px 10px 20px 20px; width: 720px; text-align: left; border: 1px solid #ccc; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axis path { fill: none; stroke: #000; shape-rendering: crispEdges; } #chart { margin: 0px; padding: 0px; } h1 { margin: 0; padding: 0; line-height: 1em; font-size: 1.75em; font-weight: 900; color: #000; } p { margin: 5px 0px 0px 0px; padding: 0; } #menu { margin: 5px 0px 0px 0px; padding: 0; display: block; } .axis path, .axis line { fill: none; stroke: #ccc; shape-rendering: crispEdges; border-width: 2px; } .axis line { stroke: #eee; stroke-width: 1; shape-rendering: crispEdges; } .domain { stroke-width: 1px; } path.line { fill: none; stroke-width: 1.5px; } .x.axis .tick text, .y.axis .tick text, .month text { color: #333; font-size: 0.9em; padding: 5px; } .g-baseline line { stroke: #333; stroke-width: 2; shape-rendering: crispEdges; } .month text { display: none; } .month:hover text { display: block; } .month .line { opacity: 0.4; } .month .line:hover { opacity: 1; } </style> </head> <body> <div id="content"> <h1>Why Do Single Moms Have Children in January?</h1> <p>New research* has found that women who give birth in different parts of the year tend to have different characteristics. The figure below displays this seasonal variation over the last 45 years.</p> <select id="menu"> <option value="pct_black">Percent black mothers</option> <option value="pct_white">Percent white mothers</option> <option value="pct_teen">Percent teen mothers</option> <option value="pct_unmarried">Percent unmarried mothers</option> </select> <div id="chart"></div> <p>*Buckles, K. S. and Hungerman, D. M. (2013). Season of Birth and Later Outcomes: Old Questions, New Answers. <em>Review of Economics and Statistics</em>, 95(3):711–724.</p> <p>Source: National Bureau of Economic Research, Centers for Disease Control and Prevention.</p> </div> <script 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