Ch. 8, Fig. 5 - D3.js in Action

This is the code for Chapter 8, Figure 5 from D3.js in Action for a spreadsheet with row and column sorting.

forked from emeeks's block: Ch. 8, Fig. 5 - D3.js in Action

<html>
<head>
  <title>D3 in Action Chapter 8 - Example 4</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
tr {
  border: 1px gray solid;
}

td {
  border: 2px black solid;
}

div.table {
  position:relative;
}
div.data {
  position: absolute;
  width: 90px;
  padding: 0 5px;
}

div.head {
  position: absolute;
}

div.datarow {
  position: absolute;
  width: 100%;
  border-top: 2px black solid;
  background: white;
  height: 35px;
  overflow: hidden;
}

div.gallery {
  position: relative;
}

img.infinite {
  position: absolute;
  background: rgba(255,255,255,0);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0,0,0,0);
}

</style>
<body>
<div id="traditional"> 
</div>
</body>
  <footer>
    
<script>
d3.json("tweets.json",function(error,data) { createSpreadsheet(data.tweets)});
      
      function createSpreadsheet(incData) {
        
        var keyValues = d3.keys(incData[0])
        
        d3.select("#traditional")
        .append("div")
        .attr("class", "table")

d3.select("div.table")
        .append("div")
        .attr("class", "head")
        .selectAll("div.data")
        .data(keyValues)
        .enter()
        .append("div")
        .attr("class", "data")
        .html(function (d) {return d})
        .style("left", function(d,i) {return (i * 100) + "px"});

d3.select("div.table")
        .selectAll("div.datarow")
        .data(incData, function(d) {return d.content})
        .enter()
        .append("div")
        .attr("class", "datarow")
        .style("top", function(d,i) {return (40 + (i * 40)) + "px"});
        
        d3.selectAll("div.datarow")
        .selectAll("div.data")
        .data(function(d) {return d3.entries(d)})
        .enter()
        .append("div")
        .attr("class", "data")
        .html(function (d) {return d.value})
        .style("left", function(d,i,j) {return (i * 100) + "px"});

d3.select("#traditional").insert("button", ".table").on("click", sortColumns).html("sort columns ")
        d3.select("#traditional").insert("button", ".table").on("click", restoreColumns).html("restore columns")

d3.select("#traditional").insert("button", ".table").on("click", sortSheet).html("sort")
        d3.select("#traditional").insert("button", ".table").on("click", restoreSheet).html("restore")
        
function sortSheet() {
          var dataset = d3.selectAll("div.datarow").data();
            dataset.sort(function(a,b) {
              var a = new Date(a.timestamp);
              var b = new Date(b.timestamp);
            return a>=b ? 1 : (a<b ? -1 : 0);
            })
            d3.selectAll("div.datarow")
            .data(dataset, function(d) {return d.content})
            .transition()
            .duration(2000)
            .style("top", function(d,i) {return (40 + (i * 40)) + "px"});
        }
        
        function restoreSheet() {
          d3.selectAll("div.datarow")
            .transition()
            .duration(2000)
            .style("top", function(d,i) {return (40 + (i * 40)) + "px"});
        }
        function sortColumns() {
          d3.selectAll("div.datarow")
          .selectAll("div.data")
            .transition()
            .duration(2000)
        .style("left", function(d,i,j) {return (Math.abs(i - 4) * 100) + "px"});
        }

function restoreColumns() {
          d3.selectAll("div.datarow")
          .selectAll("div.data")
            .transition()
            .duration(2000)
        .style("left", function(d,i,j) {return (i * 100) + "px"});
        }

}

</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js