Test 10 for D3JS – %

var w = 400,
h = 200,
r = 90,
inner = 60,
color = d3.scale.category20();

data= [{“label”:”< 10 min.", "order":"1", "value":5.1}, {"label":"10-29 min.", "order":"2", "value":10.575819350}, {"label":"30-44 min.", "order":"3", "value":15}, {"label":"45-59 min.", "order":"4", "value":30}, {"label":"1 hr or more", "order":"5", "value":20}, ]; var total = d3.sum(data, function(d) { return d.value; }); var vis = d3.select("#chart") .append("svg:svg") .data([data]) .attr("width", w) .attr("height", h) .append("svg:g") .attr("transform", "translate(" + r * 1.1 + "," + r * 1.1 + ")") var textTop = vis.append("text") .attr("dy", ".35em") .style("text-anchor", "middle") .attr("class", "textTop") .text( "Travel Time:" ) .attr("y", -20), textMiddle = vis.append("text") .attr("dy", ".35em") .style("text-anchor", "middle") .attr("class", "textMiddle") .text( "Hover for" ) .attr("y", -5), textBottom = vis.append("text") .attr("dy", ".35em") .style("text-anchor", "middle") .attr("class", "textBottom") .text( "Detail") .attr("y", 15); var arc = d3.svg.arc() .innerRadius(inner) .outerRadius(r); var arcOver = d3.svg.arc() .innerRadius(inner + 5) .outerRadius(r + 5); var pie = d3.layout.pie() .value(function(d) { return d.order; }); var arcs = vis.selectAll("g.slice") .data(pie) .enter() .append("svg:g") .attr("class", "slice") .on("mouseover", function(d) { d3.select(this).select("path").transition() .duration(200) .attr("d", arcOver) textTop.text(d3.select(this).datum().data.label) .attr("y", -10); textMiddle.text( " " ) .attr("y", -30); textBottom.text(d3.select(this).datum().data.value.toFixed(1) + "%") .attr("y", 10); }) .on("mouseout", function(d) { d3.select(this).select("path").transition() .duration(100) .attr("d", arc); textTop.text( "TOTAL" ) .attr("y", -10); textMiddle.text( " " ) .attr("y", -30); textBottom.text(total.toFixed(1) + "%"); }); arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); } ) .attr("d", arc); [/d3-source]

Share this page…Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on TumblrDigg thisShare on RedditEmail this to someonePrint this page

Be the first to comment on "Test 10 for D3JS – %"

Leave a comment

Democracy thrives on participation; please share your thoughts!
Your email address will not be published. Required fields are marked *

Your email address will not be published.


*