d3/bar.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
<!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;
    }

  </style>
</head>
<body>

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

<script type="text/javascript">

  var dataset = _.map(_.range(175), function (i) {
    return Math.random() * 100;
  });

  var margin = {top: 20, right: 10, bottom: 30, left: 20};
  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.ordinal()
    .domain(dataset)
    .rangeBands([0, w], 0.1, 0.2);

  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset) * 1.1])
    .range([0, h]);

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

  svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('x', xScale)
    .attr('y', function (d) {
      return h - yScale(d);
    })
    .attr('width', xScale.rangeBand())
    .attr('height', yScale)
    .attr('fill', function (d, i) {
      return colorScale(i);
    });

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