Skip to content

Instantly share code, notes, and snippets.

@larskotthoff

larskotthoff/index.html

Created January 25, 2012 19:53
Show Gist options
  • Save larskotthoff/1678215 to your computer and use it in GitHub Desktop.
Save larskotthoff/1678215 to your computer and use it in GitHub Desktop.
Download ZIP
Axis ticks arrange demo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://raw.github.com/larskotthoff/d3/axisarrange-tmp/d3.js"></script>
<style type="text/css">
.tick {
stroke: #000;
}
.tickPointer {
stroke: #888;
}
.domain {
fill: none;
stroke: #000;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 800, height = 300,
svg = d3.select("body")
.append("svg:svg")
.attr("height", height)
.attr("width", width),
scale = d3.scale.linear().domain([0, 100]).range([0, 180]),
labels = d3.svg.axis().scale(scale);
svg.append("svg:g")
.attr("transform", "translate(40,50)")
.call(labels.orient("left"));
svg.append("svg:g")
.attr("transform", "translate(250,50)")
.call(labels.orient("right"));
svg.append("svg:g")
.attr("transform", "translate(50,30)")
.call(labels.orient("top"));
svg.append("svg:g")
.attr("transform", "translate(50,250)")
.call(labels.orient("bottom"));
labels = labels.arrange(true);
svg.append("svg:g")
.attr("transform", "translate(400,50)")
.call(labels.orient("left"));
svg.append("svg:g")
.attr("transform", "translate(640,50)")
.call(labels.orient("right"));
svg.append("svg:g")
.attr("transform", "translate(425,30)")
.call(labels.orient("top"));
svg.append("svg:g")
.attr("transform", "translate(425,250)")
.call(labels.orient("bottom"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment