D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
calebkress
Full window
Github gist
perkolator-bar-chart
Built with
blockbuilder.org
<!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>
https://d3js.org/d3.v4.min.js