Skip to content

Instantly share code, notes, and snippets.

@krish85

krish85/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Save krish85/772e2be21fe8eb41b3bb to your computer and use it in GitHub Desktop.
Save krish85/772e2be21fe8eb41b3bb to your computer and use it in GitHub Desktop.
Download ZIP
Axis Scaling
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
.axis path,
.axix line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script>
var w = 700;
var h = 500;
var padding = 30;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
];
var xScale = d3.scale.linear()
.domain([d3.min(dataset, function(d){ return d[0];}),d3.max(dataset, function(d){ return d[0];})])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d){ return d[1];}),d3.max(dataset, function(d){ return d[1];})])
.range([h - padding ,padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){ return d[1];})])
.range([3,9]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle").data(dataset).enter().append("circle")
.attr("cx", function(d) {return xScale(d[0]);})
.attr("cy", function(d) {return yScale(d[1]);})
.attr("r", function(d) {return rScale(d[1]);})
.attr("fill", "blue");
svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (h - padding)+ ")").call(xAxis);
svg.append("g").attr("class", "axis").call(yAxis).attr("transform","translate(" + padding + ",0)").call(yAxis);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment