D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
vicapow
Full window
Github gist
modifications to the axis ticks
<!DOCTYPE html> <html> <head> <title></title> <style> body, html{ width: 960px; height: 500px; margin: 0; } .axis{ fill: none; stroke: black; } .axis text{ fill: white; stroke: none; } .axis circle{ fill: gray; stroke: none; } </style> </head> <body> <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script> <script> var w = window.innerWidth, h = window.innerHeight var m = 100 var svg = d3.select('body').append('svg') .attr({width: w, height: h}) var x = d3.scale.linear().domain([0, w]).range([m, w - m]) var axis = d3.svg.axis().scale(x) svg.append('g').attr('class', 'axis').call(axis) .attr('transform', 'translate(' + [0, m] + ')') svg.select('.axis').selectAll('g.tick') .insert('circle', ':first-child').attr('r', 25).attr('cy', 15) </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js