Activity UI by D3.js

Apple Watch Activity UI By D3.js

forked from thayashi's block: Activity UI by D3.js

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

svg {
    display:block;
    margin: 0 auto;
  }
  body {
    background: #000;
    font: 30px sans-serif;
  }
  </style>
</head>

<body>
  <script>
    var width = 455;
    var height = 455;

var arc_width = 42;
    var arc_round = arc_width/2;
    var τ = 2 * Math.PI;
    var r = 60;

var data = [
      {index: 0, color: '#2dd3dc', start:0, end: 0},
      {index: 1, color: '#9efe33', start:0, end: 0},
      {index: 2, color: '#fc1a47', start:0, end: 0}
    ];

var bg_data = [
      {index: 0, color: '#2dd3dc', start:0, end: 360},
      {index: 1, color: '#9efe33', start:0, end: 360},
      {index: 2, color: '#fc1a47', start:0, end: 360}
    ];

var icon_paths = [
    "M-1.143-7.794L-9.38,0.443c-0.527,0.527-0.527,1.382,0,1.909s1.382,0.527,1.909,0l5.933-5.933V6.862c0,0.746,0.604,1.35,1.35,1.35s1.35-0.604,1.35-1.35V-3.581l5.934,5.933c0.527,0.527,1.382,0.527,1.909,0C9.268,2.088,9.4,1.743,9.4,1.397S9.268,0.707,9.004,0.443L0.766-7.794C0.239-8.322-0.616-8.322-1.143-7.794z",
    "M5.538,0.917l-7.826,7.826c-0.25,0.25-0.579,0.376-0.907,0.376c-0.329,0-0.656-0.125-0.907-0.376c-0.501-0.501-0.501-1.312,0-1.813l5.636-5.637h-9.92c-0.708,0-1.282-0.574-1.282-1.282c0-0.708,0.574-1.283,1.282-1.283h9.92l-5.636-5.636c-0.501-0.501-0.501-1.312,0-1.813s1.312-0.501,1.813,0l7.826,7.825C6.039-0.396,6.039,0.416,5.538,0.917zM3.445,8.743l7.826-7.826c0.501-0.501,0.501-1.313,0-1.814L3.445-8.722c-0.501-0.501-1.312-0.501-1.813,0s-0.501,1.312,0,1.813L8.55,0.01L1.632,6.93c-0.501,0.501-0.501,1.312,0,1.813c0.25,0.25,0.578,0.376,0.907,0.376C2.867,9.119,3.195,8.994,3.445,8.743z",
    "M7.618-0.944L-0.62-9.182c-0.527-0.527-1.382-0.527-1.909,0s-0.527,1.382,0,1.909L3.404-1.34H-7.039c-0.746,0-1.35,0.604-1.35,1.35s0.604,1.35,1.35,1.35H3.404l-5.933,5.934c-0.527,0.527-0.527,1.382,0,1.909c0.264,0.264,0.609,0.396,0.955,0.396s0.691-0.132,0.955-0.396l8.237-8.238C8.145,0.438,8.145-0.417,7.618-0.944z"
    ];

//arc generator
    var arc = d3.svg.arc()
      .cornerRadius(arc_width/2)
      .startAngle(function(d) { 
        return d.start * τ / 360 - arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
      })
      .endAngle(function(d) {
        return d.end*τ / 360 + arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
      })
      .innerRadius(function(d) { return r + (arc_width + 1) * d.index; })
      .outerRadius(function(d) { return r + (arc_width + 1) * d.index + arc_width; });

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

var arcs_bg = svg.append("g").selectAll("path.arcbg")
        .data(bg_data)
        .enter().append("path")
        .attr("class", "arcbg")
        .style("opacity", 0.25)
        .style("fill", function(d) { return d.color; })
        .attr("d", arc);

var arcs = svg.append("g").selectAll("path.arc")
      .data(data)
      .enter().append("path")
      .attr("class", "arc")
      .style("fill", function(d) { return d.color; })
      .attr("d", arc)
      .each(function(d) { this._current = d;});

var icons = svg.append("g").selectAll("path.icon")
      .data(data)
      .enter().append("path")
      .attr("class", "icon")
      .style("opacity", 0)
      .attr("d", function(d){
        return icon_paths[d.index];
      })
      .attr("transform", function(d, i){
        return "translate(0," + (-1 * (r + (arc_width + 1) * d.index) - arc_round) + ")";
      })
      .transition()
      .duration(1500)
      .style("opacity", 1);

setTimeout(function() {
      arcs.data([
        {index: 0, start:0, end: 110},
        {index: 1, start:0, end: 170},
        {index: 2, start:0, end: 220}
      ]);
      arcs.transition()
        .duration(1500)
        .call(arcTween);
    }, 800);

</script>
</body>

https://d3js.org/d3.v3.min.js