D3 Examples - Simplified Baby Names Chart

xxxxxxxxxx
 
<!DOCTYPE html>
    <meta charset="utf-8">
​
    <!-- Google fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    
    <!-- D3 -->
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <!-- Data -->
    <script src="girl_names_us.js"></script>
    
    <!-- Styling -->
    <style>
        body {
          font-family: 'Open Sans', sans-serif;
          font-size: 11px;
          font-weight: 300;
          fill: #4A4A4A;
        }
​
        #chart{
            padding: 30px 20px;
        }
​
        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }
​
        .x.axis path, .y.axis path {
          display: none;
        }
​
        .x.axis text, .y.axis text {
          font: 10px;
        }
​
        .line {
          fill: none;
        }
​
        .popUpName text {
          text-anchor: middle;
          text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
        }
​
        .voronoi path {
          fill: none;
          pointer-events: all;
        }
    </style>
    
<body>
    <div id="chart"></div>
    <script src="babynames.js"></script>
</body>
    