99 lines
No EOL
2.6 KiB
HTML
99 lines
No EOL
2.6 KiB
HTML
<style>
|
|
|
|
.arc path {
|
|
stroke: #fff;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
var width = 250,
|
|
height = 250,
|
|
radius = Math.min(width, height) / 2;
|
|
|
|
var color = d3.scale.ordinal()
|
|
.range(["#5254a3", "#6b6ecf", "#9c9ede "]);
|
|
|
|
var arc = d3.svg.arc()
|
|
.outerRadius(radius - 10)
|
|
.innerRadius(0);
|
|
|
|
var pie = d3.layout.pie()
|
|
.sort(null)
|
|
.value(function (d) {
|
|
return d.value;
|
|
});
|
|
|
|
// Where to put the chart
|
|
var svg = d3.select("#events_tracks_new").append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
.append("g")
|
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
|
|
|
var data =
|
|
<
|
|
%= raw
|
|
@
|
|
track_state['new'].to_json % >;
|
|
|
|
var g = svg.selectAll(".arc")
|
|
.data(pie(data))
|
|
.enter().append("g")
|
|
.attr("class", "arc");
|
|
|
|
g.append("path")
|
|
.attr("d", arc)
|
|
.style("fill", function (d) {
|
|
return color(d.data.status);
|
|
});
|
|
|
|
// Put text inside every piece of the pie-chart
|
|
g.append("text")
|
|
.attr("transform", function (d) {
|
|
return "translate(" + arc.centroid(d) + ")";
|
|
})
|
|
.attr("dy", ".35em")
|
|
.style("text-anchor", "middle")
|
|
.text(function (d) {
|
|
return d.data.status;
|
|
});
|
|
|
|
// Title of chart
|
|
svg.append("text")
|
|
.attr("class", "title")
|
|
.attr("x", radius)
|
|
.attr("y", -radius + 10)
|
|
.text("% of pre-registered");
|
|
|
|
// Create & position legend
|
|
var legend = d3.select("#events_tracks_new").append("svg")
|
|
.attr("class", "legend")
|
|
.attr("width", radius * 2)
|
|
.attr("height", radius)
|
|
.selectAll("g")
|
|
.data(color.domain().slice().reverse())
|
|
.enter().append("g")
|
|
.attr("transform", function (d, i) {
|
|
return "translate(0," + i * 20 + ")";
|
|
});
|
|
|
|
legend.append("rect")
|
|
.attr("width", 18)
|
|
.attr("height", 18)
|
|
.style("fill", color);
|
|
|
|
legend.append("text")
|
|
.attr("x", 24)
|
|
.attr("y", 9)
|
|
.attr("dy", ".15em")
|
|
.text(function (d) {
|
|
return d + " (" + data.filter(function (v) {
|
|
return v.status === d;
|
|
})[0].value + " or " + data.filter(function (v) {
|
|
return v.status === d;
|
|
})[0].percent + "%)";
|
|
});
|
|
|
|
</script> |