Built with blockbuilder.org
This donut chart shows the game publisher market share of top 500 best selling games in the history.
This data is from Kaggle: Video Game Sales with Ratings.
Fork from Curran Kelleher’s Block
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>Game Publisher Donut Chart</title>
<style>
body {
margin: 1px;
}
.legendCells text {
fill: #8E8883;
font-size: 15pt;
font-family: sans-serif;
}
.legend-label {
fill: #635F5D;
font-size: 25pt;
font-family: sans-serif;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const pieValue = d => d.count;
const colorValue = d => d.publisher;
const colorLabel = 'Game Publisher';
const margin = {left: 20, right: 400, top: 5, bottom: 5};
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.schemeCategory20);
const colorLegend = d3.legendColor()
.scale(colorScale)
.shape('circle');
var dataArray = [];
function row(d) {
dataArray.push({"publisher": d.Publisher, "count": 1});
}
function render() {
dataArray = dataArray.slice(0, 500);
var tempData = d3.nest()
.key(d => d.publisher)
.rollup(function (v) {
return d3.sum(v, d => d.count);
})
.entries(dataArray);
var data = [];
var otherCount = 0;
tempData.forEach(function (element) {
if (element.value < 20)
otherCount++;
else
data.push({"publisher": element.key, "count": element.value});
});
data.push({"publisher": "Other", "count": otherCount});
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');
}
d3.csv('Top5000-Games.csv', row, render);
</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