r-wheeler · August 7, 2015 17:57
diff --git a/lineAndtable.html b/lineAndtable.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style> /* set the CSS */

 body { font: 12px Arial;}

 path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
 }

 .axis path,
 .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
 }

 </style>
 <body>

 <!-- load the d3.js library -->    
 <script src="d3/d3.v3.min.js" type="text/JavaScript"></script>

 <script>
    
    var margin = {top: 30, right: 20, bottom: 30, left: 200},
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;
    var x = d3.time.scale().range([0, width]); 
    var y = d3.scale.linear().range([height, 0]);
    
    // Define the axes
    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);

    // Define the line
    var valueline = d3.svg.line()
        .x(function(d) { return x(d.event_date); })
        .y(function(d) { return y(d.hits); });

    var svg = d3.select("body")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", width + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 d3.csv("hits.csv", function(error, data) {
    data.forEach(function(d) {
        d.event_date = parseDate(d.event_date);
        console.log(d.event_date);
        d.hits= +d.hits;
    });
    
    var columns = d3.keys(data[0]);


 // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.event_date; }));
    y.domain([0, d3.max(data, function(d) { return d.hits; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    // Define a function to tablulate    
    function tabulate(data,columns) { 
          // the columns you'd like to display

          var table = d3.select("body").append("table")
                        .attr("style", "margin-left: 200px;margin-top:-90px")
                        ,
              thead = table.append("thead"),
              tbody = table.append("tbody");

          // append the header row
          thead.append("tr")
              .selectAll("th")
              .data(columns)
              .enter()
              .append("th")
                  .text(function(column) { return column; });

          // create a row for each object in the data
          var rows = tbody.selectAll("tr")
              .data(data)
              .enter()
              .append("tr");

          // create a cell in each row for each column
          var cells = rows.selectAll("td")
              .data(function(row) {
                  return columns.map(function(column) {
                      return {column: column, value: row[column]};
                  });
              })
              .enter()
              .append("td")
                  .text(function(d) { return d.value; });
   } 

   var columns = d3.keys(data[0]);
   var table = tabulate(data, columns);
 });

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	body { font: 12px Arial;}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	</style>
	<body>

	<!-- load the d3.js library -->
	<script src="d3/d3.v3.min.js" type="text/JavaScript"></script>

	<script>

	var margin = {top: 30, right: 20, bottom: 30, left: 200},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y-%m-%d").parse;
	var x = d3.time.scale().range([0, width]);
	var y = d3.scale.linear().range([height, 0]);

	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

	// Define the line
	var valueline = d3.svg.line()
	.x(function(d) { return x(d.event_date); })
	.y(function(d) { return y(d.hits); });

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", width + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("hits.csv", function(error, data) {
	data.forEach(function(d) {
	d.event_date = parseDate(d.event_date);
	console.log(d.event_date);
	d.hits= +d.hits;
	});

	var columns = d3.keys(data[0]);


	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.event_date; }));
	y.domain([0, d3.max(data, function(d) { return d.hits; })]);

	// Add the valueline path.
	svg.append("path")
	.attr("class", "line")
	.attr("d", valueline(data));

	// Add the X Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// Add the Y Axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	// Define a function to tablulate
	function tabulate(data,columns) {
	// the columns you'd like to display

	var table = d3.select("body").append("table")
	.attr("style", "margin-left: 200px;margin-top:-90px")
	,
	thead = table.append("thead"),
	tbody = table.append("tbody");

	// append the header row
	thead.append("tr")
	.selectAll("th")
	.data(columns)
	.enter()
	.append("th")
	.text(function(column) { return column; });

	// create a row for each object in the data
	var rows = tbody.selectAll("tr")
	.data(data)
	.enter()
	.append("tr");

	// create a cell in each row for each column
	var cells = rows.selectAll("td")
	.data(function(row) {
	return columns.map(function(column) {
	return {column: column, value: row[column]};
	});
	})
	.enter()
	.append("td")
	.text(function(d) { return d.value; });
	}

	var columns = d3.keys(data[0]);
	var table = tabulate(data, columns);
	});

	</script>
	</body>