score:5

For both `startAngle` and `endAngle`, you'll have to add a quarter of a circumference, which is `Math.PI/2`:

``````.startAngle(function(d) { return d.startAngle + Math.PI/2; })
.endAngle(function(d) { return d.endAngle + Math.PI/2; });
``````

Here is a demo snippet with your code:

``````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)
.startAngle(function(d) { return d.startAngle + Math.PI/2; })
.endAngle(function(d) { return d.endAngle + Math.PI/2; });

//Creates function that will turn the month data into start and end angles
var pie = d3.layout.pie()
.value(function(d) {
return 180;
}).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;
});``````
``````body {
font-family: sans-serif;
margin-top: 25px;
font-size: 18px;
}

.monthArc {
fill: #cc3333;
}

.monthText {
fill: #FFF;
font-size: 34px;
font-weight: 500;
}``````
``````<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>``````