<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<script src="script.js"></script>
</body>
</html>
// Code goes here
var objs = [{
"No": 1,
"チーム名": "OniBit",
"ロボットカー名": "Vento",
"GPS": "AE-GPS",
"制御": "Arduino",
"センサー": "デジタルコンパス",
"車体": "tamiya CR-01"
}, {
"No": 2,
"チーム名": "ところてん",
"ロボットカー名": "鉾鉾",
"GPS": "Emild Rearch",
"制御": "Arduino intel",
"センサー": "デジタルコンパス",
"車体": "tamiya ミッドナイトパンプキン"
}, {
"No": 3,
"チーム名": "仕事の合間にがんばる会",
"ロボットカー名": "RBX-R",
"GPS": "u-blox neo-6m",
"制御": "arduino",
"センサー": "ジャイロ",
"車体": "tamiya TT-02B"
}, {
"No": 4,
"チーム名": "-",
"ロボットカー名": "midnigth lab",
"GPS": "u-blox evt6t",
"制御": "mbed",
"センサー": "imu",
"車体": "tamiya ミッドナイトパンプキン"
}, {
"No": 5,
"チーム名": "sonodalab",
"ロボットカー名": "rovar jun",
"GPS": "u-blox neo-6m",
"制御": "arduino",
"センサー": "地磁気ジャイロ",
"車体": "tamiya マッドブル"
}, {
"No": 6,
"チーム名": "densilab",
"ロボットカー名": "pumpkin1",
"GPS": "u-blox m8p",
"制御": "raspberry pi",
"センサー": "地磁気3軸加速度3軸ジャイロ気圧",
"車体": "tamiya ミッドナイトパンプキン"
}, {
"No": 7,
"チーム名": "高専OBOG",
"ロボットカー名": "ntrc1",
"GPS": "u-blox m6",
"制御": "aurducopter",
"センサー": "地磁気",
"車体": "tamiya WT-01"
}, {
"No": 9,
"チーム名": "amanolab",
"ロボットカー名": "kevin",
"GPS": "u-blox m8p",
"制御": "raspberry pi",
"センサー": "-",
"車体": "tamiya black foot ii"
}, {
"No": 10,
"チーム名": "茨城高専",
"ロボットカー名": "北斗",
"GPS": "u-blox m8p",
"制御": "arduino",
"センサー": "-",
"車体": "tamiya CR-01"
}, {
"No": 11,
"チーム名": "マンボウプロジェクト",
"ロボットカー名": "margay",
"GPS": "u-blox m8n",
"制御": "mbed",
"センサー": "地磁気ジャイロ",
"車体": "tamiya super fighter gr"
}, {
"No": 12,
"チーム名": "mebias",
"ロボットカー名": "couger",
"GPS": "u-blox m8p-2",
"制御": "esp32",
"センサー": "-",
"車体": "tamiya DF-02"
}, {
"No": 13,
"チーム名": "mebias",
"ロボットカー名": "eagle",
"GPS": "u-blox m8p-2",
"制御": "esp32",
"センサー": "-",
"車体": "tamiya DB-01"
}, {
"No": 14,
"チーム名": "電気通信大学",
"ロボットカー名": "わかば号",
"GPS": "adafruit ultimate GPS",
"制御": "mbed",
"センサー": "地磁気HMC5883m",
"車体": "tamiya expert built xb pro"
}, {
"No": 15,
"チーム名": "つくば工科高校",
"ロボットカー名": "安全運転",
"GPS": "akizuti ae-gyfdmaxb",
"制御": "arduino",
"センサー": "地磁気",
"車体": "tamiya ミッドナイトパンプキン"
}, {
"No": 16,
"チーム名": "つくば工科高校",
"ロボットカー名": "ダークネスパンプキン",
"GPS": "akizuti ae-gyfdmaxb",
"制御": "arduino",
"センサー": "地磁気",
"車体": "tamiya ミッドナイトパンプキン"
}, {
"No": 17,
"チーム名": "@acketred",
"ロボットカー名": "あけおぺ",
"GPS": "u-blox neo-m8t tallyman tw2710",
"制御": "raspberry pi fpga",
"センサー": "3軸加速度角速度地磁気両輪オドメータ",
"車体": "tamiya WR-02"
}];
var table = d3.select("body").insert("table", ":first-child");
var thead = table.append("thead");
var tbody = table.append("tbody");
thead.append("tr").selectAll("th").data(d3.entries(objs[0])).enter().append("th").on("click", function(d, i) {
createTableBody(d.key);
}).text(function(d) {
return d.key;
});
createTableBody("id");
function createTableBody(sortKey) {
objs.sort(function(x, y) {
return d3.descending(x[sortKey], y[sortKey]);
});
tbody.selectAll("tr").data(objs).enter().append("tr").selectAll("td").data(function(d) {
return d3.entries(d);
}).enter().append("td").text(function(d) {
return d.value;
});
tbody.selectAll("tr").data(objs).selectAll("td").data(function(d) {
return d3.entries(d);
}).text(function(d) {
return d.value;
});
}
/* Styles go here */
body {
background: #dff;
font: 12px sans-serif;
}
th {
background-color: #Cff;
}
table, td, th {
border-collapse: collapse;
border: 1px #CCC dotted;
padding: 6px;
}