|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
|
|
</head> |
|
<div id="option"> |
|
<input name="updateButton" |
|
type="button" |
|
value="Next" |
|
align="middle" |
|
onclick="Next()" /> |
|
<div id="option"> |
|
<body> |
|
Click the button to start |
|
<!-- How to use buttons |
|
http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html --> |
|
|
|
<script> |
|
// pie chart example : |
|
// http://bl.ocks.org/mbostock/3887235 |
|
|
|
var w = 400; |
|
var h = 400; |
|
var radius = Math.min(w,h) / 2; |
|
|
|
|
|
|
|
var data = [[{"label":"Male", "value":70}, {"label":"Female", "value":30}], |
|
[{"label":"Male", "value":62}, {"label":"Female", "value":37},{"label":"Not Disclosed","value":1}], |
|
[{"label":"Male", "value":70}, {"label":"Female", "value":30}], |
|
[{"label":"Male", "value":69}, {"label":"Female", "value":31}], |
|
[{"label":"Male", "value":61}, {"label":"Female", "value":39}], |
|
[{"label":"Male", "value":70}, {"label":"Female", "value":30}], |
|
[{"label":"Male", "value":58}, {"label":"Female", "value":42}] |
|
|
|
]; |
|
var Companies = ["Apple","Yahoo","Google","Facebook","LinkedIn","Twitter","Ebay"]; |
|
|
|
var CompanyCounter=-1; //loop through the companies |
|
|
|
var arc = d3.svg.arc() |
|
.outerRadius(radius - 50) |
|
.innerRadius(0); |
|
|
|
var labelArc = d3.svg.arc() |
|
.outerRadius(radius - 40) |
|
.innerRadius(radius - 40); |
|
|
|
//Basic svg |
|
var svg = d3.select("body").append("svg") |
|
.attr("width", w) |
|
.attr("height",h) |
|
.append("g") |
|
.attr("transform", "translate(" + w/ 2 + "," + h/ 2 + ")"); |
|
|
|
var pie = d3.layout.pie() |
|
.sort(null) |
|
.value(function(d) { return d.value; }); |
|
|
|
|
|
// Draws the piechart |
|
function Outside() { |
|
|
|
|
|
svg.selectAll("*").remove(); //Clear previous state |
|
//https://stackoverflow.com/questions/10784018/how-can-i-remove-or-replace-svg-content#10911546 |
|
|
|
var color = d3.scale.category10(); |
|
g = svg.selectAll(".arc") |
|
|
|
.data(pie(data[CompanyCounter])) |
|
.enter().append("g") |
|
.attr("class", "arc"); |
|
|
|
g.append("path") |
|
.attr("d", arc) |
|
.style("fill", function(d) { return color(d.value); }); |
|
|
|
//adding text |
|
//https://jsfiddle.net/ragingsquirrel3/qkHK6/ |
|
g.append("svg:text").attr("transform", |
|
function(d){return "translate(" + arc.centroid(d) + ")";}) |
|
.attr("text-anchor", "middle") |
|
.text( function(d, i) {return data[CompanyCounter][i].label;}); |
|
|
|
//add title |
|
svg.append("text") |
|
.attr("x", 0 ) |
|
.attr("y", -170) |
|
.attr("text-anchor", "middle") |
|
.style("font-size", "20px") |
|
.style("text-decoration", "bold") |
|
.text("Workforce by Gender : " + Companies[CompanyCounter]); |
|
|
|
|
|
|
|
} |
|
//is being called after each button signal |
|
|
|
function Next(){ |
|
if (CompanyCounter==6){ |
|
CompanyCounter =0; |
|
} |
|
else{ |
|
CompanyCounter++; |
|
} |
|
|
|
Outside(); |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
</body> |
