d3.load.tsv.201703121037

Create an table from TSV file with d3.js.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<body>
  <p>Click on the table column to sort.</p>
  <table id="License">
    <tr><th>Library</th><th>License</th><th>Copyright</th></tr>
    <tr><th><a href="https://d3js.org/">d3.js</a></th><th><a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a></th><th><a href="https://github.com/d3/d3/blob/master/LICENSE">Copyright 2010-2016 Mike Bostock</a></th></tr>
  </table>
</body>

CSS

#NameList { border-collapse: collapse; }
#NameList th { background-color: #CCC; }
#NameList td, 
#NameList th {
  border-collapse: collapse;
  border: 1px #CCC dotted;
  padding: 6px;
}
#License {
  margin-top: 30px;
}
#License td,
#License th {
  padding: 2px;
  font-size: 10px;
}

JavaScript

var tsvUrl = "https://raw.githubusercontent.com/ytyaru/structure.text.Upload.201703120923/master/res/tmp/2017/0312/Repositories.tsv"

d3.tsv(tsvUrl, function(error, data) {
	console.log(data);
  makeHtml(data)
});

function makeHtml(data)
{
  makeList(data)
  makeTotal(data)
}

function makeTotal(data)
{
  var table = d3.select("body").insert("table",":first-child").attr("id","TotalHeader");
  var thead = table.append("thead");
  var tbody = table.append("tbody");
  
  var startDt = new Date(data[(data.length - 1)]["CreatedAt"])
  var endDt = new Date(data[0]["CreatedAt"])
  var days = parseInt((endDt.getTime() - startDt.getTime()) / (1000*60*60*24));
  
  var totaldata = {
    "リポジトリ累計数": data.length,
    "経過日数": days,
    "リポジトリ1日平均数": (data.length / days).toFixed(7),
    "開始日": formatDate(startDt,"yyyy-MM-dd")
  }
  thead.append("tr")
    .selectAll("th")
      .data(d3.entries(totaldata))
      .enter()
      .append("th")
      .text(function(d){return d.key;});
  tbody.append("tr")
    .selectAll("td")
      .data(d3.entries(totaldata))
      .enter()
      .append("th")
      .text(function(d){return d.value;});
}

function makeList(data)
{
  var table = d3.select("body").insert("table",":first-child").attr("id","RepositoryList");
  var thead = table.append("thead");
  var tbody = table.append("tbody");
  
  thead.append("tr")
    .selectAll("th")
      .data(d3.entries(data[0]))
      .enter()
      .append("th")
      .text(function(d){return d.key;});
  tbody
    .selectAll("tr")
      .data(data)
      .enter()
      .append("tr")
    .selectAll("td")
      .data(function(d){return d3.entries(d)})
      .enter()
      .append("td")
      .text(function(d){return d.value;});
}

function formatDate(date, format)
{
    if (!format) format = 'yyyy-MM-dd HH:mm:ss.fff';
    format = format.replace(/yyyy/g, date.getFullYear());
    format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
    format = format.replace(/dd/g, ('0' +...