Design an interactive browse element

[tpendragon]

Reasoning

One of our primary goals is to enable joyful discovery. To support that we should have some way from the home page to draw people in to discover. In mockup 3 we played with the concept of a tree browse - the goal of this ticket is to expand on that idea and see if it lands somewhere that's fun to browse with.

Acceptance Criteria

• There are some wireframes for a joyful tree browse.
• A list of metadata fields we'd have to index to support tree browse.

First Step

Bust out the wireframing tools.

This will consist of 3 screens:

• The first screen is where the Tree Map navigation lives (home page?) and its default state
• The second screen would show what happens when you click on a box
• The third screen would show what happens when you navigate to the set of items that the box represents. This will likely be a search results screen filtered by topic/subject (or whatever facet the tree map represents). We would want to provide a way to edit that facet (maybe redisplaying the treemap in context) or remove the facet.

[sdellis]

D3 Zoomable Tree Map: https://observablehq.com/@d3/zoomable-treemap

Data looks like this:

data = 
    
  Object {
  name: "flare"
  children: 
    

  Array(10) [
  0: 
    

  Object {
  name: "analytics"
  children: 
    

  Array(3) [
  0: 
    

  Object {
  name: "cluster"
  children: 
    

  Array(4) [
  0: 
    

  Object {
  name: "AgglomerativeCluster"
  value: 3938
}
  1: 
    

  Object {name: "CommunityStructure", value: 3812}
  2: 
    

  Object {name: "HierarchicalCluster", value: 6714}
  3: 
    

  Object {name: "MergeEdge", value: 743}
]
}
  1: 
    

  Object {
  name: "graph"
  children: 
    

  Array(5) [Object, Object, Object, Object, Object]
}
  2: 
    

  Object {
  name: "optimization"
  children: 
    

  Array(1) [Object]
}
]
}
  1: 
    

  Object {name: "animate", children: Array(12)}
  2: 
    

  Object {name: "data", children: Array(7)}
  3: 
    

  Object {name: "display", children: Array(4)}
  4: 
    

  Object {name: "flex", children: Array(1)}
  5: 
    

  Object {name: "physics", children: Array(8)}
  6: 
    

  Object {name: "query", children: Array(29)}
  7: 
    

  Object {name: "scale", children: Array(10)}
  8: 
    

  Object {name: "util", children: Array(19)}
  9: 
    

  Object {name: "vis", children: Array(7)}
]
}