block by zanarmstrong c66a8226e1bc09ae5032

Population: precent

Full Screen

One of three visualizations designed to show the basic building blocks needed in almost all D3 projects:

loading data, svg, format data, data join, use data to define visual attributes, axis + labels, styling

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: white;
    shape-rendering: crispEdges;
  }
  .axis text {
    font-size: 8px;
  }

  .male {
    fill: #828CBF
  }

  .female {
    fill: black
  }

  .axis.female path {
    display: none
  }

  .axis.female line {
    display: none
  }

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

  .rectangle-group .male {
    fill: #EBEFF3
  }

  .rectangle-group .female {
    fill: white;
  }

</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: 20, right: 100, bottom: 60, left: 30};

var width = 600 - margin.left - margin.right,
    height = 600 - 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()
    .domain([0,1])
    .range([0,width]);

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

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

var xAxisMale = d3.svg.axis()
    .scale(d3.scale.linear().domain([0,1]).range([0,width]))
    .tickFormat(d3.format("%"))
    .orient("bottom");

var xAxisFemale = d3.svg.axis()
    .scale(d3.scale.linear().domain([0,1]).range([width,0]))
    .tickFormat(d3.format("%"))
    .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
  var totalPopulation = 0;
  data.forEach(function(d) {
    d.female = +d.female;
    d.male = +d.male
    totalPopulation = totalPopulation + d.female + d.male;
  });

  //
  yScale.domain([0, totalPopulation]);
  heightScale.domain([0, totalPopulation])
  console.log(yScale.domain())

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

  labels.append("text").attr("transform", "translate(" + (width / 2 - 39) + "," + 10 + ")")
    .text("percent male ")
    .attr("class", "male")

  labels.append("text").attr("transform", "translate(" + (width / 2 + 28) + "," + 10 + ")")
    .text(" | percent female").attr("class", "female")

  labels.append("text").attr("transform", "translate(" + margin.left / 2 + "," + (height / 2) + ") rotate(270)")
    .text("population by age category")

  //
  chart.append("g")
      .attr("class", "x axis male")
      .attr("transform", "translate(0," + (height + 5) + ")")
      .call(xAxisMale);

  chart.append("g")
    .attr("class", "x axis female")
    .attr("transform", "translate(0," + (height + 16) + ")")
    .call(xAxisFemale);

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

  //
  rectangleGroup.append("rect")
      .attr("class", "male")
			.attr("x", 0)
  		.attr("height", function(d){
        return heightScale(d.male + d.female)
      })
  	 	.attr("width", function(d){
        return xScale(d.male / (d.male + d.female))
      })
      .attr("y", 0)

  rectangleGroup.append("rect")
    .attr({
      "class": "female",
      "x": function(d){
        return xScale(d.male / (d.male + d.female))
      },
      "height": function(d){
        return heightScale((d.male + d.female))
      },
      "width": function(d){
        return xScale(d.female / (d.male + d.female))
      },
      "y": 0,
    })

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

  chart.append("line")
  .attr({
    'x1': xScale(.5),
    'x2': xScale(.5),
    'y1': yScale.range()[0],
    'y2': yScale.range()[1],
    'stroke': 'black',
    'stroke-width': .5,
    'stroke-dasharray': "5,5"

  })

}


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