The simplest example of an axis - Data has a range of 0 to 100.
See it running at http://bl.ocks.org/3053419
Great tutorial here: http://alignedleft.com/tutorials/d3/axes/
Created
July 5, 2012 12:27
-
-
Save phoebebright/3053419 to your computer and use it in GitHub Desktop.
D3 axis scale simple example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>D3 Axis Example</title> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| var width = 400, | |
| height = 400, | |
| padding = 30; | |
| // create an svg container | |
| var vis = d3.select("body"). | |
| append("svg:svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // define the scale | |
| var xScale = d3.scale.linear() | |
| .domain([0, 100]) // values between 0 and 100 | |
| .range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at both sides | |
| // define the axis | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale); | |
| // draw it and move to the bottom of the chart area | |
| vis.append("g") | |
| .attr("transform", "translate(0," + (height - padding) + ")") | |
| .call(xAxis); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment