D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
GordyD
Full window
Github gist
d3.bayview walkthru
hello markdown
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { margin: 0 } rect, circle { fill: red; stroke: blue; stroke-width: 20px; stroke-dasharray: 24 10 0 0; stroke-dashoffset: 116; stroke-opacity: 0.3 } </style> </head> <body> <script> var vis = d3.select('#vis').append('svg'); </script> <div id='vis'></div> <svg width="960" height="500" style='background-color:orange'> <rect x="200" y="0" width="437" height="214" transform="translate(20) rotate(45)"> </rect> <circle cx="20" cy="40" r="20"> </circle> <circle cx="100" cy="40" r="20"> </circle> <circle cx="180" cy="40" r="20"> </circle> <circle cx="260" cy="40" r="20"> </circle> <circle cx="340" cy="40" r="20"> </circle> <circle cx="420" cy="40" r="20"> </circle> <circle cx="500" cy="40" r="20"> </circle> <circle cx="580" cy="40" r="20"> </circle> <circle cx="600" cy="40" r="20"> </circle> <circle cx="580" cy="40" r="20"> </circle> <circle cx="580" cy="40" r="20"> </circle> <circle cx="580" cy="40" r="20"> </circle> </svg> <script> console.log("you are now rocking with d3", d3); </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js