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)}
]
}

[hackartisan]

Here are some drawings I did. The concept is a set of "explore" interactives (that could also be used as the filters for the search results page) and when you click on one it gives you a paginated sampling of items. I thought it would be fun to do a slider-type transition from one interactive to another. When a user has applied as many of these as they want, they have an option to "send" the set to a search results page and add keywords, etc. Functionality is / could be very similar to the search itself, but pulling it into its own separate area with language around "explore" rather than search might situate it in a context that is more appealing for some users / use cases.