LearningD3/index.html at master · Scalahansolo/LearningD3 · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3 Page Template</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="d3/d3.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

      /*var dataset = [];                         //Initialize empty array
      for (var i = 0; i < 20; i++) {            //Loop 25 times
          var newNumber = Math.floor(Math.random() * 30);   //New random number (0-30)
          dataset.push(newNumber);              //Add new number to array
      }*/

      var w = 500;
      var h = 120;
      var barPadding = 1;


      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)

      svg.selectAll("rect")
          .data(dataset)
          .enter()
          .append("rect")
          .attr("x", function(d, i) {
            return i * (w / dataset.length);
          })
          .attr("y", function(d) {
            return h - (d * 4);
          })
          .attr("width", w / dataset.length - barPadding)
          .attr("height", function(d) {
            return d * 4;
          })
          .attr("fill", function(d) {
            return "rgb(" + (d * 10) + ", 0, 0)";
          });

      svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d;
        })
        .attr("x", function(d, i) {
          return i * (w / dataset.length) + (w/ dataset.length - barPadding) / 2;
        })
        .attr("y", function(d) {
          return h - (d * 4) + 14;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white")
        .attr("text-anchor", "middle");


      /*var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

      var circles = svg.selectAll("circle")
                        .data(dataset)
                        .enter()
                        .append("circle");

      circles.attr("cx", function(d, i) {
        return (i * 50) + 25;
      })
      .attr("cy", h/2)
      .attr("r", function(d) {
        return d;
      })
      .attr("fill", "yellow")
      .attr("stroke", "orange")
      .attr("stroke-width", function(d) {
        return d/2;
      });*/
    </script>
  </body>
</html>