D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
eesur
Full window
Github gist
d3 | ratio bar chart
sketch of bar chart for displaying ratios (as percentage)
<!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>Ratio1 : Ratio2</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-compiled.js" charset="utf-8"></script> <!-- render code --> <script> // render an update render([57, 43]) d3.interval(function() { let v1 = Math.floor(d3.randomUniform(5, 100)()) let v2 = 100 - v1 return render([v1, v2]); }, 2000); </script> </body> </html>
https://d3js.org/d3.v4.min.js