Skip to content

Instantly share code, notes, and snippets.

@notmatt

notmatt/index.html

Forked from scameron/index.html
Created April 2, 2012 17:25
Show Gist options
  • Save notmatt/2285416 to your computer and use it in GitHub Desktop.
Save notmatt/2285416 to your computer and use it in GitHub Desktop.
Download ZIP
Axis scale tick distribution example
Raw
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>bar</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
div {
border: 1px solid #BBB;
padding: 0px;
margin: 20px;
height: 183px;
width: 36px;
font: 10px sans-serif;
}
svg {
display: block;
}
svg g {
stroke: #000;
fill: none;
shape-rendering: crispEdges;
}
svg text {
stroke: none;
fill: #000;
}
</style>
</head>
<body>
<div id=firstDiv></div>
<div id=secondDiv></div>
<script type="text/javascript">
var domain1 = [-10, 185];
var domain2 = [-20, 180];
var scale1 = d3.scale.linear().domain(domain1).range([182.5, 0.5]).nice();
var scale2 = d3.scale.linear().domain(domain2).range([182.5, 0.5]).nice();
var axis1 = d3.svg.axis().scale(scale1).orient("left");
var axis2 = d3.svg.axis().scale(scale2).orient("left");
d3.select("#firstDiv").append("svg")
.attr("width", 36)
.attr("height", 183)
.append("g")
.attr("transform", "translate(35.5, 0)")
.call(axis1);
d3.select("#secondDiv").append("svg")
.attr("width", 36)
.attr("height", 183)
.append("g")
.attr("transform", "translate(35.5, 0)")
.call(axis2);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment