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

xxxxxxxxxx
 
<!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>
    