D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
sunole
Full window
Github gist
gallery
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <button onclick="transition()">Update</button> <script> function transition() { var t; } </script> // source https://bl.ocks.org/steveharoz/raw/8c3e2524079a8c440df60c1ab72b5d03/ <div class="force"> <p><label><input type="checkbox" checked onchange="forceProperties.collide.enabled = this.checked; updateAll();"> collide</label> Prevents nodes from overlapping</p> <label> strength <output id="collide_StrengthSliderOutput">.7</output> <input type="range" min="0" max="2" value=".7" step=".1" oninput="d3.select('#collide_StrengthSliderOutput').text(value); forceProperties.collide.strength=value; updateAll();"> </label> <label title="Size of nodes"> radius <output id="collide_radiusSliderOutput">5</output> <input type="range" min="0" max="100" value="5" step="1" oninput="d3.select('#collide_radiusSliderOutput').text(value); forceProperties.collide.radius=value; updateAll();"> </label> <label title="Higher values increase rigidity of the nodes (WARNING: high values are computationally expensive)"> iterations <output id="collide_iterationsSliderOutput">1</output> <input type="range" min="1" max="10" value="1" step="1" oninput="d3.select('#collide_iterationsSliderOutput').text(value); forceProperties.collide.iterations=value; updateAll();"> </label> </div> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) svg.append("text") .text("Edit the code below to change me!") .attr("y", 200) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") function transition() { var t; } </script> </body>
https://d3js.org/d3.v4.min.js