title: How can I rotate d3 chart and how can I start pie chart from angle -90?
body: <p><strong>I made a circle using d3 js with padding. Now, I want this chart start from angle -90</strong></p>
  
  <p>I've attached my code and output as well. also I've attached my expected output. 
  You can check it here.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      body {
          font-family: sans-serif;
          margin-top: 25px;
          font-size: 18px;
      }
  
      .monthArc {
          fill: #cc3333;
      }
  
      .monthText {
          fill: #FFF;
          font-size: 34px;
          font-weight: 500;
      }
  &lt;/style&gt;
  
  &lt;div id="chart"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      var screenWidth = window.innerWidth;
      // var color = d3.scale.category20c();
  
      var margin = {
      left: 25,
      top: 25,
      right: 25,
      bottom: 25
      },
      width = Math.min(screenWidth, 600) - margin.left - margin.right,
      height = Math.min(screenWidth, 600) - margin.top - margin.bottom;
  
      //The start date number and end date number of the months in a year
      var month_space = "\x09\x20\u00A0 ";
      var monthData = [{
          month: "T"+month_space+"E"+month_space+"X"+month_space+"T"
          }, {
          month: "T"+month_space+"E"+month_space+"X"+month_space+"T"+month_space+"1"
          }
      ];
  
      var svg = d3.select("#chart").append("svg")
      .attr("width", (width + margin.left + margin.right))
      .attr("height", (height + margin.top + margin.bottom))
      .attr("class", "wrappersvg")
      .append("g").attr("class", "wrapper")
      .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");
  
      //Creates a function that makes SVG paths in the shape of arcs with the specified inner and outer radius 
      var arc = d3.svg.arc()
      .innerRadius(width * 0.9 / 2)
      .outerRadius(width * 0.9 / 2 + 50);
  
      //Creates function that will turn the month data into start and end angles
      var pie = d3.layout.pie()
      .value(function(d) {
          return 180;
      })
      .padAngle(.01)
      .sort(null);
  
      //Draw the arcs themselves
      svg.selectAll(".monthArc")
      .data(pie(monthData))
      .enter().append("path")
      .attr("class", "monthArc")
      .attr("id", function(d, i) {
          return "monthArc_" + i;
      })
      .attr("d", arc);
  
      //Append the month names within the arcs
      svg.selectAll(".monthText")
      .data(monthData)
      .enter().append("text")
      .attr("class", "monthText")
      .attr("x", 0) //Move the text from the start angle of the arc
      .attr("dy", 36) //Move the text down
      .append("textPath")
      .attr("text-anchor", "middle")
      .attr("startOffset",function(d,i){return "26%";})
      .attr("xlink:href", function(d, i) {
          return "#monthArc_" + i;
      })
      .text(function(d) {
          return d.month;
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/45BUX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/45BUX.png" alt="current output"></a></p>
  
  <p><a href="https://i.stack.imgur.com/TJtcV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TJtcV.png" alt="expected output"></a></p>
  
  <p>How can I do this?</p>