Skip to content

Instantly share code, notes, and snippets.

@atmccann

atmccann/index.html

Created March 19, 2014 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atmccann/9652883 to your computer and use it in GitHub Desktop.
Save atmccann/9652883 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scatter</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 610;
var h = 475;
var padding = 30;
//Static dataset
var dataset = [
[9,12],
[6,11],
[14,11],
[6,10],
[8,10],
[10,9],
[2,9],
[10,9],
[0,9],
[0,9],
[12,9],
[0,9],
[9,9],
[0,8],
[3,8],
[0,8],
[14,8],
[1,8],
[12,8],
[0,8],
[0,7],
[0,7],
[4,7],
[4,7],
[0,7],
[6,7],
[1,6],
[1,6],
[4,6],
[6,6],
[1,6],
[8,6],
[0,6],
[3,5],
[0,5],
[0,5],
[0,5],
[0,5],
[0,5],
[0,5],
[1,5],
[0,5],
[0,5],
[0,5],
[0,5],
[0,5],
[0,5],
[0,5],
[8,5],
[0,5],
[0,5],
[0,5],
[0,5],
[0,5],
[6,5],
[11,5],
[0,4],
[0,4],
[0,4],
[0,4],
[3,4],
[1,4],
[6,4],
[0,4],
[0,4],
[0,4],
[0,4],
[0,4],
[0,4],
[4,4],
[6,3],
[0,3],
[0,3],
[2,3],
[0,3],
[0,3],
[1,3],
[0,3],
[0,3],
[0,3],
[2,3],
[0,3],
[0,3],
[0,3],
[0,2],
[0,2],
[0,2],
[0,2],
[2,2],
[0,2],
[0,2],
[1,2],
[0,2],
[2,2],
[4,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[0,2],
[3,2],
[4,1],
[0,1],
[0,1],
[1,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[1,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[3,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[0,1],
[5,1],
[0,1],
[0,1],
[0,0],
[0,0],
[0,0],
[0,0],
[1,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[1,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[1,0],
[1,0],
[2,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[0,0],
[1,0],
[0,0],
[0,0],
[0,0],
[0,0]
];
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr('fill','red')
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 5)
.style('opacity','.25');
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.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