:: Redial Line Chart ::

This is simple redial line chart created by taking random music album facebook name with random count.

#index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> :: Redial Line Chart :: </title> </head> <body> <div style="margin:20px auto;width:300px" id="rcharts" > <h1> :: Redial Line Chart :: </h1></div> <script src="http://d3js.org/d3.v3.min.js"></script> <style> body{ font-family: 'Open Sans Condensed','Arial Narrow', serif; background: #ddd url(../images/egg_shell.jpg) repeat top left; font-weight: 400; font-size: 15px; color: #333; overflow: scroll; overflow-x: hidden; } </style> <script type="text/javascript"> var dt = [{"term":"Zombieland","count":9}, {"term":"Wieners","count":8}, {"term":"Toy Story","count":8}, {"term":"trashkannon","count":7}, {"term":"the GROWLERS","count":6}, {"term":"mudweiser","count":6}, {"term":"ThunderCats","count":4}, {"term":"The Taqwacores - Motion Picture","count":4}, {"term":"The Shawshank Redemption","count":2}, {"term":"The Olivia Experiment","count":1}]; var types=[{name:"Music",color : "#009999",dcolor:"#006666"}]; var width = 300, height = 450, twoPi = 2 * Math.PI, progress = 0, total = 1308573, // must be hard-coded if server doesn't report Content-Length formatPercent = d3.format(".0%"); var svg = d3.select("#rcharts").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 10 + "," + height / 10 + ")"); var baseRad=4, cgap=12,maxVal=11; var cx1=100,cy1=150,el="p0",cl="c0",ind=0,rad; rad=baseRad; svg.selectAll(".p0") .data(dt) .enter() .append("path") .each(ringEnter); rad=baseRad; svg.selectAll(".C0").data(dt) .enter() .append("circle") .each(cEnter); var txtxas= svg.selectAll(".txC0").data(dt) .enter() .append("svg:text") .attr("class", "Today") .style("font-size", "11px") .style("font-family", "calibri") .style("fill",types[ind].dcolor) .attr("transform", function(d, i) { var xx=cx1-3; return "translate("+xx+","+(dt.length*(cgap-2)-((cgap)*i))+")"; }) .attr("text-anchor", "end") .text( function(d, i) { return getSnip(d.term,31) }); txtxas.append("title") .text(function(d) { return d.term+" ("+d.count+")"; }); svg.append("svg:text") .attr("class", "Today") .style("font-size", "26px") .style("fill",types[ind].dcolor) .style("font-family", "Iceland") .attr("transform", function(d, i) { return "translate("+(cx1-30)+","+(cy1+8)+")"; }) .text(types[ind].name); function ringEnter(d, i) { var ratio = d.count/maxVal; var arc = d3.svg.arc().startAngle(0).innerRadius(5+cgap*rad). outerRadius(5+cgap*rad+1).endAngle(twoPi*ratio); d3.select(this) .attr("transform", "translate(" + cx1 + "," + cy1+ ")") .attr("class",el) .attr("d", arc) .style("fill",types[ind].color); rad++; } function cEnter(d, i) { var ratio = d.count/maxVal; // console.log(ratio); d3.select(this) .attr("transform", "translate(" + cx1 + "," + cy1 + ")") .attr("class",cl) .attr("cx",function(d,i) { return (5+cgap*rad)*Math.cos(twoPi*ratio-twoPi/4);}) .attr("cy",function(d,i) { return (5+cgap*rad)*Math.sin(twoPi*ratio-twoPi/4);}) .style("fill",types[ind].dcolor) .attr("r", 3); rad++; } function getSnip(text, len) { if(text.length > len) return text.substring(0,len) +".."; else return text; } </script> </body> </html>

Created by : Anil Omanwar