cavedave/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This shows how much people earn in different times and places and what they spend their money on. Data from
https://www.bls.gov/news.release/cesan.nr0.htm
and
https://www.bls.gov/opub/uscs/1901.pdf

  
## data.csv

          
            area
            spend

            
              Food
              327

            
              Housing
              179

            
              Apparel
              108

            
              Healthcare
              20

            
              Entertainment
              12

            
              Education
              8

            
              Tobacco
              11

            
              Personal Insurance
              20

            
              Other
              62

## data2.csv

          
            area
            spend

            
              Food
              7023

            
              Housing
              18409

            
              Apparel
              1846

            
              Transportation
              9503

            
              Healthcare
              4342

            
              Entertainment
              2842

            
              Education
              1315

            
              Cash Contributions
              1819

            
              Personal Insurance
              6349

            
              Other
              2530

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<style>

body {
  font: 18px Arial;
}

p {
  margin: 0;
}
#waffle {
  margin-bottom: 30px;
}

#legend {
  font: 13px Arial;
}

</style>
</head>

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="title">
  <p>A measure, by area and spending</p>
  </div>
<div id="waffle">
</div>
<div id="legend">
</div>
</body>

<script>

var total = 0;
var width,
    height,
    widthSquares = 20,
    heightSquares = 5,
    squareSize = 25,
    squareValue = 0,
    gap = 1,
    theData = [];

var color = d3.scale.category10();

d3.csv("data.csv", function(error, data)
{
  //total
  total = d3.sum(data, function(d) { return d.spend; });

  //value of a square
  squareValue = total / (widthSquares*heightSquares);

  //remap data
  data.forEach(function(d, i)
  {
      d.spend = +d.spend;
      d.units = Math.floor(d.spend/squareValue);
      theData = theData.concat(
        Array(d.units+1).join(1).split('').map(function()
          {
            return {  squareValue:squareValue,
                      units: d.units,
                      spend: d.spend,
                      groupIndex: i};
          })
        );
  });

  width = (squareSize*widthSquares) + widthSquares*gap + 25;
  height = (squareSize*heightSquares) + heightSquares*gap + 25;

  var waffle = d3.select("#waffle")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .selectAll("div")
      .data(theData)
      .enter()
      .append("rect")
      .attr("width", squareSize)
      .attr("height", squareSize)
      .attr("fill", function(d)
      {
        return color(d.groupIndex);
      })
      .attr("x", function(d, i)
        {
          //group n squares for column
          col = Math.floor(i/heightSquares);
          return (col*squareSize) + (col*gap);
        })
      .attr("y", function(d, i)
      {
        row = i%heightSquares;
        return (heightSquares*squareSize) - ((row*squareSize) + (row*gap))
      })
      .append("title")
        .text(function (d,i)
          {
            return "Area: " + data[d.groupIndex].area + " | " +  d.spend + " , " + d.units + "%"
          });

   //add legend with categorical data
   var legend = d3.select("#legend")
    .append("svg")
    .attr('width', 300)
    .attr('height', 200)
    .append('g')
    .selectAll("div")
    .data(data)
    .enter()
      .append("g")
      .attr('transform', function(d,i){ return "translate(0," + i*20 + ")";});
  legend.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", function(d, i) { return color(i)});
  legend.append("text")
    .attr("x", 25)
    .attr("y", 13)
    .text( function(d) { return d.area});

    //add value of a unit square
    var legend2 = d3.select("#legend")
      .select('svg')
      .append('g')
      .attr('transform', "translate(100,0)");

legend2.append("text")
        .attr('y', '14')
        .attr('font-size', '18px')
        .text("Total: " + total)
        .attr("fill", "#444444");
});

</script>
</html>
	area	spend
	Food	327
	Housing	179
	Apparel	108
	Healthcare	20
	Entertainment	12
	Education	8
	Tobacco	11
	Personal Insurance	20
	Other	62
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
	<style>

	body {
	font: 18px Arial;
	}

	p {
	margin: 0;
	}
	#waffle {
	margin-bottom: 30px;
	}

	#legend {
	font: 13px Arial;
	}

	</style>
	</head>

	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<div id="title">
	<p>A measure, by area and spending</p>
	</div>
	<div id="waffle">
	</div>
	<div id="legend">
	</div>
	</body>

	<script>

	var total = 0;
	var width,
	height,
	widthSquares = 20,
	heightSquares = 5,
	squareSize = 25,
	squareValue = 0,
	gap = 1,
	theData = [];

	var color = d3.scale.category10();

	d3.csv("data.csv", function(error, data)
	{
	//total
	total = d3.sum(data, function(d) { return d.spend; });

	//value of a square
	squareValue = total / (widthSquares*heightSquares);

	//remap data
	data.forEach(function(d, i)
	{
	d.spend = +d.spend;
	d.units = Math.floor(d.spend/squareValue);
	theData = theData.concat(
	Array(d.units+1).join(1).split('').map(function()
	{
	return { squareValue:squareValue,
	units: d.units,
	spend: d.spend,
	groupIndex: i};
	})
	);
	});

	width = (squareSizewidthSquares) + widthSquaresgap + 25;
	height = (squareSizeheightSquares) + heightSquaresgap + 25;

	var waffle = d3.select("#waffle")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.selectAll("div")
	.data(theData)
	.enter()
	.append("rect")
	.attr("width", squareSize)
	.attr("height", squareSize)
	.attr("fill", function(d)
	{
	return color(d.groupIndex);
	})
	.attr("x", function(d, i)
	{
	//group n squares for column
	col = Math.floor(i/heightSquares);
	return (colsquareSize) + (colgap);
	})
	.attr("y", function(d, i)
	{
	row = i%heightSquares;
	return (heightSquaressquareSize) - ((rowsquareSize) + (row*gap))
	})
	.append("title")
	.text(function (d,i)
	{
	return "Area: " + data[d.groupIndex].area + " \| " + d.spend + " , " + d.units + "%"
	});

	//add legend with categorical data
	var legend = d3.select("#legend")
	.append("svg")
	.attr('width', 300)
	.attr('height', 200)
	.append('g')
	.selectAll("div")
	.data(data)
	.enter()
	.append("g")
	.attr('transform', function(d,i){ return "translate(0," + i*20 + ")";});
	legend.append("rect")
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", function(d, i) { return color(i)});
	legend.append("text")
	.attr("x", 25)
	.attr("y", 13)
	.text( function(d) { return d.area});

	//add value of a unit square
	var legend2 = d3.select("#legend")
	.select('svg')
	.append('g')
	.attr('transform', "translate(100,0)");

	legend2.append("text")
	.attr('y', '14')
	.attr('font-size', '18px')
	.text("Total: " + total)
	.attr("fill", "#444444");
	});

	</script>
	</html>