block by zanarmstrong f7ef0216431bc829460f4f2882158d26

bar chart SF pop

Full Screen

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

forked from zanarmstrong‘s block: bar chart SF pop

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">

  body {
    font-family: arial, sans;
    font-size: 11px;
  }

  .axis line,
  .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .axis text {
    font-size: 8px;
  }

  .rectangle-group {
    text-anchor: middle;
    fill: grey
  }
  .rectangle-group rect {
    stroke: grey;
    stroke-width: .5
  }

</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: 33, right: 100, bottom: 60, left: 10};
var rectHeight = 30
var catNum = 18

var width = 700 - margin.left - margin.right,
    height = rectHeight * catNum;

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/2]);

var maleScale = d3.scale.linear()
    .range([0,-width/2]);

var yScale = d3.scale.linear()
    .range([height,0]);

var maleAxis = d3.svg.axis().scale(maleScale).orient("bottom")

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

d3.csv("sfPopulation2010.csv", ready);

function ready(error, data) {
  if (error) return console.warn(error);
  console.log(data)

  // ensure numbers are being interpreted as numbers, not strings
  data.forEach(function(d) {
    d.female = +d.female;
    d.male = +d.male
  });

  //
  var xMax = d3.max(data, function(d) {
    if(d.male > d.female) return d.male;
    return d.female;
  })
  xScale.domain([0, xMax]);
  maleScale.domain([0,xMax])

  //
  yScale.domain([0, catNum]);

  //
  var labels = svg.append("g")
    .attr("class", "labels")

  labels.append("text")
    .attr("transform", "translate(" + (width / 2 + 100) + "," + 41 + ")")
    .text("female")
    .attr("fill", "#888")
    .attr("text-anchor", "start")
  labels.append("text")
    .attr("transform", "translate(" + (width / 2 + 100) + "," + 53 + ")")
    .text("male")
  	.attr("fill", "#888")
    .attr("text-anchor", "start")
  //
  chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + width / 2 + "," + (height + 5) + ")")
      .call(xAxis);


  var rectangleGroup = chart.selectAll(".rectangle-group")
      .data(data)
      .enter()
      // and group
      .append("g")
      .attr("class", "rectangle-group")
      .attr("transform", function(d,idx) { return "translate(0," + yScale(idx + 1) + ")"; })

  //
  rectangleGroup.append("rect")
      .attr("class", "female")
			.attr("x", width / 2)
  		.attr("height", rectHeight/3)
  	 	.attr("width", function(d){ return xScale(d.female)})
      .attr("y", 0)
  	  .attr("fill", "#efefef")

  rectangleGroup.append("rect")
    .attr({
      "class": "male",
      "x": function(d){return width / 2},
      "height": rectHeight/3,
      "width": function(d){ return xScale(d.male)},
      "y": rectHeight/3,
      "fill": "white",
    })

  //
  rectangleGroup.append("text").attr("text-anchor", "end")
      .text(function(d) { return d.age; })
      .attr("dx", xScale(xScale.domain()[1]) -8)
      .attr("dy", +12);

}


</script>

sfPopulation2010.csv

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