Skip to content

Instantly share code, notes, and snippets.

@phoebebright
Created July 5, 2012 12:27
Show Gist options
  • Save phoebebright/3053419 to your computer and use it in GitHub Desktop.
Save phoebebright/3053419 to your computer and use it in GitHub Desktop.
D3 axis scale simple example
<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