<!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;
}