d3-learn-by-example/015_svg_scatter_plot.html at master · markuscraig/d3-learn-by-example · 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
<!DOCTYPE html>
<html>
  <head>
    <!-- load the d3 v4 javascript library -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>

    <!-- d3 script -->
    <script>

    // define the static data-set
    var dataset = [
                    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                  ];
    // define the svg element attributes
    var w = 500;
    var h = 100;
    var barPadding = 2;

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

    // create each svg circle and set the attributes
    svg.selectAll("circle") // select all svg circles
      .data(dataset) // bind the data
      .enter() // on 'enter' (called for each new data item)
      .append("circle") // create the new circle
      .attr("cx", function(d, i) {
        // set the circle's x position
        return d[0];
      })
      .attr("cy", function(d, i) {
        // set the circle's y position
        return d[1];
      })
      .attr("r", function(d) {
        /*
        ** It's better to encode the value as the circle's area
        ** rather than just setting the value to the radius.
        ** Just setting the radius will distort the size of our
        ** data values, whereas using the area gives an even
        ** size comparison.
        */
        return Math.sqrt(Math.PI / d[1]*1000);
      });

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