Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <link href="style.css"/> <script src="https://d3js.org/d3.v4.min.js"></script></head><body> <div id="checklist"></div> <br><hr><br> <svg></svg> <div class="chart"> <!-- <div style="width: 40px;">4</div> <div style="width: 80px;">8</div> <div style="width: 150px;">15</div> <div style="width: 160px;">16</div> <div style="width: 230px;">23</div> <div style="width: 420px;">42</div> --> </div> </body> <script> // Feel free to change or delete any of the code you see in this editor! var data = [1, 2, 3, 4] d3.select("#checklist") .selectAll("input") .data(data) .enter() .append("label") .attr("for", function(d){return "I'm no "+d}) .text(function(d){return "I'm no "+d}) .append("input") .attr("type", "checkbox") .attr("id", function(d) {return "I'm no " + d}) .append("br") var data = [120, 140, 150, 180] // define width is array var chart = d3.select('chart') // select svg .selectAll('div') .data(data).enter() .append('div') .attr('x', 0) .attr() .attr('y', function(d,i) {return i * 30}) .attr('width', function(d) {return d}) .attr('height', 25) </script> https://d3js.org/d3.v4.min.js