BruceHenry · September 24, 2017 19:34
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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);

    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>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/Top5000-Games.csv b/Top5000-Games.csv
	<!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);

	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>