D3 Examples - d3 | concentric circles

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- https://www.basscss.com/ -->
    <link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
    <!-- https://clrs.cc/ -->
    <!-- <link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet"> -->
    <style>
        body { font-family: Consolas, monaco, monospace; padding-left: 20px;}
        .js-circle {
            background: #eee;
            position: relative;
            margin: 3px;
            width: 320px;
            height: 360px;
            padding-left: 8px;
        }
        a {
            text-decoration: none;
            color: #454545;
        }
        a:hover {
            color: tomato;
        }
        text.legend-labels {
            font-size: 11px;
            fill: #fff;
            letter-spacing: 2px;
            pointer-events: none;
        }
        rect.legend-items:hover {
            opacity: 0.8; 
        }
        h1.js-uni-title {
            font-size: 14px;
            letter-spacing: 2px;
            max-width: 250px;
            font-weight: normal;
        }
        h2.js-rank {
            position: absolute;
            top: -6px;
            right: 20px;
            color: #fff;
        }
        h3.js-circle-info {
            position: absolute;
            bottom: 5px;
            left: 8px;
        }
        span {
            color: #888;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
    </style>
</head>
<body>
    <header>
        <p>Each concentric circle represents number of students:</p>
        <nav id="legend"></nav>
        <span>Note: no circle means the value is zero</span>
    </header>
    
    <div id="vis" class="flex flex-wrap max-width-1600 mx-auto my2 js-circles"></div>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
<!-- render code -->
<script>
    d3.json('data.json', function(error, data) {
        render(data, '#vis')
    })
    
    // change frame height
    d3.select(self.frameElement).style('height', '1250px');
</script>
​
</body>
</html>
​
​
​
    