History's largest empires by maximum land area (millions km2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Empires</title>
		<style>
			html, body {
				height: 100%;
			}

html {
				display: table;
				margin: auto;
			}

body {
				display: table-cell;
				vertical-align: middle;
				font-size: 12px;
				font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
			}
		</style>
	<h1>History's largest empires by maximum land area (in millions km2)</h1>
	</head>
	<body style='background: #F9F9F9'>
	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
		<script>
				
	function circleToPath(cx, cy, r) {
		return (
			'M ' + cx + ' ' + cy +
			' m ' + -r + ',0' +
			' a ' + r + ',' + r + ' 1 0,1 ' + (r * 2) + ' ,1 ' +
			' a ' + r + ',' + r + ' 0 1,0 ' + -(r * 2) + ' ,1')
	}

function getLast(arr) {

return (arr.length > 0 ? arr[arr.length - 1] : null)
	}

/**Data**/
	var data =
`empire,km2,mi2,percentOfWorld,year
British Empire,35.5,13.71,3.84%,1920
Mongol Empire,24.0,9.27,16.11%,1309
Russian Empire,22.8,8.80,15.31%,1895
Qing dynasty,14.7,5.68,9.87%,1790
Spanish Empire,13.7,5.29,9.20%,1810
Second French colonial empire,11.5,4.44,7.72%,1920`

var empires = d3.csvParse(data)

/** Plot Area set up **/
	var width = 1200
	var height = 1200
	var margins = {
		top: 60,
		bottom: 60,
		left : 60,
		right : 60
	}

var horizontalMargins = margins.left + margins.right
	var verticalMargins = margins.top + margins.right

var plotAreaWidth = width - horizontalMargins
	var plotAreaHeight = height - verticalMargins

var graph_empires = 
		d3.select('body')
			.append('svg')
			.attr('width', plotAreaWidth)
			.attr('height', plotAreaHeight)

var plotArea = graph_empires
			.append('g')
			.attr('transform', `translate(${margins.left}, ${margins.top})`)

/** Scale **/
	/* set unit radii */
	empires.forEach(function(empire, i) {
		empire.radius = Math.sqrt( Number(empire.km2) / Math.PI)
	})

var radialScale = d3.scaleLinear()
			.domain([0, getLast(empires).radius])
			.range([0, 250])

/*Colors*/
	var colorPalette = []
	
	empires.forEach(function (empire) {
		colorPalette.push('#' + Math.random().toString(16).slice(2, 8).toUpperCase())
	})

/** Plotting **/
	var circles = plotArea.selectAll('circle')
		.data(empires)
		.enter()
		.append('circle')
			.attr('r', function (empire) {
				return (radialScale(empire.radius))
			})
			.attr('fill', function (d, i) {
				return (colorPalette[i])
			})
			.attr('opacity', 0.3)
			.attr('stroke', 'black')
			.attr('stroke-opacity', 0.3)
			.attr('cx', plotAreaWidth / 2)
			.attr('cy',  plotAreaWidth / 2)
			.append('path')
				.attr('d', function() {
					var circ = d3.select(d3.select(this).node().parentNode);
					return (circleToPath(circ.attr('cx'), circ.attr('cy'), circ.attr('r')))
				})
				.attr('id', function(empire) {
						return ('path_' + empire.empire.replace(/\s/g,''))
				})

plotArea.selectAll('text')
		.data(empires)
		.enter()
		.append('text')
		.attr('dy', -5)
		.append('textPath')
			.attr('xlink:href', function (empire) {
				return ('#path_' + empire.empire.replace(/\s/g,''))
			})
			.text(function (empire) {
				return (`${empire.empire}, ${empire.year}  ${empire.km2}km2`);
			})
			.attr('fill', 'black')
			.attr('font-size', 15)
			.attr('startOffset', function(empire, i) {
				return (i % 2 === 0 ? 250 : 0)
			})

</script>
</html>

https://d3js.org/d3.v4.min.js