D3 Examples - Population: precent

xxxxxxxxxx
 
<!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>
​
    