README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    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