Semi Arc Pie Chart with d3

by Felipe Alfaro

HTML

<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<div id="chart">

</div>

CSS

.slice text {
            font-size: 15px;
            color:#fff;
        }

JavaScript

var width = 368;
var height = 364; //this is the double because are showing just the half of the pie
var radius = Math.min(width, height) / 2;

//array of colors for the pie (in the same order as the dataset)
var color = d3.scaleOrdinal()
  .range(['yellow', '#be1522', '#3aaa35', '#0e71b8', '#f39200']);
 
    data = [
    				{ label: 'CDU', value: 1 },
            { label: 'SPD', value: 1 },
            { label: 'Die Grünen', value: 1 },
            { label: 'Die Mitte', value: 1 },
            { label: 'Frei Wähler', value: 1}
            ];
    
    var vis = d3.select("#chart")
                .append("svg")              //create the SVG element inside the <body>
                .data([data])                   //associate our data with the document
                .attr("width", width)           //set the width and height of our visualization (these will be attributes of the <svg> tag
                .attr("height", height)
                .append("svg:g")                //make a group to hold our pie chart
                .attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');    //move the center of the pie chart from 0, 0 to radius, radius
 
    var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
    						 .innerRadius(79)
  								.outerRadius(radius);
 
    var pie = d3.layout.pie()           //this will create arc data for us given a list of values
                .startAngle(-90 * (Math.PI/180))
                .endAngle(90 * (Math.PI/180))
                .padAngle(.02) // some space between slices
  	        	  .sort(null) //No! we don't want to order it by size
                .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array
 
    var arcs = vis.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
                    .data(pie)  //associate the generated pie data (an array...