index.html
<html>
<head>
<script src="//d3js.org/d3.v3.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: green;
stroke-width: 3px;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: #743403;
}
</style>
</head>
<body>
<script>
var h = 500;
var w = 500;
var padding = 30;
var dataset = [];
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;
for(var i = 0; i < 50; i++) {
dataset.push([Math.round(Math.random() * xRange), Math.round(Math.random() * yRange)]);
}
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding]);
var yScale = d3.scale.linear()
.domain([0, 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([2,5]);
var colorScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range(["yellow","purple"]);
var svg = d3.select("body")
.append("svg")
.attr("height", h)
.attr("width", w);
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", function(d){
return colorScale(d[0]);
})
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
</html>