thayashi
10/2/2016 - 4:36 PM
Activity UI by D3.js
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);
function arcTween(transition) {
transition.attrTween("d", function(d) {
var interpolate = d3.interpolate(this._current.end, d.end);
this._current = interpolate(0);
return function(t) {
d.end = interpolate(t);
return arc(d);
};
});
}
</script>
</body>Apple Watch Activity UI By D3.js
Built with blockbuilder.org
forked from thayashi's block: Activity UI by D3.js
license: mit