nstrayer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Forked from Gregor Aisch's Block simple tables in D3.
Inspired by a question posted in the comments about using the cell values in a given row to color code the background of that cell.

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Simple tables in D3</title>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
    <style type="text/css">
    body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}
    th { text-align: left; }
    th, td { padding: 0 1em 0.5ex 0;}
    th.center, td.center { text-align: center; }
    th.num, td.num { text-align: right; }
    </style>
</head>
<body>
    <script>

    // the table rows, typically loaded from data file using d3.csv
    var movies = [
        { title: "The Godfather", year: 1972, length: 175, budget: 6000000, rating: 9.1 },
        { title: "The Shawshank Redemption", year: 1994, length: 142, budget: 25000000, rating: 9.1 },
        { title: "The Lord of the Rings: The Return of the King", year: 2003, length: 251, budget: 94000000, rating: 9 },
        { title: "The Godfather: Part II", year: 1974, length: 200, budget: 13000000, rating: 8.9 },
        { title: "Shichinin no samurai", year: 1954, length: 206, budget: 500000, rating: 8.9 },
        { title: "Buono, il brutto, il cattivo, Il", year: 1966, length: 180, budget: 1200000, rating: 8.8 },
        { title: "Casablanca", year: 1942, length: 102, budget: 950000, rating: 8.8 },
        { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001, length: 208, budget: 93000000, rating: 8.8 },
        { title: "The Lord of the Rings: The Two Towers", year: 2002, length: 223, budget: 94000000, rating: 8.8 },
        { title: "Pulp Fiction", year: 1994, length: 168, budget: 8000000, rating: 8.8 }
    ];


    // column definitions
    var columns = [
        { head: 'Movie title', cl: 'title', html: ƒ('title') },
        { head: 'Year', cl: 'center', html: ƒ('year') },
        { head: 'Length', cl: 'center', html: ƒ('length', length()) },
        { head: 'Budget', cl: 'num', html: ƒ('budget', d3.format('$,'))},
        { head: 'Rating', cl: 'num', html: ƒ('rating', d3.format('.1f'))}
    ];

    //grab ratings and make a scale with them
    var ratings      = movies.map(function(d){return d.rating});
    var ratingsScale = d3.scale.linear()
    	.domain(d3.extent(ratings))
    	.range(["red","steelblue"]);

   //grab the budgets too.
    var budgets     = movies.map(function(d){return d.budget});
    var budgetScale = d3.scale.linear()
    	.domain(d3.extent(budgets))
    	.range(["red","steelblue"]);

    // create table
    var table = d3.select('body')
        .append('table');

    // create table header
    table.append('thead').append('tr')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
        .attr('class', ƒ('cl'))
        .text(ƒ('head'));

    // create table body
    table.append('tbody')
        .selectAll('tr')
        .data(movies).enter()
        .append('tr')
        .selectAll('td')
        .data(function(row, i) {
      //row is the entry in the csv, i is the index of that entry
            return columns.map(function(c) {
                // compute cell values for this specific row
                var cell = {};
                //initialize a holder for the returned object for this column.
                d3.keys(c).forEach(function(k) {
                    cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
                });
                return cell;
            });
        }).enter()
        .append('td')
    //----------------------------------------
    //I changed this (and also some minor scaling functions above)
		.attr("bgcolor", function(d,i){     //logic for coloring goes here.
      		if(d.head == "Rating"){         //rating column
                return ratingsScale(d.html)
            } else if (d.head == "Budget"){ //budget column
                //There might be an d3.unformat but I couldnt find it.
                var amt = d.html.replace(/,/g, "").replace("$", "")
                return budgetScale(amt)
            }
		})
    //----------------------------------------
        .html(ƒ('html'))
        .attr('class', ƒ('cl'));

    function length() {
        var fmt = d3.format('02d');
        return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
    }


    </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple tables in D3</title>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
	<style type="text/css">
	body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}
	th { text-align: left; }
	th, td { padding: 0 1em 0.5ex 0;}
	th.center, td.center { text-align: center; }
	th.num, td.num { text-align: right; }
	</style>
	</head>
	<body>
	<script>

	// the table rows, typically loaded from data file using d3.csv
	var movies = [
	{ title: "The Godfather", year: 1972, length: 175, budget: 6000000, rating: 9.1 },
	{ title: "The Shawshank Redemption", year: 1994, length: 142, budget: 25000000, rating: 9.1 },
	{ title: "The Lord of the Rings: The Return of the King", year: 2003, length: 251, budget: 94000000, rating: 9 },
	{ title: "The Godfather: Part II", year: 1974, length: 200, budget: 13000000, rating: 8.9 },
	{ title: "Shichinin no samurai", year: 1954, length: 206, budget: 500000, rating: 8.9 },
	{ title: "Buono, il brutto, il cattivo, Il", year: 1966, length: 180, budget: 1200000, rating: 8.8 },
	{ title: "Casablanca", year: 1942, length: 102, budget: 950000, rating: 8.8 },
	{ title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001, length: 208, budget: 93000000, rating: 8.8 },
	{ title: "The Lord of the Rings: The Two Towers", year: 2002, length: 223, budget: 94000000, rating: 8.8 },
	{ title: "Pulp Fiction", year: 1994, length: 168, budget: 8000000, rating: 8.8 }
	];


	// column definitions
	var columns = [
	{ head: 'Movie title', cl: 'title', html: ƒ('title') },
	{ head: 'Year', cl: 'center', html: ƒ('year') },
	{ head: 'Length', cl: 'center', html: ƒ('length', length()) },
	{ head: 'Budget', cl: 'num', html: ƒ('budget', d3.format('$,'))},
	{ head: 'Rating', cl: 'num', html: ƒ('rating', d3.format('.1f'))}
	];

	//grab ratings and make a scale with them
	var ratings = movies.map(function(d){return d.rating});
	var ratingsScale = d3.scale.linear()
	.domain(d3.extent(ratings))
	.range(["red","steelblue"]);

	//grab the budgets too.
	var budgets = movies.map(function(d){return d.budget});
	var budgetScale = d3.scale.linear()
	.domain(d3.extent(budgets))
	.range(["red","steelblue"]);

	// create table
	var table = d3.select('body')
	.append('table');

	// create table header
	table.append('thead').append('tr')
	.selectAll('th')
	.data(columns).enter()
	.append('th')
	.attr('class', ƒ('cl'))
	.text(ƒ('head'));

	// create table body
	table.append('tbody')
	.selectAll('tr')
	.data(movies).enter()
	.append('tr')
	.selectAll('td')
	.data(function(row, i) {
	//row is the entry in the csv, i is the index of that entry
	return columns.map(function(c) {
	// compute cell values for this specific row
	var cell = {};
	//initialize a holder for the returned object for this column.
	d3.keys(c).forEach(function(k) {
	cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
	});
	return cell;
	});
	}).enter()
	.append('td')
	//----------------------------------------
	//I changed this (and also some minor scaling functions above)
	.attr("bgcolor", function(d,i){ //logic for coloring goes here.
	if(d.head == "Rating"){ //rating column
	return ratingsScale(d.html)
	} else if (d.head == "Budget"){ //budget column
	//There might be an d3.unformat but I couldnt find it.
	var amt = d.html.replace(/,/g, "").replace("$", "")
	return budgetScale(amt)
	}
	})
	//----------------------------------------
	.html(ƒ('html'))
	.attr('class', ƒ('cl'));

	function length() {
	var fmt = d3.format('02d');
	return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
	}


	</script>
	</body>
	</html>