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