Building Comparison Histograms

[nicolettehayes]

I know it's been a long and winding road for the Building Comparison View, but I wanted to recap from an interaction standpoint the 2 options that I can imagine being positive for implementation. Whichever seems the most doable from a performance standpoint is obviously the priority.

Problem:

Currently, sparklines appear for only the top row in the Comparison chart. When I select another building, the sparklines do not shift to the selected row (and the color highlight also doesn't appear); rather the building highlights off screen on the map.

Solution # 1 (keep single row of sparklines in Building Comparison):

When a building is selected within the Building Comparison Chart, the sparklines appear in that row, and disappear from the previously selected row. Simultaneously in the background, the same building becomes selected on the map, but without force-scrolling the user to see it.

Solution # 2 (remove all sparklines in Building Comparison):

Only numbers appear in every row of the Building Comparison Chart. The selected row figures appear in color, but without sparklines. When a different building is selected, those numbers appear in color and the building becomes simultaneously selected on the map. Additionally, I think adding a scroll-to-map functionality could be good.

[almccon]

This appears to be equally broken on http://energybenchmarkingdc.org/

[almccon]

Solution #1 now working when you click on buildings on the map. When you click on buildings in the comparison list, all the histograms disappear unfortunately.

@sconnelley if you get a chance can you figure out why this line isn't working? It doesn't seem to update the state, instead it sets building to null instead of the value that we want it to set.

seattle/src/app/views/building_comparison/building_comparison.js

Line 389 in 219733f

this.state.set({building: buildingId});

[almccon]

To clarify, this is hard to test: If you click on the map it shows the histogram, but it doesn't re-order the list... so most of the time the new histogram is somewhere WAY down the list.

In this gif I filtered the buildings a ton, and ordered them so the two biggest ones were on top. This illustrates how the selected building's histogram shows up in the current sort location, without re-ordering.

Here are the filters I used to get the gif: https://cityenergyproject.github.io/seattle/#seattle/2015?filters[0][field]=energy_star_score&filters[0][min]=80&filters[0][max]=92&filters[1][field]=reported_gross_floor_area&filters[1][min]=369091&layer=reported_gross_floor_area&metrics[]=energy_star_score&metrics[]=reported_gross_floor_area&sort=reported_gross_floor_area&order=desc&lat=47.61087915638172&lng=-122.3248243331909&zoom=14&building=236