franklinbaldo/data.csv

## 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>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

</head>

<body>
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

  <div id="table"  class="table ></div>"


       <script>


    d3.csv("data.csv", function(error, data) {
		  if (error) throw error;

		  var sortAscending = true;
		  var table = d3.select('#table').append('table');
		  var titles = d3.keys(data[0]);
		  var headers = table.append('thead').append('tr')
		                   .selectAll('th')
		                   .data(titles).enter()
		                   .append('th')
		                   .text(function (d) {
			                    return d;
		                    })
		                   .on('click', function (d) {
		                	   headers.attr('class', 'header');

		                	   if (sortAscending) {
		                	     rows.sort(function(a, b) { return b[d] < a[d]; });
		                	     sortAscending = false;
		                	     this.className = 'aes';
		                	   } else {
		                		 rows.sort(function(a, b) { return b[d] > a[d]; });
		                		 sortAscending = true;
		                		 this.className = 'des';
		                	   }

		                   });

		  var rows = table.append('tbody').selectAll('tr')
		               .data(data).enter()
		               .append('tr');
		  rows.selectAll('td')
		    .data(function (d) {
		    	return titles.map(function (k) {
		    		return { 'value': d[k], 'name': k};
		    	});
		    }).enter()
		    .append('td')
		    .attr('data-th', function (d) {
		    	return d.name;
		    })
		    .text(function (d) {
		    	return d.value;
		    });
	  });


  /*
    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>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

	<title>Hello, world!</title>





	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	</head>

	<body>
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

	<div id="table" class="table ></div>"
























	<script>


	d3.csv("data.csv", function(error, data) {
	if (error) throw error;

	var sortAscending = true;
	var table = d3.select('#table').append('table');
	var titles = d3.keys(data[0]);
	var headers = table.append('thead').append('tr')
	.selectAll('th')
	.data(titles).enter()
	.append('th')
	.text(function (d) {
	return d;
	})
	.on('click', function (d) {
	headers.attr('class', 'header');

	if (sortAscending) {
	rows.sort(function(a, b) { return b[d] < a[d]; });
	sortAscending = false;
	this.className = 'aes';
	} else {
	rows.sort(function(a, b) { return b[d] > a[d]; });
	sortAscending = true;
	this.className = 'des';
	}

	});

	var rows = table.append('tbody').selectAll('tr')
	.data(data).enter()
	.append('tr');
	rows.selectAll('td')
	.data(function (d) {
	return titles.map(function (k) {
	return { 'value': d[k], 'name': k};
	});
	}).enter()
	.append('td')
	.attr('data-th', function (d) {
	return d.name;
	})
	.text(function (d) {
	return d.value;
	});
	});









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