Added pie chart

js/app.js

@@ -23,17 +23,17 @@ app.value("allData",{
             "Sales":{
                 "Laptop": 50000,
                 "Mobile": 40000,
-                "E-reader": 8000
+                "E-reader": 25000
             },
             "Orders":{
                 "Laptop": 600,
                 "Mobile": 300,
-                "E-reader": 50
+                "E-reader": 250
             },
             "Revenue":{
                 "Laptop": 8000,
                 "Mobile": 12000,
-                "E-reader": 800
+                "E-reader": 5000
             }
         }
     },

js/draw-chart.js

@@ -3,7 +3,7 @@ function drawChart(type,data,axisLabel) {
   var typeMapping = {
     "column" : drawColumnChart,
     "bar" : drawBarChart,
-    // "pie" : drawPieChart
+    "pie" : drawPieChart
   };
   if (typeof(type) === "string"){
     var drawFunc = typeMapping[type.toLowerCase()];
@@ -92,14 +92,14 @@ function drawColumnChart(data,axisLabel)
       .on('mouseout', function () {
         tip_points.hide.apply(this,arguments);
 
-   });
+      });
 
 }
 
 function drawBarChart(data,axisLabel){
   var eleChart = d3.select(".chart").html(""),
       eleChartBbox = eleChart.node().getBoundingClientRect(),
-      margin = {top: 15, right: 30, bottom: 60, left: 80},
+      margin = {top: 15, right: 80, bottom: 60, left: 80},
       width = +eleChartBbox.width - margin.left - margin.right,
       height = +eleChartBbox.height - margin.top - margin.bottom;
 
@@ -109,7 +109,8 @@ function drawBarChart(data,axisLabel){
       y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
 
   var g = svg.append("g")
-      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+      .attr("width",width).attr("height",height);;
 
 
   x.domain([0, d3.max(data, function(d) { return d.x; })]);
@@ -155,7 +156,9 @@ function drawBarChart(data,axisLabel){
 
   var tip_points = d3.tip()
     .attr('class', 'd3-tip')
-    .html(function(d) { return d.x; });
+    .html(function(d) { return d.x; })
+    .direction("e")
+    .offset([0,10]);
 
   var vis = svg.call(tip_points);
 
@@ -178,12 +181,112 @@ function drawBarChart(data,axisLabel){
 
 }
 
+function drawPieChart (data,axisLabel) {
+    var eleChart = d3.select(".chart").html(""),
+      eleChartBbox = eleChart.node().getBoundingClientRect(),
+      margin = {top: 10, right: 15, bottom: 50, left: 15},
+      width = +eleChartBbox.width - margin.left - margin.right,
+      height = +eleChartBbox.height - margin.top - margin.bottom,
+      radius = Math.min(width, height) / 2;
+
+    var color = d3.scaleOrdinal().domain(data.map(function(d){return d.x}))
+    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+    var arc = d3.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+    var pie = d3.pie()
+    .sort(null)
+    .value(function(d) { return d.y; });
+
+    var svg = eleChart.append("svg")
+    .attr("width",eleChartBbox.width)
+    .attr("height",eleChartBbox.height)
+
+    var g = svg
+    .append("g")
+    .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
+    .attr("width", width)
+    .attr("height", height);
 
 
+    var groupArc = g.selectAll(".arc")
+    .data(pie(data))
+    .enter().append("g")
+    .attr("class", "arc");
+
+    groupArc.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) {return color(d.data.x); });
+
+    groupArc.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.x; })
+    .style("fill", "white");
+
+    var xLabel = axisLabel[0];
+    var yLabel = axisLabel[1];
+
+    svg
+    .append('g').classed("title",true)
+    .attr('transform', 'translate(' + (width/2 + margin.left/2) + ', ' + (eleChartBbox.height - margin.bottom/2 ) + ')')
+    .append('text')
+    .attr('text-anchor', 'middle')
+    .text(""+yLabel+" vs. "+xLabel);
+
+    var tip_points = d3.tip()
+    .attr('class', 'd3-tip')
+    .html(function(d) {return d.data.y; })
+    .direction(function(d){
+      var availableDirection = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+      
+      var midAngle = ((d.startAngle + d.endAngle)/2);
+      
+      var midAngle = ((d.startAngle + d.endAngle)/2)*180/Math.PI;
+      var indexDirection = Math.floor(midAngle/360 *8);
+
+      var direction = availableDirection[indexDirection];
+      console.log(direction);
+      return direction
+    })
+    .offset(function (d) {
+      var midAngle = ((d.startAngle + d.endAngle)/2);
+
+      midAngle = Math.floor(midAngle/(Math.PI*2/8))*(Math.PI*2/8);
+      midAngle = midAngle - Math.PI/2;
+      
+      var extraRadius = 15;
+      var posCentre = [-extraRadius*Math.sin(midAngle),-extraRadius*Math.cos(midAngle)];
+
+      console.log(midAngle*180/Math.PI);
+      console.log(posCentre);
+      return posCentre;
+    })
+
+    var vis = svg.call(tip_points);
+
+    groupArc
+    .on('mouseover', function () {
+      // console.log([event,this])
+      if ("path" === event.target.nodeName)
+      {
+        tip_points.show.apply(this,arguments);
+      }
+
+    })
+    .on('mouseout', function () {
+      if ("path" === event.target.nodeName)
+      {
+        tip_points.hide.apply(this,arguments);
+      }
+
+    });
 
 
-
+}
-
 
 function cleanChart() {
   var eleChart = d3.select(".chart").html("");

style.css

@@ -149,11 +149,15 @@ ul.unstyled-list
 
 /* d3 styles*/
 .bar {
-  fill: steelblue;
+    fill: steelblue;
 }
 
-.bar:hover {
+.bar:hover,.arc:hover path{
-  fill: brown;
+    -webkit-transition: fill 0.5s;
+    -o-transition: fill 0.5s;
+    transition: fill 0.5s;
+    
+    fill: brown !important;
 }
 
 .axis--x path {