ConTracker/table.html at master · violetteavi/ConTracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<body>

	<div id=page-wrap></div>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript'>
var data = [
  { "date" : '2013-01-01', "close" : 45 },
  { "date" : '2013-02-01', "close" : 50 },
  { "date" : '2013-03-01', "close" : 55 },
  { "date" : '2013-04-01', "close" : 50 },
  { "date" : '2013-05-01', "close" : 45 },
  { "date" : '2013-06-01', "close" : 50 },
  { "date" : '2013-07-01', "close" : 50 },
  { "date" : '2013-08-01', "close" : 52 }
]

function tabulate(data, columns) {
	var table = d3.select('body').append('table')
	var thead = table.append('thead')
	var	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; });

  return table;
}

// render the tables
tabulate(data, ['date', 'close']); // 2 column table
	</script>


<style>
table {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px;
    border-collapse:
    collapse; border-spacing: 0;
}

td, th {
    border: 1px solid transparent; /* No more visible border */
    height: 30px;
    transition: all 0.3s;  /* Simple transition for hover effect */
}

th {
    background: #DFDFDF;  /* Darken header a bit */
    font-weight: bold;
}

td {
    background: #FAFAFA;
    text-align: center;
}

/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
tr:nth-child(odd) td { background: #FEFEFE; }
</style>
</body>
</html>