Population: precent

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

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

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>

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>

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