xxxxxxxxxx<meta charset="utf-8"><style>.arc text { font: 10px sans-serif; text-anchor: middle;}.arc path { stroke: #fff;}.icon-svg { fill: #2980b9;}</style><body><script src="//d3js.org/d3.v3.min.js"></script><script>var width = 960, height = 560, radius = (height) / 2 - 30;var color = d3.scale.ordinal() .range(["#2980b9", "#2ecc71", "#7b6888"]);var color_sub = d3.scale.ordinal() .range(["#2980b9", "#2ecc71", "#7b6888", "purple"]);var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(radius - 120);var sub_arc = d3.svg.arc() .outerRadius(radius - 6) .innerRadius(radius + 10);var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.percentage; }) .startAngle([5.37]) .endAngle([5.37 + Math.PI * 2]);var sub_pie = d3.layout.pie() .sort(null) .value(function(d) { return d.percentage; }) .startAngle([5.37]) .endAngle([10.33]);var svg = d3.select("body") .append("div") .attr("width", width) .attr("height", height) .classed("svg-container", true) .append("svg") .attr("width", width) .attr("height", height) .classed("svg", true) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var icon_width = 128 + 32, icon_height = 128 + 32;d3.select(".svg") .append("g") .classed("icon-container", true) .append("svg") .classed("icon-svg", true) .attr("width", icon_width) .attr("height", icon_height) .attr("viewBox", function(d, i ){ // "0 0 64 64" return 0 + " " + 0 + " " + 64 + " " + 64; }) .append("path") .attr("d", "M40.067 20.573c0 4.557-3.699 8.25-8.26 8.25-4.556 0-8.249-3.694-8.249-8.25s3.693-8.25 8.249-8.25c4.561-0 8.26 3.694 8.26 8.25z")d3.select(".icon-svg") .append("path") .attr("d", "M31.82 0.524c-3.818 0-9.151 1.522-13.014 5.385l4.588 8.359c1.963-2.491 5.008-4.090 8.426-4.090 3.459 0 6.537 1.634 8.498 4.175l4.5-8.636c-3.343-3.653-9.338-5.192-12.998-5.192zM35.22 6.662h-2.136v2.134h-2.566v-2.134h-2.136v-2.565h2.136v-2.143h2.566v2.143h2.136v2.565z")d3.select(".icon-svg") .append("path") .attr("d", "M20.966 43.651h2.113l-3.018 10.344h23.581l-3.004-10.344h2.115l3.023 10.344h6.939l-4.736-15.672c-0.74-2.587-3.984-7.142-9.582-7.28l-12.87-0.011c-5.725 0.028-9.037 4.672-9.786 7.29l-4.828 15.672h7.037l3.016-10.343z")d3.select(".icon-svg") .append("path") .attr("d", "M0.947 57.293h61.73v5.873h-61.73v-5.873z")d3.select(".icon-container") .attr("transform", "translate(" + ((width / 2) - icon_width/2) + "," + ((height / 2) - icon_height/ 2) + ")");d3.csv("skilled_asst.csv", type, function(error, data) { if (error) throw error; console.log(data); console.log(pie(data)); var data_sub = [{attendant: "Doctor", percentage: 59}, {attendant: "Nurse", percentage: 10}, {attendant: "LHV", percentage: 8}, {attendant: "CMW", percentage: 2}]; console.log(sub_pie(data_sub)); var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); var g_sub = svg.selectAll(".sub_arc") .data(sub_pie(data_sub)) .enter().append("g") .attr("class", "sub_arc"); g.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data.attendant); }); g_sub.append("path") .attr("d", sub_arc) .style("fill", function(d) { return color_sub(d.data.attendant); }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.data.attendant; }) .style("fill", "white");});function type(d) { d.percentage = +d.percentage; return d;}</script> https://d3js.org/d3.v3.min.js