D3 Examples - perkolator-bar-chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        html, body { height: 100%; }
        body { 
            font-family: Consolas, monaco, monospace; 
            background: #dddddd;
            width: 900px;
            margin: 0 auto;
        }
        section {
            padding-top: 30vh;
        }
        h3 {
            margin: 0;
            color: #fe9f97;
        }
    </style>
</head>
<body>
    <section class="stats">
        <h3 class="data0"></h3>
        <h3 class="data1"></h3>
        <h3 class="data2"></h3>
        <h3 class="data3"></h3>
        <h3 class="data4"></h3>
        <h3 class="data5"></h3>
        <svg width="900" height="100">
            <g id="vis"></g>
        </svg>
    </section>
    
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 code -->
<script src="script.js" charset="utf-8"></script>
<!-- render code -->
<script>
  
  let data = [43, 16, 12, 22, 6, 7];
  
  //
  d3.select('.data0').append('text')
    .text((data[0]).toString());
  d3.select('.data1').append('text')
    .text((data[1]).toString());
  d3.select('.data2').append('text')
    .text((data[2]).toString());
  d3.select('.data3').append('text')
    .text((data[3]).toString());
  d3.select('.data4').append('text')
    .text((data[4]).toString());
  d3.select('.data5').append('text')
    .text((data[5]).toString());
  
    // render an update
    render(data)
</script>
​
</body>
</html>
    