title: d3.js create the pie chart but square shaped
body: <p>Just started using d3.js and javascript. I have this weird chart requirement. Want to create the chart exactly like pie chart but, in square shaped. Just like below.</p>
  
  <p><a href="https://i.stack.imgur.com/8Ix1y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Ix1y.png" alt="enter image description here"></a></p>
  
  <p>So, I thought, may be I create the pie chart and add the square between the pie chart and erase the part outside square. But, it is not working out yet. </p>
  
  <p>Secondly, I thought, I can do this with CSS. I did this. But, I am not happy with this solution. It is too hacky. Can someone help me with good solution.</p>
  
  <p><a href="http://jsfiddle.net/chaitanya_sw/0fkozg22/5/" rel="nofollow noreferrer">This is my jsfiddle link.</a></p>
  
  <pre><code>//// Done this to create the square.
  var svgContainer = d3.select("#square").append("svg")
                         .attr("width", 200)
                         .attr("height", 200);
  
  var rectangle = svgContainer.append("rect")
                      .attr("x", 0)
                      .attr("y", 0)
                      .attr("width", 200)
                      .attr("fill", '#ec4c4a')
                      .attr("height", 200); 
  
  // Done this to create the pie chart. Found this example some where.
  var element_id = 'pie'
  var elementSelector = '#pie';
  
          svgWidth = 390;
          svgHeight = 320;
          svgInnerRadius = 0;
          svgOuterRadius = 145;
          heightOffset = 0;
          scoreFontSize = '49px';
  
          $(elementSelector).replaceWith('&lt;svg id="'+ element_id +'" class="scoreBar" width="'+ svgWidth +'" height="'+ (svgHeight - heightOffset) +'"&gt;&lt;/svg&gt;');
          $(elementSelector).css({'width': svgWidth + 'px', 'height': (svgHeight-heightOffset) + 'px'});
          var anglePercentage = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
          var fullAnglePercentage = 100;
          var color = d3.scale.ordinal().range(["#ACACAC", "#EAEAEA", "#123123", "#DDEEAA", "#BACBAC"]);
  
          data = [[50, 90, 1],
                  [50, 30, 2],
                  [30, 10, 3],
                  [10, -1, 4],
                  [-1, -10, 5]]
  
          var vis = d3.select(elementSelector);
          var arc = d3.svg.arc()
                      .innerRadius(svgInnerRadius)
                      .outerRadius(svgOuterRadius)
                      .startAngle(function(d){return anglePercentage(d[0]);})
                      .endAngle(function(d){return anglePercentage(d[1]);});
  
  
          vis.selectAll("path")
             .data(data)
             .enter()
             .append("path")
             .attr("d", arc)
             .style("fill", function(d){return color(d[2]);})
             .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")");
  </code></pre>
  
  <p>Thanks in advance.</p>