A basic scatterplot that loads data, scales and axes and updates domains based on extrema. Uses Mike Bostock’s margin conventions and the data for Anscombe’s Quartet.
forked from kpq‘s block: Basic starter code for many simple D3 charts
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: arial, sans;
font-size: 9px;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 8px;
}
</style>
<body>
<h2>Population in San Francisco, by age and gender: 2010 Census</h2>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script type="text/javascript">
//
var margin = {top: 40, right: 60, bottom: 60, left: 70};
var width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
var chart = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//
var xScale = d3.scale.linear()
.range([0,width]);
var yScale = d3.scale.linear()
.range([height,0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//
d3.csv("sfPopulation2010.csv", ready);
//
function ready(error, data) {
if (error) return console.warn(error);
// ensure numbers are being interpreted as numbers, not strings
data.forEach(function(d) {
d.female = +d.female;
d.male = +d.male
});
// why is this a problem? What should we do to change it?
//xScale.domain(d3.extent(data, function(d) { return d.female; }));
//yScale.domain(d3.extent(data, function(d) { return d.male; }));
xScale.domain([0, d3.max(data, function(d) { return d.female; })]);
yScale.domain([0, d3.max(data, function(d) { return d.male; })]);
//
var labels = svg.append("g")
.attr("class", "labels")
labels.append("text").attr("transform", "translate(" + (width / 2 + 14) + "," + (height + margin.top + 40) + ")")
.text("Female Population")
labels.append("text").attr("transform", "translate(20," + (height/2 + margin.top)+ ") rotate(270)")
.text("Male Population").attr('text-anchor', 'middle')
//
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis);
//
var circleGroup = chart.selectAll(".points")
.data(data)
.enter()
// and group
.append("g")
.attr("class", "points")
.attr("transform", function(d) { return "translate( " + xScale(d.female)+ "," + yScale(d.male) + ")"; })
//
circleGroup.append("circle")
.attr("r", 5)
.attr("fill", "grey")
//
circleGroup.append("text")
.text(function(d) { return d.age; })
.attr("dx", +10)
.attr("dy", +4);
//
chart.append("line")
.attr({
"x1": xScale(0),
"x2": xScale(xScale.domain()[1]),
"y1": yScale(0),
"y2": yScale(yScale.domain()[1]),
"stroke": "#a0abcc"
})
}
</script>
age,male,female
Under 5,17963,17240
5 to 9,14466,13996
10 to 14,13467,12832
15 to 19,16888,17718
20 to 24,29269,31349
25 to 29,44178,43978
30 to 34,41351,38613
35 to 39,38264,32549
40 to 44,34906,27963
45 to 49,31783,25794
50 to 54,28957,25273
55 to 59,26777,24931
60 to 64,22455,22433
65 to 69,14318,15462
70 to 74,11274,13268
75 to 79,9294,11545
80 to 84,6878,10312
85 and over,5974,11517