IEX Market - Olympics Sprint

IEX API

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #020202;
  margin: auto;
  width: 960px;
}

.tracks {
  fill: none;
  stroke: #494949;
  stroke-width: 1.5px;
}

.bodies path {
  stroke: #666666;
  stroke-width: 1.5px;
}

.bodies .text-path {
  stroke: none;
}

.bodies text {
  fill: #424242;
  font: 500 16px "Helvetica Neue";
}

</style>
<body align=center bgcolor=white>

var svg = d3.select("body").append("svg")
            .attr('width',650)
            .attr('height',650),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 1.9,
    bodyRadius = radius / 33,
    dotRadius = bodyRadius - 8;

var pi = Math.PI*50;

var fields = data
var color = d3.scaleRainbow()
    .domain([0, 360]);

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

g.append("g")
    .attr("class", "tracks")
  .selectAll("circle")
    .data(fields)
  .enter().append("circle")
    .attr("r", function(d) { return d.radius/2; });

var body = g.append("g")
    .attr("class", "bodies")
  .selectAll("g")
    .data(fields)
  .enter().append("g");

body.append("path")
    .attr("d", function(d) {
      return arcBody(d)
          + "M0," + (dotRadius - d.radius)
         // + "a" + dotRadius + "," + dotRadius + " 0 0,1 0," + -dotRadius * 2
         // + "a" + dotRadius + "," + dotRadius + " 0 0,1 0," + dotRadius * 2;
    });

body.append("path")
    .attr("class", "text-path")
    .attr("id", function(d, i) { return "body-text-path-" + i; })
    .attr("d", arcTextPath);

var bodyText = body.append("text")
    .attr("dy", ".35em")
  .append("textPath")
    .attr("xlink:href", function(d, i) { return "#body-text-path-" + i; });

tick();

d3.timer(tick);

function tick() {
  var now = Date.now();

fields.forEach(function(d,i) {
    var start = d.interval(now),
        end = d.interval.offset(start, 6);
    d.angle = Math.round((now - start) / (end - start) * 360 * 100) / 100*i;
  });

body
      .style("fill", function(d) { return color(d.angle); })
      .attr("transform", function(d) { return "rotate(" + d.angle + ")"; });

bodyText
      .attr("startOffset", function(d, i) { return d.angle <= 90 || d.angle > 270 ? "100%" : "0%"; })
      .attr("text-anchor", function(d, i) { return d.angle <= 90 || d.angle > 270 ? "end" : "start"; })
      .text(function(d) { return d.name
    +' ('+formatAbbreviation(d[key])+')'; 
                        });
}

function formatDate(d) {
  d = new Date(d).getDate();
  switch (10 <= d && d <= 19 ? 10 : d % 10) {
    case 1: d += "st"; break;
    case 2: d += "nd"; break;
    case 3: d += "rd"; break;
    default: d += "th"; break;
  }
  return d;
}
  }
</script>

https://d3js.org/d3.v4.0.0-alpha.21.min.js