This data is from UCI Machine Learning Repository: Abalone Data Set .
This data set mainly describes the Sex/Length/Diameter/Height/WHole weight/Shucked weight/Viscera weight/Shell weight/RIngs of abolonies.
forked from curran's block: Donut Chart
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<title>Pie Chart</title>
<style>
body {
margin: 0px;
}
.domain {
display: none;
}
.legendCells text {
fill: #8E8883;
font-size: 28pt;
font-family: sans-serif;
}
.legend-label {
fill: #635F5D;
font-size: 50pt;
font-family: sans-serif;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const pieValue = d => d.Population;
const colorValue = d => d.Gender;
const colorLabel = 'Gender';
const margin = { left: 20, right: 400, top: 1, bottom: 1 };
const svg = d3.select('svg');
const width = svg.attr('width');
const height = svg.attr('height');
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const pie = d3.pie().value(pieValue);
const arc = d3.arc()
.innerRadius(innerHeight / 4)
.outerRadius(innerHeight / 2);
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const pieG = g.append('g')
.attr('transform', `translate(${innerWidth / 2},${innerHeight / 2})`);
const colorLegendG = g.append('g')
.attr('transform', `translate(${innerWidth + 60}, 150)`);
colorLegendG.append('text')
.attr('class', 'legend-label')
.attr('x', -30)
.attr('y', -40)
.text(colorLabel);
const colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
const colorLegend = d3.legendColor()
.scale(colorScale)
.shape('circle');
const row = d => {
d.population = +d.population;
return d;
};
d3.csv('abalonegender.csv', row, data => {
colorScale.domain(data.map(colorValue));
const arcs = pie(data);
pieG.selectAll('path').data(arcs)
.enter().append('path')
.attr('d', arc)
.attr('fill', d => colorScale(colorValue(d.data)));
colorLegendG.call(colorLegend)
.selectAll('.cell text')
.attr('dy', '0.1em');
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js