seyna/load_csv_render_table.html

## load_csv_render_table.html
<html>
  <head>
    <title>Simple Line Graph using SVG and d3.js</title>
    <script src="http://mbostock.github.com/d3/d3.v2.js"></script>
  </head>

  <body>
    <div id="viz"></div>
    <script>
      d3.text("tmp.csv", function(datasetText) {

      var parsedCSV = d3.csv.parseRows(datasetText);

      var sampleHTML = d3.select("#viz")
        .append("table")
        .style("border-collapse", "collapse")
        .style("border", "2px black solid")

        .selectAll("tr")
        .data(parsedCSV)
        .enter().append("tr")

        .selectAll("td")
        .data(function(d){return d;})
        .enter().append("td")
        .style("border", "1px black solid")
        .style("padding", "5px")
        .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
        .on("mouseout", function(){d3.select(this).style("background-color", "white")})
        .text(function(d){return d;})
        .style("font-size", "12px");
      });
    </script>
  </body>

</html>

## tmp.csv

          
            car name
            miles/gallon
            cylinders
            displacement
            horsepower
            weight
            acceleration
            model year
            origin

            
              chevrolet chevelle malibu
              18
              8
              307
              130
              3504
              12
              70
              1

            
              buick skylark 320
              15
              8
              350
              165
              3693
              11.5
              70
              1

            
              plymouth satellite
              18
              8
              318
              150
              3436
              11
              70
              1
	<html>
	<head>
	<title>Simple Line Graph using SVG and d3.js</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	</head>

	<body>
	<div id="viz"></div>
	<script>
	d3.text("tmp.csv", function(datasetText) {

	var parsedCSV = d3.csv.parseRows(datasetText);

	var sampleHTML = d3.select("#viz")
	.append("table")
	.style("border-collapse", "collapse")
	.style("border", "2px black solid")

	.selectAll("tr")
	.data(parsedCSV)
	.enter().append("tr")

	.selectAll("td")
	.data(function(d){return d;})
	.enter().append("td")
	.style("border", "1px black solid")
	.style("padding", "5px")
	.on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
	.on("mouseout", function(){d3.select(this).style("background-color", "white")})
	.text(function(d){return d;})
	.style("font-size", "12px");
	});
	</script>
	</body>

	</html>
car name	miles/gallon	cylinders	displacement	horsepower	weight	acceleration	model year	origin
chevrolet chevelle malibu	18	8	307	130	3504	12	70	1
buick skylark 320	15	8	350	165	3693	11.5	70	1
plymouth satellite	18	8	318	150	3436	11	70	1