d3/scatter.html at master · jaymitchell/d3 · 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>
<head>
  <title>D3 - Data Driven Documents</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js" charset="utf-8"></script>
  <style type="text/css">

    body
    {
      padding-top: 50px;
      padding-left: 100px;
    }

    #chartArea {
      width: 400px;
      height: 300px;
      background-color: #CCC;
    }

    .bar
    {
      display: inline-block;
      width: 20px;
      height: 75px; /* Gets overriden by D3-assigned height below */
      margin-right: 2px;
    }

    .bubble {
      display: inline-block;
      fill: purple;
      fill-opacity: 0.5;
      stroke: black;
      stroke-weight: 1px;
    }

  </style>
</head>
<body>

  <div id="chartArea"></div>

<script type="text/javascript">

  var dataset = _.map(_.range(25), function (i) {
    return {
      x: Math.random() * 100,
      y: Math.random() * 100,
      r: Math.random() * 30
    };
  });

  var margin = {top: 0, right: 0, bottom: 0, left: 0};
  var w = 400 - margin.left - margin.right;
  var h = 300 - margin.top - margin.bottom;

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

  var xScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, w]);

  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) {
      return d.y;
    })])
    .range([h, 0]);

  var colorScale = d3.scale.quantile()
    .domain([0, 10, dataset.length - 10, dataset.length])
    .range(['yellow', 'orange', 'green']);

  svg.selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle')
    .attr('class', 'bubble')
    .attr('cx', function (d) {
      return xScale(d.x);
    })
    .attr('cy', function (d) {
      return yScale(d.y);
    })
    .attr('r', function (d) {
      return d.r;
    });

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