D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tomshanley
Full window
Github gist
Makeover Monday - if the world was 100 people
Built with
blockbuilder.org
<!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> </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>
https://d3js.org/d3.v4.min.js