Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/.block

Last active June 23, 2017 12:10
Show Gist options
  • Save timelyportfolio/24ee2544ba12c8b7dedf4a472fb784de to your computer and use it in GitHub Desktop.
Save timelyportfolio/24ee2544ba12c8b7dedf4a472fb784de to your computer and use it in GitHub Desktop.
Download ZIP
d3 treemap with flattree converter
Raw
.block
license: mit
Raw
README.md

see flattree

browsable(
  tagList(
    tags$script(
      HTML(paste0(readLines("./build/d3-flattree.js"), collapse="\n"))
    ),
    tags$script(
      HTML(sprintf('var data=%s', jsonlite::toJSON(rhd, dataframe="rows"))
    )),
    tags$script(HTML(
'
var d3h = d3.flattree(data, ["index1","index2","index3"]);
d3h.sum(function(d) {return d.x});

var d3t = d3.treemap().size([400,400])(d3h);
var svg = d3.select("body").append("svg")
  .style("height", 400)
  .style("width", 400);

var cell = svg.selectAll("g")
  .data(d3t.leaves());

cell = cell.enter().append("g").merge(cell);

cell
  .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
var color = d3.scaleOrdinal(d3.schemeCategory20);
cell.append("rect")
  .attr("id", function(d) { return "rect-" + d.id; })
  .attr("width", function(d) { return d.x1 - d.x0; })
  .attr("height", function(d) { return d.y1 - d.y0; })
  .style("fill", function(d) { return color(d.data.index2) });

'   
    )),
  d3_dep_v4()
  )
)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/d3"></script>
<script src="https://cdn.rawgit.com/timelyportfolio/flattree/94a3b4ee744d77f102a7b10e1f40f087bae916c9/build/d3-flattree.js"></script>
</head>
<body style="background-color:white;">
<p><a href = "https://github.com/timelyportfolio/flattree">d3-flattree</a></p>
<script>
var data=[{"index1":"A","index2":"A.1","index3":"A.1.a","x":1.0271},{"index1":"A","index2":"A.1","index3":"A.1.b","x":0.3387},{"index1":"A","index2":"A.2","x":1.382},{"index1":"A","index2":"A.3","index3":"A.3.a","x":0.2994},{"index1":"A","index2":"A.3","index3":"A.3.b","x":2.7064},{"index1":"A","index2":"A.4","index3":"A.4.a","x":0.3641},{"index1":"A","index2":"A.4","index3":"A.4.b","x":0.1778},{"index1":"A","index2":"A.4","index3":"A.4.c","x":0.2501},{"index1":"A","index2":"A.4","index3":"A.4.d","x":3.8167},{"index1":"A","index2":"A.5","index3":"A.5.a","x":2.5203},{"index1":"A","index2":"A.5","index3":"A.5.b","x":0.5537},{"index1":"A","index2":"A.5","index3":"A.5.c","x":0.5518},{"index1":"A","index2":"A.5","index3":"A.5.d","x":22.5182},{"index1":"B","index2":"B.1","index3":"B.1.a","x":0.9673},{"index1":"B","index2":"B.2","index3":"B.2.a","x":0.0991},{"index1":"B","index2":"B.2","index3":"B.2.b","x":0.3581},{"index1":"B","index2":"B.2","index3":"B.2.c","x":0.0746},{"index1":"B","index2":"B.3","index3":"B.3.a","x":0.81},{"index1":"B","index2":"B.3","index3":"B.3.b","x":1.4519},{"index1":"B","index2":"B.3","index3":"B.3.c","x":3.4021},{"index1":"B","index2":"B.3","index3":"B.3.d","x":2.5843},{"index1":"B","index2":"B.4","index3":"B.4.a","x":1.3809},{"index1":"B","index2":"B.4","index3":"B.4.b","x":0.5503},{"index1":"B","index2":"B.4","index3":"B.4.c","x":4.1859},{"index1":"B","index2":"B.5","index3":"B.5.a","x":2.8247},{"index1":"C","index2":"C.1","index3":"C.1.a","x":0.0491},{"index1":"C","index2":"C.1","index3":"C.1.b","x":0.7325},{"index1":"C","index2":"C.1","index3":"C.1.c","x":1.7637},{"index1":"C","index2":"C.1","index3":"C.1.d","x":0.5869},{"index1":"C","index2":"C.2","index3":"C.2.a","x":0.1772},{"index1":"C","index2":"C.3","index3":"C.3.a","x":1.3248},{"index1":"C","index2":"C.3","index3":"C.3.b","x":0.8519},{"index1":"C","index2":"C.4","index3":"C.4.a","x":0.6197},{"index1":"C","index2":"C.4","index3":"C.4.b","x":2.1815},{"index1":"C","index2":"C.4","index3":"C.4.c","x":6.2094},{"index1":"C","index2":"C.4","index3":"C.4.d","x":1.3615},{"index1":"C","index2":"C.4","index3":"C.4.e","x":0.4195},{"index1":"C","index2":"C.5","index3":"C.5.a","x":0.1631},{"index1":"C","index2":"C.5","index3":"C.5.b","x":0.2486},{"index1":"C","index2":"C.5","index3":"C.5.c","x":4.8834},{"index1":"C","index2":"C.5","index3":"C.5.d","x":4.8746},{"index1":"C","index2":"C.5","index3":"C.5.e","x":0.6043},{"index1":"C","index2":"C.6","index3":"C.6.a","x":1.4971},{"index1":"C","index2":"C.6","index3":"C.6.b","x":3.0152},{"index1":"C","index2":"C.7","index3":"C.7.a","x":3.3826},{"index1":"C","index2":"C.7","index3":"C.7.b","x":0.4078},{"index1":"C","index2":"C.7","index3":"C.7.c","x":0.8165},{"index1":"C","index2":"C.7","index3":"C.7.d","x":0.6095},{"index1":"D","index2":"D.1","index3":"D.1.a","x":0.2346},{"index1":"D","index2":"D.1","index3":"D.1.b","x":0.1599},{"index1":"D","index2":"D.1","index3":"D.1.c","x":0.8626},{"index1":"D","index2":"D.1","index3":"D.1.d","x":1.2438},{"index1":"D","index2":"D.2","index3":"D.2.a","x":0.4624},{"index1":"D","index2":"D.2","index3":"D.2.b","x":0.7981},{"index1":"D","index2":"D.2","index3":"D.2.c","x":3.6304},{"index1":"D","index2":"D.3","index3":"D.3.a","x":0.5506},{"index1":"D","index2":"D.3","index3":"D.3.b","x":0.7127},{"index1":"D","index2":"D.3","index3":"D.3.c","x":2.6141},{"index1":"D","index2":"D.3","index3":"D.3.d","x":0.4816},{"index1":"D","index2":"D.3","index3":"D.3.e","x":0.6041},{"index1":"D","index2":"D.4","index3":"D.4.a","x":0.4661},{"index1":"D","index2":"D.4","index3":"D.4.b","x":0.3208},{"index1":"D","index2":"D.4","index3":"D.4.c","x":1.4695},{"index1":"D","index2":"D.4","index3":"D.4.d","x":0.587},{"index1":"D","index2":"D.4","index3":"D.4.e","x":0.7025},{"index1":"D","index2":"D.4","index3":"D.4.f","x":3.8191},{"index1":"D","index2":"D.4","index3":"D.4.g","x":1.147},{"index1":"D","index2":"D.5","index3":"D.5.a","x":0.1985},{"index1":"D","index2":"D.5","index3":"D.5.b","x":1.3901},{"index1":"D","index2":"D.6","index3":"D.6.a","x":1.2383},{"index1":"D","index2":"D.6","index3":"D.6.b","x":1.2707},{"index1":"D","index2":"D.6","index3":"D.6.c","x":0.0932}]
var d3h = d3.flattree(data, ["index1","index2","index3"]);
d3h.sum(function(d) {
return d.values ? d.values.x || 0 : 0;
});
var d3t = d3.treemap().size([400,400])(d3h);
var svg = d3.select("body").append("svg")
.style("height", 400)
.style("width", 400);
var cell = svg.selectAll("g")
.data(d3t.leaves());
cell = cell.enter().append("g").merge(cell);
cell
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
var color = d3.scaleOrdinal(d3.schemeCategory20);
cell.append("rect")
.attr("id", function(d) { return "rect-" + d.id; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.style("fill", function(d) { return color(d.parent.data.key) });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment