Game Publisher Donut Chart

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.

<!DOCTYPE html>
<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);

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');

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