dvto6/line-v1.html at master · dvto/dvto6 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Line Chart v1</title>
    <style>
    body {
      font: 10px sans-serif;
    }
    .axis path, .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
    </style>
  </head>
  <body>
    <script src="d3.v3.min.js"></script>
    <script>
      (function() {
        'use strict';

        var margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

        var parseTime = d3.time.format("%Y%m%d%H%M").parse;

        var x = d3.time.scale()
          .range([0, width]);

        var y = d3.scale.linear()
          .range([height, 0]);

        var xAxis = d3.svg.axis()
          .scale(x)
          .orient('bottom');

        var yAxis = d3.svg.axis()
          .scale(y)
          .orient('left');

        var line = d3.svg.line()
          .x(function(d) { return x(d.time); })
          .y(function(d) { return y(d.count); });

        var svg = d3.select('body').append('svg')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom)
          .append('g')
          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        d3.csv('times.csv', function(error, data) {
          data.forEach(function(d) {
            d.time = parseTime((function() {
              var len = d.time.length,
                t;
              if (len === 1) t = ['20120101000', d.time].join('');
              else if (len === 2) t = ['2012010100', d.time].join('');
              else if (len === 3) t = ['201201010', d.time].join('');
              else t = ['20120101', d.time].join('');
              return t;
            })()),
            d.count = +d.count;
          });

          x.domain(d3.extent(data, function(d) { return d.time; }));
          y.domain(d3.extent(data, function(d) { return d.count; }));

          svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xAxis);

          svg.append('g')
            .attr('class', 'y axis')
            .call(yAxis)
            .append('text')
            .attr('transform', 'rotate(-90)')
            .attr('y', 6)
            .attr('dy', '.71em')
            .style('text-anchor', 'end')
            .text('Total');

          svg.append('path')
            .datum(data)
            .attr('class', 'line')
            .attr('d', line);
        });
    })();
  </script>
  </body>
</html>