Explore options for a UI to explore data

[dabreegster]

See location of people or buildings, click a person to see their attributes and their travel behavior, click a building to see who goes there, etc. Also serve as more example code for how to work with SPC data.

Possible inspiration for handling O(million) people: https://observablehq.com/@kylebarron/geoparquet-on-the-web

[mfbenitezp]

What about Kepler I used to mapped some Covid data. Kepler

[dabreegster]

Somehow the Kepler link got broken, it's https://kepler.gl/demo/nyctrips for reference.

And sure! I threw together https://alan-turing-institute.github.io/uatk-spc/getting_started.html#example-draw-all-venues with plotly, but there's no interactivity. I haven't tried Kepler before. The two purposes are to help people understand the SPC data and to give example code for how to work with it.

[mfbenitezp]

Thanks. Let me see if I can pull up an example.

[dabreegster]

Ideas from @darribas: a lightweight viewer that can let the user explore a given .pb file. The ideal one would work on a browser client (i.e., no backend server), and take directly the URL of one of our .pb files, let the user check what they want to visualise (e.g., choropleth of population feature, mobility graph, etc.), and generate an interactive map with it

Some steps to building this:

• Mock up what the interface should look like
• Implement a skeleton HTML + CSS + JS setup using Leaflet or Mapbox or similar
• Get file reading to work (maybe locally drag-and-drop a .pb file, or point at a URL) -- examples of both in JS at https://github.com/a-b-street/osm2streets/blob/9e5974fbab19873bd9f0f95cd446a520905bc10a/streets-web/assets/js/files.js
• Get the Javascript protobuf reading working. The hard part is just picking a build system. https://github.com/protobufjs/protobuf.js/ looks active
• Wire up all of the ideas for visualizations and interactivity

[mfbenitezp]

Adding here another example (ONS) more align to the vision I have for the explorer/viewer tool that can be the next stage of SPC for more public engagement and explore the usability of the tool. https://www.ons.gov.uk/visualisations/censuspopulationchange/

[dabreegster]

I'm now confident with my basic web dev skills to look at starting this. But I think it'd be a useful exercise to start from a design mockup of what this app should do and how it should look / flow. @mfbenitezp, want to co-design this next week when you're in town? We can whiteboard what questions people could answer with it and sketch out how it should work, then I can use the JS / leaflet bits I've been learning to prototype it.

[darribas]

This sounds like a great theme to brainstorm on also for the SPC session on Wednesday?

On Mon, 1 Aug 2022 at 11:29, Dustin Carlino @.***> wrote:

I'm now confident with my basic web dev skills to look at starting this. But I think it'd be a useful exercise to start from a design mockup of what this app should do and how it should look / flow. @mfbenitezp https://github.com/mfbenitezp, want to co-design this next week when you're in town? We can whiteboard what questions people could answer with it and sketch out how it should work, then I can use the JS / leaflet bits I've been learning to prototype it.

— Reply to this email directly, view it on GitHub https://github.com/alan-turing-institute/uatk-spc/issues/19#issuecomment-1201017002, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADF4UZYDLHKE7DEFICPG23VW6RJNANCNFSM5T5HZZQA . You are receiving this because you were mentioned.Message ID: @.***>

--

Dani Arribas-Bel, PhD. (He/him) Url: darribas.org

Deputy Programme Director, Urban Analytics ESRC Fellow Alan Turing Institute @.***

Senior Lecturer in Geographic Data Science Department of Geography and Planning University of Liverpool (UK) @.***

[dabreegster]

https://mapmaker.cdrc.ac.uk/#/access-healthy-assets-hazards?m=ah3ahah_pc&lon=-1.5624&lat=51.5302&zoom=7.9 as an example

[dabreegster]

Ideas from Hadrien in Slack:

So there should be a selection pane on the left to check a topic and scale and then when you scroll over an area it shows a bunch of probability distribs and mean values. Then there should also be a flow category that draws the flows of a type checked, in particular a dynamic mode that follows some individuals (or sum for a few OAs) with a representation of time (say colour for type, thickness for number of people if sum / OA, time to draw with 1s = 1h, or just thickness for time if individuals) as it will be able to change each day

[dabreegster]

• Pick area, year, theme. See some kind of chloreopath
• One special theme is showing flows (flowmap, area heatmap, animate dots)
• Click an area and see a table of individuals
• Histograms/charts for some stuff

[dabreegster]

More convenient than digging through Slack everytime: https://fernando748264.invisionapp.com/freehand/SPC---AIUK-Wireframe-gwUP2BDve?dsid_h=94d7351172027cb9227fb5b6c9a366d7c3f57a5cddd7256e3e4d9c11c04ea594&uid_h=484eb32ebdb5e2edc7f73f888263587fc888e912fae5c6ce990fdf5d2297804b Going to export a PDF ASAP, because they're having an outage right now

[dabreegster]

Copying notes for visualizing time-use from @HSalat Slack:

• we arbitrarily pick a random 100 people, draw a dot for them
• for one day, we draw these lines for the destinations they go, using color for the activity type, and weight for time spent there
• there's some kind of pauseable animation that cycles through days of the week
• the blue people dots don't change, but you'd see their daily flows changing
• the size of the blue dot would be proportional to time spent at home
• maybe we can let people filter for the 100 people too (draw all the part-time employees with BMI > 25)
• also lockdown
• but with the day counter, it should be easy to add the events logic: it's the same mechanic as drawing commuting with the weird EXXXX columns as probability weights