Unified Filter/Browse Design

[NealHumphrey]

At last week's meeting, we discussed making the Filter method (for choosing individual buildings) and the Browse method (for viewing city-wide data sets that are not buildings) into one unified view. To make this happen, we need a 'good enough' implementation plan about how to start building this unified page. The Javascript team members will need an overall layout and initial set of core design elements right away - no later than May 16th. We can continue refining the components after that point, providing them to the JS team as we go.

Core functionality for a unified data exploration page based on the current map view:

• Apply data filters to buildings

  • Use this list of initial data fields.

  • This requires 3 categories of filter UI components:

    • select many from a list (the "multiple search selection" demo from this library would be a good starting point, though for short lists there could be a toggleable button version.
    • Set min / max on a continuous range (like this two handle slider
    • Start/end date

  • Clear path to adding more data sources.

• Select a zone type (ward, zip, etc.) and a data set from a large list of data sources, which are displayed as a chloropleth. Behavior is like the 'choose a dataset' functionality on this tool but with the added choice of zone type.

• Clearly display which chloropleth data set is chosen

• Clearly display which filter criteria have been applied

• Display a dataset specific legend for the chloropleth data

• Display a legend indicating the meaning of color coding of dots on the map (i.e. buildings)

• Sidebar snapshot view - some sort of summary statistics/graphs/comparisons.

• Any mobile responsiveness needs to follow simple Bootstrap grid system rules that can be applied to appropriate design sections.

Design tradeoffs:

• Do we eliminate color coding of building dots and instead only use in/out of filters (e.g. orange vs. gray), simplifying the view by having building dots only be related to filter criteria?
• Need to choose whether the sidebar snapshot view is for the chloropleth data, the filtered building data, or both.
• Do we try to include non-building point-based data? For instance, crime incidents or building permits can be displayed as aggregates (count per ward) or points (dot for each incident). Only displaying these in aggregate form simplifies the distinction between the functionality of the two ways you can work with the data, but reduces functionality.

[NealHumphrey]

The DC Action for Children example above ("choose a dataset functionality on this tool") has a pullout sidebar. The Disaster Operations map that @rmcarder is working on just implemented similar functionality. [This commit]((https://github.com/ccusa/Disaster_Vulnerability_Map/pull/36/files) got the sidebar open/close navigation working. If we go with a similar 'slide open sidebar' for choosing data sources, we can use this to draw some code from to jump start it.

[NealHumphrey]

From Chris: current version https://github.com/ccusa/Disaster_Vulnerability_Map/pull/36/files

[NealHumphrey]

Note, this is the current action items on this issue: https://github.com/codefordc/housing-insights/issues/289