d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple graph demonstrating the addition of a table with several 'tricks' and a graph (open in full screen to see the table).
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

  
## data2.csv

          
            date
            close
            open

            
              1-May-12
              68.13
              34.12

            
              30-Apr-12
              63.98
              45.56

            
              27-Apr-12
              67.00
              67.89

            
              26-Apr-12
              89.70
              78.54

            
              25-Apr-12
              99.00
              89.23

            
              24-Apr-12
              130.28
              99.23

            
              23-Apr-12
              166.70
              101.34

            
              20-Apr-12
              234.98
              122.34

            
              19-Apr-12
              345.44
              134.56

            
              18-Apr-12
              443.34
              160.45

            
              17-Apr-12
              543.70
              180.34

            
              16-Apr-12
              580.13
              210.23

            
              13-Apr-12
              605.23
              223.45

            
              12-Apr-12
              622.77
              201.56

            
              11-Apr-12
              626.20
              212.67

            
              10-Apr-12
              628.44
              310.45

            
              9-Apr-12
              636.23
              350.45

            
              5-Apr-12
              633.68
              410.23

            
              4-Apr-12
              624.31
              430.56

            
              3-Apr-12
              629.32
              460.34

            
              2-Apr-12
              618.63
              510.34

            
              30-Mar-12
              599.55
              534.23

            
              29-Mar-12
              609.86
              578.23

            
              28-Mar-12
              617.62
              590.12

            
              27-Mar-12
              614.48
              560.34

            
              26-Mar-12
              606.98
              580.12

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

td, th {
  padding: 1px 4px;
  border: 1px black solid;
}

</style>
<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date1); })
    .y(function(d) { return y(d.close); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data2.csv").then(function(data) {


  // format the data
  data.forEach(function(d) {
      d.date1 = parseTime(d.date);
      d.close = +d.close;
      d.open = +d.open;  //  <= added this for tidy house keeping
      d.diff = Math.round(( d.close - d.open ) * 100 ) / 100;
  });

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

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

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

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

// The table generation function
function tabulate(data, columns) {
    var table = d3.select("body").append("table")
            .attr("style", "margin-left: 360px")
            .style("border-collapse", "collapse")
            .style("border", "2px black solid"),
        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")
        .attr("style", "font-family: Courier") // sets the font style
            .html(function(d) { return d.value; });

    return table;
}

// render the table
var peopleTable = tabulate(data, ["date", "close", "open", "diff"]);

peopleTable.selectAll("tbody tr")
           .sort(function(a, b) {
             return d3.descending(a.close, b.close);
           });

peopleTable.selectAll("thead th")
           .text(function(column) {
             return column.charAt(0).toUpperCase() + column.substr(1);
           });

});

</script>
</body>
date	close	open
1-May-12	68.13	34.12
30-Apr-12	63.98	45.56
27-Apr-12	67.00	67.89
26-Apr-12	89.70	78.54
25-Apr-12	99.00	89.23
24-Apr-12	130.28	99.23
23-Apr-12	166.70	101.34
20-Apr-12	234.98	122.34
19-Apr-12	345.44	134.56
18-Apr-12	443.34	160.45
17-Apr-12	543.70	180.34
16-Apr-12	580.13	210.23
13-Apr-12	605.23	223.45
12-Apr-12	622.77	201.56
11-Apr-12	626.20	212.67
10-Apr-12	628.44	310.45
9-Apr-12	636.23	350.45
5-Apr-12	633.68	410.23
4-Apr-12	624.31	430.56
3-Apr-12	629.32	460.34
2-Apr-12	618.63	510.34
30-Mar-12	599.55	534.23
29-Mar-12	609.86	578.23
28-Mar-12	617.62	590.12
27-Mar-12	614.48	560.34
26-Mar-12	606.98	580.12
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2px;
	}

	td, th {
	padding: 1px 4px;
	border: 1px black solid;
	}

	</style>
	<body>

	<!-- load the d3.js library -->
	<script src="https://d3js.org/d3.v7.min.js"></script>
	<script>

	// set the dimensions and margins of the graph
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// parse the date / time
	var parseTime = d3.timeParse("%d-%b-%y");

	// set the ranges
	var x = d3.scaleTime().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	// define the line
	var valueline = d3.line()
	.x(function(d) { return x(d.date1); })
	.y(function(d) { return y(d.close); });

	// append the svg obgect to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	// Get the data
	d3.csv("data2.csv").then(function(data) {


	// format the data
	data.forEach(function(d) {
	d.date1 = parseTime(d.date);
	d.close = +d.close;
	d.open = +d.open; // <= added this for tidy house keeping
	d.diff = Math.round(( d.close - d.open ) * 100 ) / 100;
	});

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

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

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

	// Add the Y Axis
	svg.append("g")
	.call(d3.axisLeft(y));

	// The table generation function
	function tabulate(data, columns) {
	var table = d3.select("body").append("table")
	.attr("style", "margin-left: 360px")
	.style("border-collapse", "collapse")
	.style("border", "2px black solid"),
	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")
	.attr("style", "font-family: Courier") // sets the font style
	.html(function(d) { return d.value; });

	return table;
	}

	// render the table
	var peopleTable = tabulate(data, ["date", "close", "open", "diff"]);

	peopleTable.selectAll("tbody tr")
	.sort(function(a, b) {
	return d3.descending(a.close, b.close);
	});

	peopleTable.selectAll("thead th")
	.text(function(column) {
	return column.charAt(0).toUpperCase() + column.substr(1);
	});

	});

	</script>
	</body>