piechart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
     font-family: "Tahoma",sans-serif;}
    svg { width:100%; height: 100% }
    
    #show{
      
      display: initial;
    }
    
    #hidden {
      
      display: none;
    }
    
  </style>
</head>

<body>
  
  <h1> PRODUCT</h1>
  <script>

//DATASET    
var wholePopulation = [
		{ "sample": "Finnish HHs", "percentage": 100, "amount": 1871000 }
	];

var pieXcenter = w/2;
var pieYcenter = h/2;

//wholePopulation
  
    var outerRadiusWholePopulation = 0;
		var innerRadiusWholePopulation = w / 9;
    
    var arcWholePopulation = d3.svg.arc()
        .innerRadius(innerRadiusWholePopulation)
        .outerRadius(outerRadiusWholePopulation);
    
    var arcsWholePopulation = svg.selectAll("#wholePopulation")
        .data(pie(wholePopulation))
        .enter()
        .append("g")
        .attr("class", "clickWholePopulation")
    		.attr("id", "show")
        .attr("transform", "translate(" + pieXcenter + "," + pieYcenter + ")");
    
     arcsWholePopulation.append("path")
        .attr("fill", function(d,i) {return color1(i); })
        .attr("d", arcWholePopulation)
    		.on("mouseover", function(d) { return d3.select(this).attr("stroke", "yellow").attr("stroke-width", 2);})
    		.on("mouseout", function(d) { return d3.select(this).attr("stroke", "none").attr("stroke-width", 2);});
    
        arcsWholePopulation.append("text")
        .attr("transform", function(d) { return "translate(" + arcWholePopulation.centroid(d) + ")"; })
        .attr("text-anchor", "middle")
        .attr("class", "value")
        .text(function(d) { return d.value;})
        .attr("fill", "black");
    
//inGeneral    
    
    var outerRadiusInGeneral = w / 4.9;
    var innerRadiusInGeneral = w / 9;

var arcInGeneral = d3.svg.arc()
        .innerRadius(innerRadiusInGeneral)
        .outerRadius(outerRadiusInGeneral);

var arcsInGeneral = svg.selectAll("#inGeneral")
        .data(pie(inGeneral))
        .enter()
        .append("g")
        .attr("class", "clickInGeneral")
    		.attr("id", "hidden")
        .attr("transform", "translate(" + pieXcenter + "," + pieYcenter + ")");

arcsInGeneral.append("path")
        .attr("fill", function(d,i) {return color2(i); })
        .attr("d", arcInGeneral)
    		.on("mouseover", function(d) { return d3.select(this).attr("stroke", "yellow").attr("stroke-width", 2);})
    		.on("mouseout", function(d) { return d3.select(this).attr("stroke", "none").attr("stroke-width", 2);});

arcsInGeneral.append("text")
        .attr("transform", function(d) { return "translate(" + arcInGeneral.centroid(d) + ")"; })
        .attr("text-anchor", "middle")
        .text(function(d) { return d.value;})
        .attr("fill", "black");

//ourProduct    
    
    var outerRadiusOurProduct = w / 3.3;
    var innerRadiusOurProduct = w / 4.9;

var arcOurProduct = d3.svg.arc()
        .innerRadius(innerRadiusOurProduct)
        .outerRadius(outerRadiusOurProduct)
    		//.startAngle(function(d) { return cScale(d.startAmount); })
        //.endAngle(function(d) { return cScale(d.endAmount); })
    		;

var arcsOurProduct = svg.selectAll("#ourProduct")
        .data(pieOurProduct(ourProduct))
        .enter()
        .append("g")
    		.attr("class", "clickOurProduct")
    		.attr("id", "hidden")
        .attr("transform", "translate(" + pieXcenter + "," + pieYcenter + ")");

arcsOurProduct.append("path")
        .attr("fill", function(d,i) {return color3(i); })
        .attr("d", arcOurProduct)
    		.on("mouseover", function(d) { return d3.select(this).attr("stroke", "yellow").attr("stroke-width", 2);})
    		.on("mouseout", function(d) { return d3.select(this).attr("stroke", "none").attr("stroke-width", 2);});

arcsOurProduct.append("text")
        .attr("transform", function(d) { return "translate(" + arcOurProduct.centroid(d) + ")"; })
        .attr("text-anchor", "middle")
        .text(function(d) { return d.value;})
        .attr("fill", "black");

//afterIncrease    
    
    var outerRadiusAfterIncrease = w / 2.5;
    var innerRadiusAfterIncrease = w / 3.3;

var arcAfterIncrease = d3.svg.arc()
        .innerRadius(innerRadiusAfterIncrease)
        .outerRadius(outerRadiusAfterIncrease)
    		//.startAngle(function(d) { return cScale(d.startAmount); })
        //.endAngle(function(d) { return cScale(d.endAmount); })
    		;

arcsAfterIncrease.append("text")
       	 .attr("transform", function(d) { return "translate(" + arcAfterIncrease.centroid(d) + ")"; })
       	 .attr("text-anchor", "middle")
       	 .text(function(d) { return d.value;})
       	 .attr("fill", "black");  
    
//dashed
    
    var outerRadiusOurProduct = w / 2.5;
    var innerRadiusOurProduct = w / 3.3;

var arcsOurProduct = svg.selectAll("#dashed")
        .data(pieOurProduct(ourProduct))
        .enter()
        .append("g")
        .attr("class", "clickDashed")
    		.attr("id", "hidden")
        .attr("transform", "translate(" + pieXcenter + "," + pieYcenter + ")");

arcsOurProduct.append("path")
        .attr("fill", "none") 
    		.attr("stroke", function(d,i) { if (i == 1) { return "black";}
    			else { return "none"; }})
        .attr("d", arcOurProduct)
        .attr("stroke-dasharray", function(d,i) { if (i < 2 && i > 0) { return "3,3";}
    			else { return "0,0"; }});

//SHOW & HIDE
    
    d3.select(".clickWholePopulation")
    	.on("click", function() {
 			 d3.selectAll(".clickInGeneral")
         	.attr("id", "show")
    });
    
    d3.selectAll(".clickInGeneral")
    	.on("click", function() {
 			 d3.selectAll(".clickOurProduct")
         	.attr("id", "show")
    });
    
    d3.selectAll(".clickOurProduct")
    	.on("click", function() {
 			 d3.selectAll(".clickAfterIncrease")
         	.attr("id", "show")
    });
    
    d3.selectAll(".clickAfterIncrease")
    	.on("click", function() {
 			 d3.selectAll(".clickDashed")
         	.attr("id", "show")
    });
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js