.DS_Store

# use-d3-v3-to-build-interactive-charts-with-javascript

    path {
      fill: purple;
      fill-opacity: 0.7;
    }

    #chart {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      margin-top: 10px;
    }

{
    "math": [{
        "date": "20140101",
        "count": 18
    }, {
        "date": "20140116",
        "count": 26
    }, {
        "date": "20140201",
        "count": 27
    }, {
        "date": "20140216",
        "count": 14
    }, {
        "date": "20140301",
        "count": 23
    }, {
        "date": "20140316",
        "count": 14
    }, {
        "date": "20140401",
        "count": 26
    }, {
        "date": "20140416",
        "count": 34
    }, {
        "date": "20140501",
        "count": 27
    }, {
        "date": "20140516",
        "count": 23
    }, {
        "date": "20140601",
        "count": 14
    }, {
        "date": "20140616",
        "count": 28
    }, {
        "date": "20140701",
        "count": 33
    }, {
        "date": "20140716",
        "count": 33
    }, {
        "date": "20140801",
        "count": 17
    }, {
        "date": "20140816",
        "count": 14
    }, {
        "date": "20140901",
        "count": 29
    }, {
        "date": "20140916",
        "count": 28
    }, {
        "date": "20141001",
        "count": 13
    }, {
        "date": "20141016",
        "count": 12
    }, {
        "date": "20141101",
        "count": 30
    }, {
        "date": "20141116",
        "count": 18
    }, {
        "date": "20141201",
        "count": 31
    }, {
        "date": "20141216",
        "count": 27
    }],
    "science": [{
        "date": "20140101",
        "count": 22
    }, {
        "date": "20140116",
        "count": 21
    }, {
        "date": "20140201",
        "count": 28
    }, {
        "date": "20140216",
        "count": 33
    }, {
        "date": "20140301",
        "count": 30
    }, {
        "date": "20140316",
        "count": 21
    }, {
        "date": "20140401",
        "count": 28
    }, {
        "date": "20140416",
        "count": 35
    }, {
        "date": "20140501",
        "count": 12
    }, {
        "date": "20140516",
        "count": 13
    }, {
        "date": "20140601",
        "count": 24
    }, {
        "date": "20140616",
        "count": 15
    }, {
        "date": "20140701",
        "count": 11
    }, {
        "date": "20140716",
        "count": 20
    }, {
        "date": "20140801",
        "count": 29
    }, {
        "date": "20140816",
        "count": 35
    }, {
        "date": "20140901",
        "count": 20
    }, {
        "date": "20140916",
        "count": 25
    }, {
        "date": "20141001",
        "count": 15
    }, {
        "date": "20141016",
        "count": 31
    }, {
        "date": "20141101",
        "count": 12
    }, {
        "date": "20141116",
        "count": 16
    }, {
        "date": "20141201",
        "count": 25
    }, {
        "date": "20141216",
        "count": 25
    }],
    "reading": [{
        "date": "20140101",
        "count": 19
    }, {
        "date": "20140116",
        "count": 19
    }, {
        "date": "20140201",
        "count": 14
    }, {
        "date": "20140216",
        "count": 28
    }, {
        "date": "20140301",
        "count": 26
    }, {
        "date": "20140316",
        "count": 17
    }, {
        "date": "20140401",
        "count": 27
    }, {
        "date": "20140416",
        "count": 19
    }, {
        "date": "20140501",
        "count": 14
    }, {
        "date": "20140516",
        "count": 29
    }, {
        "date": "20140601",
        "count": 15
    }, {
        "date": "20140616",
        "count": 13
    }, {
        "date": "20140701",
        "count": 31
    }, {
        "date": "20140716",
        "count": 28
    }, {
        "date": "20140801",
        "count": 19
    }, {
        "date": "20140816",
        "count": 35
    }, {
        "date": "20140901",
        "count": 19
    }, {
        "date": "20140916",
        "count": 23
    }, {
        "date": "20141001",
        "count": 19
    }, {
        "date": "20141016",
        "count": 16
    }, {
        "date": "20141101",
        "count": 23
    }, {
        "date": "20141116",
        "count": 17
    }, {
        "date": "20141201",
        "count": 18
    }, {
        "date": "20141216",
        "count": 20
    }]
}

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
    <link rel="stylesheet" href="app.css"/>
</head>

<body>

    <button onclick="updateChart('math')">Math</button>
    <button onclick="updateChart('science')">Science</button>
    <button onclick="updateChart('reading')">Reading</button>

    <div id="chart"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

var w = 300;
var h = 200;
var path;
var subjects;

$.getJSON('data.json', function (json) {
  subjects = json;

  _.keys(subjects).forEach(function (subject) {
    subjects[subject].forEach(function (d) {
      d.date = d3.time.format("%Y%m%d").parse(d.date);
    });
  });

  path = d3
    .select('#chart')
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .append('g')
    .append('path');

  updateChart('math');
});

function updateChart (subject) {
  var data = subjects[subject];
  var dates = _.map(data, 'date');
  var counts = _.map(data, 'count');

  var x = d3.time.scale()
    .domain(d3.extent(dates))
    .range([0, w]);

  var y = d3.scale.linear()
    .domain(d3.extent(counts))
    .range([h, 0]);

  var area = d3.svg.area()
    .interpolate('bundle')
    .x(function (d) {
      return x(d.date);
    })
    .y0(function (d) {
      return y(0);
    })
    .y1(function (d) {
      return y(d.count);
    });

  path
    .datum(data)
    .transition()
    .duration(450)
    .attr('d', area);
}