bar chart SF pop

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">

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>

var margin = {top: 20, right: 100, bottom: 60, left: 10};
var rectHeight = 20
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 + 14) + "," + 15 + ")")
    .text("male | female")
    .attr("text-anchor", "middle")

//
  chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + width / 2 + "," + (height + 5) + ")")
      .call(xAxis);

chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + width / 2 + "," + (height + 5) + ")")
    .call(maleAxis);

//
  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)
  	 	.attr("width", function(d){ return xScale(d.female)})
      .attr("y", 0)
  	  .attr("fill", "white")

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

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

}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js