I am new to JS and looking at the charts on http://d3js.org/ and I am having trouble understanding how to manipulate them. Basically I want to use the animated donut chart but I only want to display a half circle as well as different heights for each attribute(section in the pie). I have taken a look at some of the other tutorials and I just can't seem to wrap my head around it, any help would be greatly appreciated.here is the code I am using:\[code\]<!DOCTYPE html><meta charset="utf-8"><style>body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto;position: relative;width: 960px;}text { font: 10px sans-serif;}form { position: absolute; right: 10px; top: 10px;}</style><form> <label><input type="radio" name="dataset" value="http://stackoverflow.com/questions/15675753/apples" checked> Apples</label> <label><input type="radio" name="dataset" value="http://stackoverflow.com/questions/15675753/oranges"> Oranges</label></form><script src="http://d3js.org/d3.v3.min.js"></script><script>var dataset = { apples: [53245, 28479, 19697, 24037, 40245], oranges: [200, 200, 200, 200, 200]};var width = 960, height = 500, radius = Math.min(width, height) / 2;var color = d3.scale.category20();var pie = d3.layout.pie() .sort(null);var arc = d3.svg.arc() .innerRadius(radius - 100) .outerRadius(radius - 20);var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var path = svg.selectAll("path") .data(pie(dataset.apples)) .enter().append("path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc);d3.selectAll("input").on("change", change);var timeout = setTimeout(function() { d3.select("input[value=http://stackoverflow.com/"oranges\"]").property("checked", true).each(change);}, 2000);function change() { clearTimeout(timeout); path = path.data(pie(dataset[this.value])); // update the data path.attr("d", arc); // redraw the arcs}</script>\[/code\]any help is appreciated!
Create a semi circle pie char with variable attribute heights
- Thread starter soaseparo
- Start date