Haroenv · December 11, 2016 19:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 .arc text {
  font: 10px sans-serif;
  text-anchor: middle;
 }

 .arc path {
  stroke: #fff;
 }
 </style>

 <body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
  let data = [{
    label: '<5 ',
    value: 2704659
  }, {
    label: '5-13 ',
    value: 4499890
  }, {
    label: '14-17 ',
    value: 2159981
  }, {
    label: '18-24 ',
    value: 3853788
  }, {
    label: '25-44 ',
    value: 14106543
  }, {
    label: '45-64 ',
    value: 8819342
  }, {
    label: '≥65 ',
    value: 612463
  }];

  const width = 500;
  const height = 500;
  const radius = Math.min(width, height) / 2;

  const color = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

  const arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

  const pie = d3.pie()
    .sort(null)
    .value(d => d.value);

  const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", `translate(${width / 2},${height / 2})`);

  const g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

  g.append("path")
    .attr("d", arc)
    .style("fill", d => color(d.data.label));

  g.append("text")
    .attr("transform", (d) => `translate(${arc.centroid(d)})`)
    .attr("dy", ".35em")
    .text((d) => d.data.label);

  g.append("text")
    .attr("transform", (d) => {
      console.log(d);
      return `translate(${arc.centroid(d)})`;
    })
    .attr("dy", ".35em")
    .text((d) => d.data.value);
  </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.arc text {
	font: 10px sans-serif;
	text-anchor: middle;
	}

	.arc path {
	stroke: #fff;
	}
	</style>

	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	let data = [{
	label: '<5 ',
	value: 2704659
	}, {
	label: '5-13 ',
	value: 4499890
	}, {
	label: '14-17 ',
	value: 2159981
	}, {
	label: '18-24 ',
	value: 3853788
	}, {
	label: '25-44 ',
	value: 14106543
	}, {
	label: '45-64 ',
	value: 8819342
	}, {
	label: '≥65 ',
	value: 612463
	}];

	const width = 500;
	const height = 500;
	const radius = Math.min(width, height) / 2;

	const color = d3.scaleOrdinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

	const arc = d3.arc()
	.outerRadius(radius - 10)
	.innerRadius(radius - 70);

	const pie = d3.pie()
	.sort(null)
	.value(d => d.value);

	const svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", `translate(${width / 2},${height / 2})`);

	const g = svg.selectAll(".arc")
	.data(pie(data))
	.enter().append("g")
	.attr("class", "arc");

	g.append("path")
	.attr("d", arc)
	.style("fill", d => color(d.data.label));

	g.append("text")
	.attr("transform", (d) => `translate(${arc.centroid(d)})`)
	.attr("dy", ".35em")
	.text((d) => d.data.label);

	g.append("text")
	.attr("transform", (d) => {
	console.log(d);
	return `translate(${arc.centroid(d)})`;
	})
	.attr("dy", ".35em")
	.text((d) => d.data.value);
	</script>
	</body>