D3/examples/barchart03_json.html at master · Godfather27/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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="../web_modules/d3/build/d3.js"></script>
  <style type="text/css">
    body {
      width: 800px;
      margin: 25px auto;
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    rect {
      fill: steelblue;
      fill-opacity: 0.8;
    }
    rect:hover {
      fill-opacity: 1;
    }
    .axis {
      font-size: smaller;
    }
  </style>
</head>
<body>
  <h1>Student's First BarChart</h1>

  <script type="text/javascript">

  const margin = {top: 40, bottom: 10, left: 120, right: 20};
  const width = 800 - margin.left - margin.right;
  const height = 1000 - margin.top - margin.bottom;

  // Creates sources <svg> element
  const svg = d3.select('body').append('svg')
              .attr('width', width+margin.left+margin.right)
              .attr('height', height+margin.top+margin.bottom);

  // Group used to enforce margin
  const g = svg.append('g')
              .attr('transform', `translate(${margin.left},${margin.top})`);

  // Global variable for all data
  let data = [66.38, 21.51, 23.37, 34.17, 36.21];

  const bar_height = 50;

  /////////////////////////
  // TODO load `weather.json` file
  // use `.temperature` as `width` and
  // the `loation.city` as `title`
  d3.json('http://127.0.0.1:8080/examples/weather.json', (error, response)=> {
    if(error){
      console.error(error)
    } else {
      data = [...data, ...response.map(v => v.temperature)]
      updateChart(data)
    }
  })

  // Render the chart with new data

  // DATA JOIN
  function updateChart(){
    const rect = g.selectAll('rect').data(data);

    // ENTER
    // new elements
    const rect_enter = rect.enter().append('rect')
      .attr('x', 0);
    rect_enter.append('title');

    // ENTER + UPDATE
    // both old and new elements
    rect.merge(rect_enter)
      .attr('height', bar_height)
      .attr('width', (d) => d * 7)
      .attr('y', (d, i) => i*(bar_height+5));

    rect.merge(rect_enter).select('title').text((d) => `value: ${d}`);


    // EXIT
    // elements that aren't associated with data
    rect.exit().remove();
  }

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