Donut-Chart-with-gRaphaël.markdown

Donut Chart with D3

Using d3.js and custom html

index.html

 <!-- TODO: port inline style to css -->
 <div class="image-upload-container profile-user-photo-container" style="width: 320px; height: 320px; z-index:300">
    <!-- profile image output-->
    <img class="profile-user-photo" id="user-profile-image"
         src="http://52.6.119.161/uploads/profile_image/ba502dda-cdd9-4038-bb2b-72948de10437.jpg?cacheId=0"
         data-src="holder.js/320x320" alt="320x320" style="width: 320px; height: 320px; z-index: 200"/>
    
    <!-- Chart HTML -->
    <div id="chart-holder"> 
        <div id="chart-percent">15</div><!-- we still need to add the % mark with css:after class -->
        <div id="chart-center"></div>
        <div id="chart"></div>
    </div>
</div>

script.js

var width = 90,
    height = 90,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#128BD3", "rgba(200,200,220,0.5)"]);

var arc = d3.svg.arc()
    .outerRadius(radius )
    .innerRadius(radius - 17);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var data = [{ 'population': 15 }, { 'population': 85 },];

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.population); });

style.css

#user-profile-image{
  z-index: 2;
  position: relative;
}

#chart-holder{
  position: relative;
}

#chart{
  border: 1px solid blue;
  width: 89px;
  height: 89px;
  position: absolute;
  margin-top: -46px;
  right: 0;
  z-index: 3000;
}

#chart-percent{
 height: 56px;
  width: 56px;
  right: 8px;
  top: -23px;
  z-index: 3003;
  position: absolute;  
  color: #128BD3;
  font-size: 38px;
}

#chart-center{
  height: 56px;
  width: 56px;
  right: 15px;
  top: -28px;
  z-index: 3001;
  position: absolute;
   background: #fff;
   border-radius:50%;
}