D3 Examples - Makeover Monday - if the world was 100 people

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
​
        body {
            font-family: 'Comfortaa', sans-serif;
            text-align: center;
            margin: auto
        }
​
        .labels {
            text-anchor: middle;
        }
​
        select {
            font-size: 18px
        }
​
        p {
            font-size: 12px
        }
​
        circle {
            opacity: 0.7
        }
​
    </style>
</head>
​
<body>
​
    <h1>If the world was 100 People...</h1>
    
    
    <div id="chart"></div>
​
    <p>Choose another category</p>
    <div id="select-div"></div>
    <p>&nbsp</p>
    
​
    <p>Source: <a href="https://www.100people.org/statistics_100stats.php?section=statistics">100People.org</a> and <a href="https://www.makeovermonday.co.uk/data/">Makeover Monday</a></p>
    <p>People icons designed by <a href="https://www.flaticon.com/authors/freepik">freepik</a> from Flaticon</p>
​
    <script src="data.js"></script>
    <script src="index.js"></script>
</body>
    