README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    A basic scatterplot that loads data, scales and axes and updates domains based on extrema. Uses Mike Bostock's margin conventions and the data for Anscombe's Quartet.

forked from kpq's block: Basic starter code for many simple D3 charts

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

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

</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: 10};
var rectHeight = 20
var catNum = 18

var width = 700 - margin.left - margin.right,
    height = rectHeight * catNum;

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()
    .range([0,width/2]);

var maleScale = d3.scale.linear()
    .range([0,-width/2]);

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

var maleAxis = d3.svg.axis().scale(maleScale).orient("bottom")

var xAxis = d3.svg.axis()
    .scale(xScale)
    .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
  data.forEach(function(d) {
    d.female = +d.female;
    d.male = +d.male
  });

  //
  var xMax = d3.max(data, function(d) {
    if(d.male > d.female) return d.male;
    return d.female;
  })
  xScale.domain([0, xMax]);
  maleScale.domain([0,xMax])

  //
  yScale.domain([0, catNum]);

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

  labels.append("text").attr("transform", "translate(" + (width / 2 + 14) + "," + 15 + ")")
    .text("male | female")
    .attr("text-anchor", "middle")

  //
  chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + width / 2 + "," + (height + 5) + ")")
      .call(xAxis);

  chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + width / 2 + "," + (height + 5) + ")")
    .call(maleAxis);

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

  //
  rectangleGroup.append("rect")
      .attr("class", "female")
			.attr("x", width / 2)
  		.attr("height", rectHeight)
  	 	.attr("width", function(d){ return xScale(d.female)})
      .attr("y", 0)
  	  .attr("fill", "white")

  rectangleGroup.append("rect")
    .attr({
      "class": "male",
      "x": function(d){return width / 2 - xScale(d.male)},
      "height": rectHeight,
      "width": function(d){ return xScale(d.male)},
      "y": 0,
      "fill": "#Edf0f8",
    })

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

}


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