seemantk/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
In response to this SO question from Francis Niu

  
## data.csv

          
            Title
            URL
            Data Change

            
              A
              http://localhost/A.html
              1

            
              B
              http://localhost/B.html
              -2

            
              C
              http://localhost/C.html
              0

            
              D
              http://localhost/D.html
              12

            
              E
              http://localhost/E.html
              -9

## 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>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    table { border-collapse: collapse; color: #333; background-color: #F7F6F3; }
    table thead { font-weight: bold; background-color: #CCC; cursor: default; }
    table tbody tr:hover { background-color: #FFC; }
    td { border: solid 1px #CCC; padding: 0 1ex; }
    .even { color: #284775; background-color: White; }
    .left { text-align: left; }
    .right { text-align: right; }
    .add { color: green; }
    .minus { color: red; }
  </style>
</head>

<body>
  <div id="table"></div>
  <script>
    var table = d3.select("#table").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");
    thead.append("th").text("Title");
    thead.append("th").text("Data Change");

    d3.csv("data.csv", function(error, data) {
      if (error) throw error;
      var tr = tbody.selectAll("tr")
      		.data(data)
      	.enter().append("tr")
      		.classed("even", function(d, i) { return i % 2 == 1; });
      tr.each(function(d) {
       	var self = d3.select(this);
        self.append("td")
        	.append("a")
        		.attr("href", d.URL)
        		.text(d.Title);
        self.append("td")
        	.html(d["Data Change"]);
      });
    });
  </script>
</body>
Title	URL	Data Change
A	http://localhost/A.html	1
B	http://localhost/B.html	-2
C	http://localhost/C.html	0
D	http://localhost/D.html	12
E	http://localhost/E.html	-9
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }
	table { border-collapse: collapse; color: #333; background-color: #F7F6F3; }
	table thead { font-weight: bold; background-color: #CCC; cursor: default; }
	table tbody tr:hover { background-color: #FFC; }
	td { border: solid 1px #CCC; padding: 0 1ex; }
	.even { color: #284775; background-color: White; }
	.left { text-align: left; }
	.right { text-align: right; }
	.add { color: green; }
	.minus { color: red; }
	</style>
	</head>

	<body>
	<div id="table"></div>
	<script>
	var table = d3.select("#table").append("table"),
	thead = table.append("thead"),
	tbody = table.append("tbody");
	thead.append("th").text("Title");
	thead.append("th").text("Data Change");

	d3.csv("data.csv", function(error, data) {
	if (error) throw error;
	var tr = tbody.selectAll("tr")
	.data(data)
	.enter().append("tr")
	.classed("even", function(d, i) { return i % 2 == 1; });
	tr.each(function(d) {
	var self = d3.select(this);
	self.append("td")
	.append("a")
	.attr("href", d.URL)
	.text(d.Title);
	self.append("td")
	.html(d["Data Change"]);
	});
	});
	</script>
	</body>