D3.js_tutorial/17_histogram.html at master · dong-y/D3.js_tutorial · 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
<!doctype html>
<html>
  <head>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>

  <body>
    <script>

    var width = 500,
      height = 500,
      padding = 50;


      d3.csv("ages.csv", function (data) {

        var map = data.map(function (i) {
          return parseInt(i.age);
        });

        var histogram = d3.layout.histogram()
                        .bins(5)
                        (map)

        var y = d3.scale.linear()
                .domain([0, d3.max(histogram.map(function (i) {
                  return i.length;
                }))])
                .range([0,height]);

        var x = d3.scale.linear()
                  .domain([0, d3.max(map)])
                  .range([0, width])
        // console.log(histogram);
        var canvas = d3.select("body").append("svg")
                      .attr("width", width + 50)
                      .attr("height", height + padding)
                      .append("g")
                        .attr("transform", "translate(20,0)")

        var bars = canvas.selectAll(".bar")
                    .data(histogram)
                    .enter()
                    .append("g")

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

        var group = canvas.append("g")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)

        bars.append("rect")
              .attr("x", function (d) {
                return x(d.x);
              })
              .attr("y", function (d) {
                return 500 - y(d.y);
              })
              .attr("width", function (d) {
                return x(d.dx);
              })
              .attr("height", function (d) {
                return y(d.y);
              })
              .attr("fill", "steelblue")

        bars.append("text")
            .attr("x", function (d) {
              return x(d.x);
            })
            .attr("y", function (d) {
              return 500 - y(d.y);
            })
            .attr("dy", "20px")
            .attr("dx", function (d) {
              return x(d.dx)/2;
            })
            .attr("fill", "#fff")
            .attr("text-anchor", "middle")
            .text(function (d) {
              return d.y;
            })

      })

    </script>
  </body>
</html>