## 2018-04-18 Playing with #Treemaps

A treemap of lively4-core JavaScript files without external code. Color shows different time...

<script>
import d3 from "src/external/d3.v5.js"
import moment from "src/external/moment.js";

(async () => {
  function stripTree(tree) {
    if (tree.children) {
      tree.children = tree.children.filter(ea => stripTree(ea))
    }
    if (tree.name == "external") return false;
    if (tree.name == "node_modules") return false;
    if (tree.name == "reactive") return false;


    if (tree.type == "directory") return true;
    if (tree.name.match(/\.js$/)) return true
    return false
  }
  
  
  var tree = await lively.files.fileTree(lively4url + "/")
  stripTree(tree)

  var div = await lively.create("div")
  div.style = "background-color: gray; width: 800px; height:600px; position: relative"
  var tm = await lively.create("lively-d3-treemap")
  tm.style = "position: absolute; top: 0px; left: 0px; width: 100%; height: 100%"

  
  var c = d3.scaleSequential(d3.interpolatePiYG)
  var colorScale =  d3.scaleSequential(d3.interpolatePiYG)
  // d3.scaleLog().range(["blue","yellow","green","orange"])
  var now = Date.now()

  tm.dataColor = (d) => {
    var time = moment(d.modified)
    var days = (now - time._d.getTime()) / 1000 / 60 / 60 / 24
    console.log("color " + days  / 356.0)

    return colorScale(days / 356.0)
  }
  tm.dataTitle = (d) => {
    return d.id + "\n" + d.modified + "\n" + Math.round(d.size / 1024) +"k"
  }
  div.appendChild(tm)
  tm.setTreeData(tree)
  return div
})()
</script>