<!DOCTYPE html>
<meta charset="utf-8">
<style>
table {
width: 60%;
border-collapse: collapse;
margin: 0px auto;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
cursor: s-resize;
background-repeat: no-repeat;
background-position: 3% center;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
th.des:after {
content: "\21E3";
}
th.aes:after {
content: "\21E1";
}
</style>
<body>
<div id="page-wrap">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [
// 'watershed': 'A',
// 'values': [{
{
'ID': 1001,
'Time': 10,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1002,
'Time': 11,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1003,
'Time': 12,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1004,
'Time': 13,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1005,
'Time': 14,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1006,
'Time': 15,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1007,
'Time': 16,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1008,
'Time': 17,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
},
{
'ID': 1009,
'Time': 18,
'Precipitation': 12,
'Flow': 13,
'Stage': 15
}
]
// parse the time, minute:second
// var parseTime = d3.timeParse("%M:%S");
var timeformat = d3.timeFormat("%M:%S");
// format the data etc.
data.forEach(function(d) {
// d.clocktime = parseTime(d.clocktime);
// d.racetime = parseTime(d.racetime);
// d.points = +d.points;
d.ID = +d.ID;
// 'Time': 18,
d.Time = +d.Time;
// 'Precipitation': 12,
d.Precipitation = +d.Precipitation;
// 'Flow': 13,
d.Flow = +d.Flow;
// 'Stage': 15
d.Stage = +d.Stage;
});
//********* - START TABLE - *********
var sortAscending = true;
var table = d3.select('#page-wrap').append('table');
var titles = d3.keys(data[0]);
// var titles = ["raceplace", "name", "club", "clocktime", "category", "handicap", "racetime", "timeplace", "points"]
var titles = ['ID', 'Time', 'Precipitation', 'Flow', 'Stage']
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 (d == "name" || d == "club" || d == "category") { //these keys sort alphabetically
// // sorting alphabetically");
// if (sortAscending) {
// rows.sort(function(a, b) {
// return d3.ascending(a[d], b[d]);
// });
// sortAscending = false;
// this.className = 'aes';
// } else {
// rows.sort(function(a, b) {
// return d3.descending(a[d], b[d]);
// });
// sortAscending = true;
// this.className = 'des';
// }
// } else {
if (sortAscending) {
//all other keys sort numerically including time
rows.sort(function(a, b) {
return b[d] - a[d];
});
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) {
return a[d] - b[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(key, i) {
return {
'value': d[key],
'name': d
};
});
}).enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
console.log("typeof(" + d.value + "): " + typeof(d.value));
if (typeof(d.value) == "object") {
return timeformat(d.value)
} else {
return d.value
}
});
//********* - END TABLE - *********
</script>
</body>