Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 19, 2020 02:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/2ad354f1c2e59d206b3df42517d82a24 to your computer and use it in GitHub Desktop.
Save Hirosaji/2ad354f1c2e59d206b3df42517d82a24 to your computer and use it in GitHub Desktop.
d3v4 - Switchable Table
# d3v4 - Switchable Table
license:
mit
index 2018年5月 2018年4月 2018年3月 2018年2月 2018年1月
IT/通信 5.96 6.15 6.32 6.19 5.92
メディア 2.12 2.20 2.33 2.36 2.38
金融 1.47 1.37 1.56 1.56 1.43
メディカル 2.08 1.90 2.06 2.03 2.08
メーカー 1.89 1.87 1.96 2.00 1.84
商社/流通 0.89 0.95 0.95 0.97 0.84
小売/外食 0.84 0.98 1.03 1.07 0.93
サービス 2.84 2.70 2.87 3.02 2.77
その他 1.63 1.59 1.69 1.28 1.23
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
html, body,
.wrapper {
margin: 10px;
}
table {
border: 1px #E3E3E3 solid;
border-collapse: collapse;
border-spacing: 0;
}
table th {
padding: 5px;
border: #E3E3E3 solid;
border-width: 0 0 1px 1px;
background: #F5F5F5;
font-weight: bold;
line-height: 120%;
text-align: center;
}
table td {
padding: 5px;
border: 1px #E3E3E3 solid;
border-width: 0 0 1px 1px;
text-align: center;
}
.__selected {
color: red;
}
.__checked {
color: red;
}
.btn-group__item {
position: relative;
display: inline-block;
font-weight: bold;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: #222222;
background: #EEEEEE;
border-bottom: solid 4px #AAAAAA;
border-radius: 5px 5px 0 0;
transition: .4s;
font-size: 14px;
}
.btn-group__item:hover {
background: #BBBBBB;
color: #FFF;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="btn-group">
<button class="btn-group__item" value="job">職種別</button>
<button class="btn-group__item" value="ind">業種別</button>
</div>
<div class="switchable-table"></div>
<script type="text/javascript">
d3.queue()
.defer(d3.tsv, 'job_category.tsv')
.defer(d3.tsv, 'ind_category.tsv')
.await(function(error, job, ind) {
drawTable('2018年5月', job);
var selectedTable = "job";
d3.selectAll('.btn-group__item').on('click', function(){
if(selectedTable !== this.value){
d3.select(".switchable-table").select("table").remove();
var thisData = ("job"===this.value) ? job : ind;
drawTable('2018年5月', thisData);
selectedTable = this.value;
}
});
function drawTable(sortTarget, inputData) {
// クラス一覧
const tableClassName = 'switchable-table';
const tableClass = '.'+tableClassName;
const headerClassName = tableClassName + '__header';
const headerClass = tableClass + '__header';
const sortedData = returnSortedData(sortTarget, inputData);
const table = d3.select(tableClass).append('table');
const headers = ['2018年5月', '2018年4月', '2018年3月', '2018年2月', '2018年1月'];
const theadText = '<tr><th></th><th class='+headerClassName+'>' + headers.join('</th><th class='+headerClassName+'>') + '</tr>';
table.append('thead').html(theadText);
const tbody = table.append('tbody');
const selectedTrs = tbody.selectAll("tr").exit().remove().data(sortedData);
const newTrs = selectedTrs.enter().append("tr");
const trs = selectedTrs.merge(newTrs);
trs.selectAll('td')
.data(function(d){ return [d.index, d['2018年5月'], d['2018年4月'], d['2018年3月'], d['2018年2月'], d['2018年1月']]; })
.enter()
.append('td')
.text(function(d){
return d;
});
updateSlected(headers.indexOf(sortTarget));
d3.selectAll(headerClass)
.on('click', function(_, i){
const that = this;
clearTable(tableClass);
drawTable(that.textContent, sortedData);
updateSlected(i);
});
// ソート中のヘッダーに付与するクラスを更新する関数
function updateSlected(i){
const selector = d3.selectAll(headerClass);
selector.classed('__selected', false); // 古いクラスをクリア
selector.classed('__selected', function(_,j){ if(i===j) return true; });
}
// 入力されたデータを指定のヘッダーを基準にソートして返す関数
function returnSortedData(sortTarget, sortedData){
sortedData.sort(function(a, b) { return (a[sortTarget] > b[sortTarget]) ? -1 : 1; });
return sortedData;
}
// クリア機能
function clearTable(tableClass){
d3.select(tableClass).select("table").remove();
}
}
})
</script>
</div>
</body>
</html>
index 2018年5月 2018年4月 2018年3月 2018年2月 2018年1月
技術系(IT/通信) 7.75 7.72 8.02 8.01 7.98
専門職 6.68 6.84 7.04 7.36 6.69
技術系(電気/機械) 4.72 4.72 4.99 5.03 4.57
技術系(建築/土木) 3.98 3.68 4.15 4.48 4.12
営業系 2.34 2.43 2.56 2.56 2.41
技術系(メディカル) 2.11 2 2.17 2.24 2.22
クリエイティブ系 1.97 2.01 2.05 2.18 1.96
企画・事務系 1.76 1.74 1.75 1.73 1.63
販売/サービス系 1.27 1.12 1.19 1.16 1.02
技術系(化学/食品) 1.21 1.16 1.43 1.44 1.28
事務・アシスタント系 0.21 0.2 0.2 0.2 0.18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment