:: 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>
:: Redial Line Chart ::

#index.html

Created by : Anil Omanwar
