Skip to content

Instantly share code, notes, and snippets.

@zhreshold

zhreshold/demo_bench.json

Last active October 14, 2017 22:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zhreshold/5b8306fc684ea5945e8cd2ede8fcc422 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zhreshold/5b8306fc684ea5945e8cd2ede8fcc422 to your computer and use it in GitHub Desktop.
Download ZIP
Sortable table d3.js
Raw
demo_bench.json
{
"nvidia-titan-x": {
"devices": [
{
"cores": "3072",
"memory": "12GB",
"memory_bandwith": "336.5GB/s",
"name": "Nvidia Titan X",
"quantity": 1
}
],
"host": {
"cache": "8MB",
"cores": "8",
"cpu": "Intel(R) Core(TM) i7-2600K CPU @ 3.40GHz",
"os": "linux/arch",
"ram": "8GB"
},
"models": [
{
"details": "...link...",
"frameworks": [
{
"backward": 63,
"forward": 25,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"name": "Leaf",
"version": "0.2"
},
{
"backward": 71,
"forward": 31,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "1750MB",
"name": "Leaf",
"version": "0.2"
},
{
"backward": 66,
"forward": 33,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "1650MB",
"name": "Torch",
"version": "01/2016"
},
{
"backward": 54,
"forward": 28,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "1650MB",
"name": "Torch",
"version": "07/03/2016"
},
{
"backward": 85,
"forward": 42,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "1350MB",
"name": "Caffe",
"version": "1.0.0"
},
{
"backward": 202,
"forward": 46,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "11050MB",
"name": "Tensorflow",
"version": "0.7"
},
{
"backward": 128,
"forward": 40,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "11520MB",
"name": "Tensorflow",
"version": "0.7.1"
}
],
"name": "Alexnet",
"type": "model"
},
{
"details": "...link...",
"frameworks": [
{
"backward": 180,
"forward": 84,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "5050MB",
"name": "Leaf",
"version": "0.2"
},
{
"backward": 226,
"forward": 106,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "5050MB",
"name": "Leaf",
"version": "0.2"
},
{
"backward": 215,
"forward": 114,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "4950MB",
"name": "Torch",
"version": "01/2016"
},
{
"backward": 176,
"forward": 95,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "5000MB",
"name": "Torch",
"version": "07/03/2016"
},
{
"backward": 289,
"forward": 143,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "2400MB",
"name": "Caffe",
"version": "1.0.0"
},
{
"backward": 621,
"forward": 118,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "11050MB",
"name": "Tensorflow",
"version": "0.7"
},
{
"backward": 300,
"forward": 119,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "11520MB",
"name": "Tensorflow",
"version": "0.7.1"
}
],
"name": "Overfeat",
"type": "model"
},
{
"details": "...link...",
"frameworks": [
{
"backward": 368,
"forward": 143,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "8300MB",
"name": "Leaf",
"version": "0.2"
},
{
"backward": 418,
"forward": 180,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "8300MB",
"name": "Leaf",
"version": "0.2"
},
{
"backward": 429,
"forward": 201,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "8250MB",
"name": "Torch",
"version": "01/2016"
},
{
"backward": 367,
"forward": 165,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "8090MB",
"name": "Torch",
"version": "07/03/2016"
},
{
"backward": 453,
"forward": 225,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "5650MB",
"name": "Caffe",
"version": "1.0.0"
},
{
"backward": 1142,
"forward": 228,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "11000MB",
"name": "Tensorflow",
"version": "0.7"
},
{
"backward": 840,
"forward": 227,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "11520MB",
"name": "Tensorflow",
"version": "0.7.1"
}
],
"name": "VGG [A]",
"type": "model"
},
{
"details": "...link...",
"frameworks": [
{
"backward": 361,
"forward": 138,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "8300MB",
"name": "Torch",
"version": "01/2016"
},
{
"backward": 342,
"forward": 131,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "8360MB",
"name": "Torch",
"version": "07/03/2016"
},
{
"backward": 345,
"forward": 143,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "8100MB",
"name": "Caffe",
"version": "1.0.0"
},
{
"backward": 871,
"forward": 197,
"libraries": [
{
"name": "cuDNN",
"version": "3"
}
],
"memory": "11050MB",
"name": "Tensorflow",
"version": "0.7"
},
{
"backward": 757,
"forward": 195,
"libraries": [
{
"name": "cuDNN",
"version": "4"
}
],
"memory": "11520MB",
"name": "Tensorflow",
"version": "0.7.1"
}
],
"name": "GoogleNet",
"type": "model"
}
],
"name": "Nvidia Titan X",
"type": "GPU"
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>D3.js Sortable & Responsive Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !IE]><!-->
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.4 Georgia, Serif;
}
#page-wrap {
margin: 50px;
}
p {
margin: 20px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* 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: "\21E9";
}
th.aes:after {
content: "\21E7";
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 6.5em;
display: inline-block;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
</style>
<!--<![endif]-->
</head>
<body>
<div id="page-wrap">
<h1>D3.js Sortable & Responsive Table</h1>
<p>Click the table header to sort data according to that column</p>
</div>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
d3.csv("data.csv", function(error, data) {
if (error) throw error;
var sortAscending = true;
var table = d3.select('#page-wrap').append('table');
var titles = d3.keys(data[0]);
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 (sortAscending) {
rows.sort(function(a, b) { return b[d] < a[d]; });
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) { return b[d] > a[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 (k) {
return { 'value': d[k], 'name': k};
});
}).enter()
.append('td')
.attr('data-th', function (d) {
return d.name;
})
.text(function (d) {
return d.value;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment