diff options
| -rw-r--r-- | public/css/default.css | 4 | ||||
| -rw-r--r-- | public/js/d3funcs.js | 60 |
2 files changed, 63 insertions, 1 deletions
diff --git a/public/css/default.css b/public/css/default.css index 6769b31..fae8452 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -2,6 +2,10 @@ body { font: 10px sans-serif; } +arc path { + stroke: #fff; +} + .axis path, .axis line { fill: none; diff --git a/public/js/d3funcs.js b/public/js/d3funcs.js index f7f698d..ec6699d 100644 --- a/public/js/d3funcs.js +++ b/public/js/d3funcs.js @@ -94,4 +94,62 @@ show_bargraph = function(datasource, title, xLabel, yLabel, yFormat, width, heig d.y = +d.y; return d; } -} +}; + +show_piechart = function(datasource, title, yFormat, width, height) { + + var margin = {top: 40, right: 20, bottom: 30, left: 40}; + + if (!width) { + width = 960; + } + if (!height) { + height = 500; + } + width -= margin.left + margin.right; + height -= margin.top + margin.bottom; + + var width = 960, + height = 500, + radius = Math.min(width, height) / 2; + + var color = d3.scale.ordinal() + .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); + + var arc = d3.svg.arc() + .outerRadius(radius - 10) + .innerRadius(0); + + var pie = d3.layout.pie() + .sort(null) + .value(function(d) { return d.y; }); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height) + .append("g") + .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); + + d3.tsv(datasource, function(error, data) { + + data.forEach(function(d) { + d.y = +d.y; + }); + + 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.x); }); + + 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.x; }); + + }); +}; |