tonyhschu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    hello markdown


## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>

<body>
  <div id="container">
  </div>
  <script>
    var data = [
      {
        "name": "Jeb Bush",
        "total_receipts": 11429897.64,
        "total_from_individuals": 10983577.49,
        "total_from_pacs": 57600,
        "total_contributions": 0,
        "total_disbursements": 3078087.31
      },
      {
        "name": "Ted Cruz",
        "total_receipts": 14349160.55,
        "total_from_individuals": 14078316.37,
        "total_from_pacs": 20207.25,
        "total_contributions": 0,
        "total_disbursements": 5821564.62
      },
      {
        "name": "Hillary Clinton",
        "total_receipts": 47549949.64,
        "total_from_individuals": 46938582.3,
        "total_from_pacs": 332396.25,
        "total_contributions": 0,
        "total_disbursements": 18699814.02
      }
    ]

    var keys = [
      "total_from_pacs",
      "total_from_individuals"
    ]

    var subcategories = keys.map(function(key, i) {
      var results = data.map(function(candidate) {
        return candidate[key];
      });

      var accumulative = data.map(function(candidate) {
        var memo = 0;

        for(var j = 0; j <= i; j++) {
          memo += candidate[keys[j]];
        }

        return memo;
      });

      return {
        key: key,
        results: results,
        accumulative: accumulative
      };
    });

    var STATIC = {
      width: 960,
      height: 500,
      margin: 20,
      bar: {
        thickness: 30,
        gap: 60
      },
      text: {
       	columnWidth: 250
      }
    }

   	var totalReceiptMax = d3.max(data, function(d) {
      return d.total_receipts;
    });

   	var barLengthScale = d3.scale.linear()
    	.domain([0, totalReceiptMax])
    	.range([0, STATIC.width * 0.7 - STATIC.margin * 2]);

		var svg = d3.select("#container").append("svg")
    	.attr("width", STATIC.width)
    	.attr("height", STATIC.height);

    var drawBars = function(d, i) {
      var layer = d3.select(this);

      layer.attr("transform", "translate(" + (STATIC.margin + STATIC.text.columnWidth) + ", " + (STATIC.margin + i * (STATIC.bar.thickness + STATIC.bar.gap)) + ")");

      layer.append("text")
      	.attr("x", -10)
      	.attr("y", STATIC.bar.thickness - 9)
      	.attr("text-anchor", "end")
      	.text(function(d) {
  				return d.name;
	      })

      layer.append("rect")
      	.attr("fill", "none")
      	.attr("stroke", "#00aaff")
      	.attr("width", function(d) {
        	return barLengthScale(d.total_receipts);
      	})
      	.attr("height", STATIC.bar.thickness);
    }

    svg.selectAll(".bars")
    	.data(data)
    	.enter()
    	.append("g").attr("class", "bars")
    	.each(drawBars);

    var drawCategoryPaths = function(d, i) {
      var layer = d3.select(this);

      layer.attr("transform", "translate(" + (STATIC.margin + STATIC.text.columnWidth) + ", " + STATIC.margin + ")");

      var pathString = "M";

      d.accumulative.map(function(datum, i) {
        console.log(datum, i);

        var x = barLengthScale(datum);
        var y = i * (STATIC.bar.thickness + STATIC.bar.gap);

        if (i > 0) { pathString += "L"; }

        pathString += x + "," + y + "L" + x + "," + (y + STATIC.bar.thickness);
      });

      layer.append("path")
      	.attr("stroke", "#000")
      	.attr("fill", "none")
      	.attr("stroke-width", 1)
      	.attr("d", pathString);

    }

    var subCategoryLayer = svg.append("g").attr("id", "paths");

    subCategoryLayer.selectAll(".category")
    	.data(subcategories)
    	.enter()
    	.append("g").attr("class", "category")
    	.each(drawCategoryPaths);


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	</head>

	<body>
	<div id="container">
	</div>
	<script>
	var data = [
	{
	"name": "Jeb Bush",
	"total_receipts": 11429897.64,
	"total_from_individuals": 10983577.49,
	"total_from_pacs": 57600,
	"total_contributions": 0,
	"total_disbursements": 3078087.31
	},
	{
	"name": "Ted Cruz",
	"total_receipts": 14349160.55,
	"total_from_individuals": 14078316.37,
	"total_from_pacs": 20207.25,
	"total_contributions": 0,
	"total_disbursements": 5821564.62
	},
	{
	"name": "Hillary Clinton",
	"total_receipts": 47549949.64,
	"total_from_individuals": 46938582.3,
	"total_from_pacs": 332396.25,
	"total_contributions": 0,
	"total_disbursements": 18699814.02
	}
	]

	var keys = [
	"total_from_pacs",
	"total_from_individuals"
	]

	var subcategories = keys.map(function(key, i) {
	var results = data.map(function(candidate) {
	return candidate[key];
	});

	var accumulative = data.map(function(candidate) {
	var memo = 0;

	for(var j = 0; j <= i; j++) {
	memo += candidate[keys[j]];
	}

	return memo;
	});

	return {
	key: key,
	results: results,
	accumulative: accumulative
	};
	});

	var STATIC = {
	width: 960,
	height: 500,
	margin: 20,
	bar: {
	thickness: 30,
	gap: 60
	},
	text: {
	columnWidth: 250
	}
	}

	var totalReceiptMax = d3.max(data, function(d) {
	return d.total_receipts;
	});

	var barLengthScale = d3.scale.linear()
	.domain([0, totalReceiptMax])
	.range([0, STATIC.width * 0.7 - STATIC.margin * 2]);

	var svg = d3.select("#container").append("svg")
	.attr("width", STATIC.width)
	.attr("height", STATIC.height);

	var drawBars = function(d, i) {
	var layer = d3.select(this);

	layer.attr("transform", "translate(" + (STATIC.margin + STATIC.text.columnWidth) + ", " + (STATIC.margin + i * (STATIC.bar.thickness + STATIC.bar.gap)) + ")");

	layer.append("text")
	.attr("x", -10)
	.attr("y", STATIC.bar.thickness - 9)
	.attr("text-anchor", "end")
	.text(function(d) {
	return d.name;
	})

	layer.append("rect")
	.attr("fill", "none")
	.attr("stroke", "#00aaff")
	.attr("width", function(d) {
	return barLengthScale(d.total_receipts);
	})
	.attr("height", STATIC.bar.thickness);
	}

	svg.selectAll(".bars")
	.data(data)
	.enter()
	.append("g").attr("class", "bars")
	.each(drawBars);

	var drawCategoryPaths = function(d, i) {
	var layer = d3.select(this);

	layer.attr("transform", "translate(" + (STATIC.margin + STATIC.text.columnWidth) + ", " + STATIC.margin + ")");

	var pathString = "M";

	d.accumulative.map(function(datum, i) {
	console.log(datum, i);

	var x = barLengthScale(datum);
	var y = i * (STATIC.bar.thickness + STATIC.bar.gap);

	if (i > 0) { pathString += "L"; }

	pathString += x + "," + y + "L" + x + "," + (y + STATIC.bar.thickness);
	});

	layer.append("path")
	.attr("stroke", "#000")
	.attr("fill", "none")
	.attr("stroke-width", 1)
	.attr("d", pathString);

	}

	var subCategoryLayer = svg.append("g").attr("id", "paths");

	subCategoryLayer.selectAll(".category")
	.data(subcategories)
	.enter()
	.append("g").attr("class", "category")
	.each(drawCategoryPaths);


	</script>
	</body>