Skip to content

Instantly share code, notes, and snippets.

@canimus
Last active December 18, 2015 17:49
Show Gist options
  • Save canimus/5820929 to your computer and use it in GitHub Desktop.
Save canimus/5820929 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Arc Test</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
h1 {
font-family: 'Open Sans';
font-weight: 600;
font-size: 22px;
text-transform: uppercase;
}
span {
font-family: Menlo;
font-size: 10px;
color: #ccc;
}
div {
position: relative;
display: block;
background: #fff;
border: 1px solid #ccc;
}
path {
shape-rendering: geometric-precision;
}
line {
stroke: #555;
stroke-width: 1.5px;
}
rect {
fill: rgba(50, 50, 50, .6);
}
text { font-family: 'Open Sans'; font-size: 12px; stroke: none; fill: #555;}
.big {
font-family: 'Open Sans'; font-size: 1.2em; font-weight: 600; stroke: none; fill: #555;
}
</style>
</head>
<body>
<h1>Dashboard</h1>
<div style="padding-left: 10px"></div>
<section></section>
</body>
<script>
var w=700;
var h=200;
var margin = {top: (h*.1), bottom: (h*.1), left: (w*.1), right: (w*.1)};
var arc = d3.svg.arc()
.outerRadius((h-margin.top-margin.bottom)/4)
.innerRadius(((h-margin.top-margin.bottom)/4)*.6);
function arcTween(b) {
var i = d3.interpolate({endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
data_set = ["2013-06-14", "2013-06-15", "2013-06-15", "2013-06-15", "2013-06-19", "2013-06-19"];
//data_set = [];
data_nest = d3.nest().key(function(d) {return d;}).entries(data_set);
data_keys = data_nest.map(function(d) { return d.key});
max_y = d3.max(data_nest.map(function(d) { return d.values.length;}));
day_format = d3.time.format("%a");
fmt = d3.time.format("%Y-%m-%d");
x_fmt = d3.time.format("%m/%d");
today = new Date();
today.setHours(24);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
wk = new Date(today.getTime() - (60 * 60 * 1000 * 24 * 7));
x = d3.time.scale()
.domain([wk, today])
.range([0,7]);
x1 = d3.scale.linear()
.domain([0,7])
.range([0,400]);
svg = d3.select("div").append("svg")
.attr("width", w)
.attr("height", h);
g = svg.append("g");
g.attr("transform", "translate("+((h-margin.top-margin.bottom)/4)+","+(h/2)+")");
pie = d3.scale.linear()
.domain([0, max_y])
.range([0, Math.PI*2]);
spacing = w/7;
base = g.selectAll("path.base").data(d3.range(7));
base
.enter()
.append("path")
.attr("class", "base")
.style("fill", "#eee")
.attr("transform", function(d,i) {
return "translate("+(i*spacing)+", 0)";
})
.attr("d", arc({startAngle: 0, endAngle: Math.PI*2}));
circles = g.selectAll("path.circles").data(d3.range(7));
circles
.enter()
.append("path")
.attr("class", "circles")
.style("fill", "#37abc8")
.attr("transform", function(d,i) {
return "translate("+(i*spacing)+", 0)";
})
.attr("d", arc({startAngle: 0, endAngle: 0}));
legend = g.selectAll("text.day").data(d3.range(7));
legend
.enter()
.append("text")
.attr("class", "day")
.attr("text-anchor", "middle")
.attr("transform", function(d,i) {
return "translate("+((i*spacing))+", "+58+")";
})
.text(function(d) {
return day_format(x.invert(d))
});
counters = g.selectAll("text.total").data(d3.range(7));
counters
.enter()
.append("text")
.attr("class", "big")
.attr("text-anchor", "middle")
.attr("transform", function(d,i) {
return "translate("+((i*spacing))+", "+7+")";
})
.text(function(d) {
var size = 0;
var rest = data_nest.filter(function(s) { return s.key == fmt(x.invert(d)) });
if (rest.length > 0) {
size = rest[0].values.length;
} else {
size = 0;
}
return size;
});
circles.transition()
.duration(1000)
.attrTween("d", function(d) {
var size = 0;
var rest = data_nest.filter(function(s) { return s.key == fmt(x.invert(d)) });
if (rest.length > 0) {
size = rest[0].values.length;
} else {
size = 0;
}
return arcTween({startAngle:0, endAngle: pie(size)});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment