TransitGym.github.io/test.html at master · TransitGym/TransitGym.github.io · 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
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.progress-meter .background {
  fill: #ccc;
}

.progress-meter .foreground {
  fill: #000;
}

.progress-meter text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

</style>
<body>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script> -->
  <script src="https://d3js.org/d3-queue.v3.min.js"></script>

  <script type="text/javascript">

var width = 960,
    height = 500,
    twoPi = 2 * Math.PI,
    progress = 0,
    total = 1310000, // must be hard-coded if server doesn't report Content-Length
    formatPercent = d3.format(".0%");

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(180)
    .outerRadius(240);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var meter = svg.append("g")
    .attr("class", "progress-meter");

meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

var foreground = meter.append("path")
    .attr("class", "foreground");

var text = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em");

d3.queue()
  .defer(d3.csv, "one.json")
  .defer(d3.csv, "two.json")
  .defer(function(f) {
    d3.json("https://api.github.com/repos/mbostock/d3/git/blobs/2e0e3b6305fa10c1a89d1dfd6478b1fe7bc19c1e?" + Math.random())
      .on("progress", function() {
        console.log('progress');
        var i = d3.interpolate(progress, d3.event.loaded / total);
        d3.transition().tween("progress", function() {
          return function(t) {
            progress = i(t);
            foreground.attr("d", arc.endAngle(twoPi * progress));
            text.text(formatPercent(progress));
          };
        });
      })
      .get(function(){
        return true;
      });
  });


</script>