refine dataset detail and data visualization UI

[alee]

https://plotly.com/dash/

We don't have the resources to switch to dash now (it was a little too rough around the edges when we were initially evaluating frameworks) but we can still look to their showcases list for inspiration on how to design a better UI for displaying the map + stats. We should select a few exemplar interfaces that we think could be used for the dataset detail page UI and then refactor the SKOPE UI to match.

Showcases: https://dash-gallery.plotly.host/Portal/

Dashboards with maps:

• https://dash-gallery.plotly.host/dash-opioid-epidemic/
• https://dash-gallery.plotly.host/dash-uber-rides-demo/

[alee]

@cpritcha suggested we consider building a dedicated visualization page separate from the dataset detail page (the detail page offers the properly parameterized links to get to the visualization page where you can do more detailed stats + data viz)

[kintigh]

That sounds like a good ideas to me. It would probably be too complex and cluttered to do it on the existing page

…

_____________________________________________ Keith Kintigh, 421 Calle Kokopelli, Santa Fe, NM 87501 Prof. Emeritus of Archaeology, Arizona State University

________________________________ From: A Lee <notifications@github.com> Sent: Wednesday, October 7, 2020 2:00:37 PM To: openskope/skopeui <skopeui@noreply.github.com> Cc: Subscribed <subscribed@noreply.github.com> Subject: Re: [openskope/skopeui] exemplar dash UIs to look to for inspiration (#51) @cpritcha<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_cpritcha&d=DwMCaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=E3UopU80XOncoKPOe8_Fa3P_D_0E5EoYH1wErMnY3L4&s=KQdCgzZsxdYp4ktVQfQzTqNh4QiufQ42n9A6kfsPE94&e=> suggested we consider building a dedicated visualization page separate from the dataset detail page (the detail page offers the properly parameterized links to get to the visualization page where you can do more detailed stats + data viz) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_openskope_skopeui_issues_51-23issuecomment-2D705162141&d=DwMCaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=E3UopU80XOncoKPOe8_Fa3P_D_0E5EoYH1wErMnY3L4&s=S3MGMqDtJygojAqKjODrGy9VT2LQb_V3tFrN6bxqATI&e=>, or unsubscribe<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ACYCQJKQGUJV2RUWUS5H5ETSJTCGLANCNFSM4SH2W2YQ&d=DwMCaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=E3UopU80XOncoKPOe8_Fa3P_D_0E5EoYH1wErMnY3L4&s=v2klEX12FwdrFwCOrlEX4fRXHa3M-GpYf__VBw4cFDI&e=>.

[chrstngyn]

Mockups for data viz UI

Overview

Metadata

Stats

[chrstngyn]

Comments from @kintigh

Thank you for sending this along. I think it has some good ideas. While I do have a few thoughts, I am not saying “ do this”. Looking at what you have here allowed me to think about this better and offer some thoughts for consideration/discussion.

1. It seems to me that in this layout we spend a lot of screen real estate on the left-side navigation bar. I’m wondering if we want to go back to navigation buttons across the top (under the header) that open different pages or windows. Maybe Datasets, Problem Definition, Detailed Metadata, Map Animation, and Graphs&Statistics.
2. Dataset /Landing Page, I think pretty much what you have now is good.
3. Problem Definition What if we had a Problem Definition page, or better yet a window. Once you select a dataset it would take you to that window. Also, on the Map Animation and Statistics windows/pages there would be a button that says “Change Selections” or something like that, which would pop up the Problem Definition Window over what you are doing. If it isn’t technically difficult, this might be a window that could be left open. If the focus ever shifts to that window and something changes then you update the other open SKOPE

• This window should have a relatively large map that shows the selected area shown along with pan/zoom, base-map selection, area selection editing tools plus upload download area selection controls. It could also have the selected area are in km2 (thank you!). I think the base map selection could just be a regular text set of radio buttons (not within the map).
• The page should also allow temporal selection certainly earliest and latest with numbers that you type in and possibly a timeline bar with slider dot at either end that starts out at the datasets extremes but has a moveable dot for the beginning and another for the end date.
• Then I think you also have a variable list with short descriptions (as you have on the overview page) , and again a regular text radio buttons for variable selection not on the map. I think that will be clearer than embedding everything on the map.

4. Metadata. Page I think that can just be metadata, and could include provenance information we eventually add too.
5. Animated map. I think we need a separate map animation page, which would need only a large map (covering most of the screen), overlay opacity, and the animation controls (timeline with year slider, play, pause, step forward etc.) as you have them on the current analysis page. This would mainly be deleting stuff from the current analysis page.
6. Graph/Statistics. Then I think the statistical analysis page makes sense. I like the idea of dropdown list of types of things you can do. Many of those options might require some text input or explicit radio button selections. And may would also have some numerical/statistical summaries. For example, one graph type would be raw data values (what we graph now) , that would display as output numerical means and standard deviations. Another drop-down option might be smoothed data with someplace to select the number of years smoothed and a radio button for smoothing method (centered or training or spline for example) Another drop-down option might be Z=scores relative to a mean and standard deviation that is entered. And of course a change selections button.

[bocinsky]

Thanks Christine.

…

On Oct 30, 2020, at 11:20 AM, Christine Nguyễn ***@***.***> wrote: Comments from @kintigh <https://github.com/kintigh> Thank you for sending this along. I think it has some good ideas. While I do have a few thoughts, I am not saying “ do this”. Looking at what you have here allowed me to think about this better and offer some thoughts for consideration/discussion. It seems to me that in this layout we spend a lot of screen real estate on the left-side navigation bar. I’m wondering if we want to go back to navigation buttons across the top (under the header) that open different pages or windows. Maybe Datasets, Problem Definition, Detailed Metadata, Map Animation, and Graphs&Statistics. Dataset /Landing Page, I think pretty much what you have now is good. Problem Definition What if we had a Problem Definition page, or better yet a window. Once you select a dataset it would take you to that window. Also, on the Map Animation and Statistics windows/pages there would be a button that says “Change Selections” or something like that, which would pop up the Problem Definition Window over what you are doing. If it isn’t technically difficult, this might be a window that could be left open. If the focus ever shifts to that window and something changes then you update the other open SKOPE This window should have a relatively large map that shows the selected area shown along with pan/zoom, base-map selection, area selection editing tools plus upload download area selection controls. It could also have the selected area are in km2 (thank you!). I think the base map selection could just be a regular text set of radio buttons (not within the map). The page should also allow temporal selection certainly earliest and latest with numbers that you type in and possibly a timeline bar with slider dot at either end that starts out at the datasets extremes but has a moveable dot for the beginning and another for the end date. Then I think you also have a variable list with short descriptions (as you have on the overview page) , and again a regular text radio buttons for variable selection not on the map. I think that will be clearer than embedding everything on the map. Metadata. Page I think that can just be metadata, and could include provenance information we eventually add too. Animated map. I think we need a separate map animation page, which would need only a large map (covering most of the screen), overlay opacity, and the animation controls (timeline with year slider, play, pause, step forward etc.) as you have them on the current analysis page. This would mainly be deleting stuff from the current analysis page. Graph/Statistics. Then I think the statistical analysis page makes sense. I like the idea of dropdown list of types of things you can do. Many of those options might require some text input or explicit radio button selections. And may would also have some numerical/statistical summaries. For example, one graph type would be raw data values (what we graph now) , that would display as output numerical means and standard deviations. Another drop-down option might be smoothed data with someplace to select the number of years smoothed and a radio button for smoothing method (centered or training or spline for example) Another drop-down option might be Z=scores relative to a mean and standard deviation that is entered. And of course a change selections button. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#51 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB7SSM5XO5G3W6DB5IWJ44LSNLYUXANCNFSM4SH2W2YQ>.

[alee]

Notes from the 2020-11-04 call

Attendees: Ann, Keith, Andrew, Keith, Christine, Calvin, Allen

• landing page can remain mostly the same
• clicking on a dataset brings up a visible workflow

Select Dataset <-> Define Study Area <-> Animate Map <-> Visualize Data <-> View Metadata

Define Study Area

focused on just entering / editing / saving / importing the spatial context

• consider allowing latlong entry
• remove all other controls (opacity, temporal range, variable layer selection)
• include the basic metadata (variables, basic description listed in current right hand side of the dataset detail pages)

Animate Map

in Animate Map we should see the time series graph as well so we can see the spatial variability alongside the timeseries data

• include opacity control, temporal range (display only), variable layer selection
• replace temporal range slider with the timeseries itself as the control to change the selected year which changes the layer on the map. Likewise, animation should modify the selected year in the timeseries data (need to check feasibility of this)
• remove options to adjust the study area (download geojson still available?)

Visualize Data

• work out what statistics should be displayed, no need to display the study area as a map anymore (from @kintigh)
• display the study area's area (sq km), selected variable and basic metadata (e.g., Palmer Modified Drought Index), temporal range. Allow changes to temporal range

View Metadata

• display all detailed metadata, and eventually provenance citable figures w/ minimal provenance #18 develop handcrafted UI for provenance information #48

[cpritcha]

Ability to click anywhere on a plotly plot to add lines plotly/plotly.js#5138

[chrstngyn]

Hi everyone,

I'll update the mockups and attach them to this issue thread by Thursday.

In the meantime, I've attached the Figma design file with the mockups in progress:

https://www.figma.com/file/jSJtUnNQcWvOjqa20PUyc9/Data-Viz-UI?node-id=4%3A0

[kintigh]

Christine

This is looking good. Thank you. A few suggestions.

Navigation at the top. Also, I think people need to select a dataset and define a study area, but after that they may go straight to the visualize screen and may look at the metadata at any point. I think I would leave off the numbers off the 5 options. I think this looks more linear than it needs to. Would these be better as tabs?

Define Study Area. I think we want this screen to be dominated by the map. I know that I suggested having the basic metadata here, but I wonder if there is a way to fit it in in a way that allows the map to be much bigger, or maybe it is better not to have the metadata at all. People can easily click on the metadata navigation button and come right back, right? Do we need the Animate Map button on the bottom? It takes space and I think we can rely on the navigation to the top.

Animate Map. Here again we want the map to dominate. The graph needs to be much smaller. I am not sure we need the variables listed separately from the layers. Also, I don't think we need the dataset description or download chart on this page the latter will be on the visualize pages. The date range selection needs to be really obvious. We need to be able easily to type in a begin and end date for the sequence (though if it can be done nicely letting people know what the extreme begin and end dats for the series are. I think the current year can bounce along the graph and doesn’t need a separate line. I defintely don't think we need the study area size here. I'm not sure that needs to be anywhere except the define study area page.

Metadata. I think I would also include the paragraph and variable list and description that you have on the define study area page so one sees everything together.

I’m not sure what the Source button does--on several pages

Thanks for your good work on this,
Keith

[chrstngyn]

Navigation at the top. Also, I think people need to select a data set and define a study area, but after that they may go straight to the visualize screen and may look at the metadata at any point. I think I would leave off the numbers off the 5 options. I think this looks more linear than it needs to. Would these be better as tabs?

I can omit numbers so that it is less linear, but I can understand why it can be confusing. I can implement the top navigation without numbers, and people can test out the navigation and see how they feel. If people prefer tabs after testing than I can certainly implement tabbed navigation instead.

Define Study Area. I think we want this screen to be dominated by the map. I know that I suggested having the basic metadata here, but I wonder if there is a way to fit it in in a way that allows the map to be much bigger, or maybe it is better not to have the metadata at all. People can easily click on the metadata navigation button and come right back, right? Do we need the Animate Map button on the bottom? It takes space and I think we can rely on the navigation to the top.

I will remove the Animate Map button at the bottom. I added it to give the user two options of navigating through the process, but I think it is OK if the top nav is the only method of navigation.

Animate Map. Here again we want the map to dominate. The graph needs to be much smaller. I am not sure we need the variables listed separately from the layers. Also, I don't think we need the dataset description or download chart on this page the latter will be on the visualize pages. The date range selection needs to be really obvious. We need to be able easily to type in a begin and end date for the sequence (though if it can be done nicely letting people know what the extreme begin and end dats for the series are. I think the current year can bounce along the graph and doesn’t need a separate line. I defintely don't think we need the study area size here. I'm not sure that needs to be anywhere except the define study area page.

Metadata. I think I would also include the paragraph and variable list and description that you have on the define study area page so one sees everything together.

I can make changes to the mockups so they reflect the changes you suggested.

I’m not sure what the Source button does--on several pages

The source button condenses the information that is currently displayed as Source: http://srtm.csi.cgiar.org, but I can reverse this design change if it is clearer to display the full link to the source of the dataset.

[kintigh]

This sounds good. Thank you. On the source button, I am not sure we need that all these places as long as it is on the detailed metadata page. I understand having multiple ways to get things but I think that just adds complexity to the screen and if people wanted that they would go to the metadata page. If others disagree they should speak up. Keith

…

__________________________________________________________ Keith Kintigh<Keith%20Kintigh>, Professor Emeritus, Arizona State University<http://asu.edu/> Tempe, USA Coalition for Archaeological Synthesis<http://archsynth.org/>, Co-President tDAR<http://tdar.org/> - the Digital Archaeological Record, Co-Chair, Board of Directors Contact: 505-395-7979(h) 421 Calle Kokopelli, Santa Fe, NM 87501 From: Christine Nguyễn <notifications@github.com> Sent: Wednesday, November 18, 2020 10:07 AM To: openskope/skopeui <skopeui@noreply.github.com> Cc: Keith Kintigh <kintigh@asu.edu>; Mention <mention@noreply.github.com> Subject: Re: [openskope/skopeui] refine dataset detail and data visualization UI (#51) Navigation at the top. Also, I think people need to select a data set and define a study area, but after that they may go straight to the visualize screen and may look at the metadata at any point. I think I would leave off the numbers off the 5 options. I think this looks more linear than it needs to. Would these be better as tabs? I can omit numbers so that it is less linear, but I can understand why it can be confusing. I can implement the top navigation without numbers, and people can test out the navigation and see how they feel. If people prefer tabs after testing than I can certainly implement tabbed navigation instead. Define Study Area. I think we want this screen to be dominated by the map. I know that I suggested having the basic metadata here, but I wonder if there is a way to fit it in in a way that allows the map to be much bigger, or maybe it is better not to have the metadata at all. People can easily click on the metadata navigation button and come right back, right? Do we need the Animate Map button on the bottom? It takes space and I think we can rely on the navigation to the top. I will remove the Animate Map button at the bottom. I added it to give the user two options of navigating through the process, but I think it is OK if the top nav is the only method of navigation. Animate Map. Here again we want the map to dominate. The graph needs to be much smaller. I am not sure we need the variables listed separately from the layers. Also, I don't think we need the dataset description or download chart on this page the latter will be on the visualize pages. The date range selection needs to be really obvious. We need to be able easily to type in a begin and end date for the sequence (though if it can be done nicely letting people know what the extreme begin and end dats for the series are. I think the current year can bounce along the graph and doesn’t need a separate line. I defintely don't think we need the study area size here. I'm not sure that needs to be anywhere except the define study area page. Metadata. I think I would also include the paragraph and variable list and description that you have on the define study area page so one sees everything together. I can make changes to the mockups so they reflect the changes you suggested. I’m not sure what the Source button does--on several pages The source button condenses the information that is currently displayed as Source: http://srtm.csi.cgiar.org<https://urldefense.com/v3/__http:/srtm.csi.cgiar.org__;!!IKRxdwAv5BmarQ!PlwedbFtRy6E6u6z7VybIYK5yXaDJlLn4DXqXVouGFoxboeEZKa1cWfRi-uoY5T3CnR_gQ$>, but I can reverse this design change if it is clearer to display the full link to the source of the dataset. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https:/github.com/openskope/skopeui/issues/51*issuecomment-729818584__;Iw!!IKRxdwAv5BmarQ!PlwedbFtRy6E6u6z7VybIYK5yXaDJlLn4DXqXVouGFoxboeEZKa1cWfRi-uoY5SvY7_8UA$>, or unsubscribe<https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/ACYCQJJ2R55PI7UCPCRZUQDSQP5LVANCNFSM4SH2W2YQ__;!!IKRxdwAv5BmarQ!PlwedbFtRy6E6u6z7VybIYK5yXaDJlLn4DXqXVouGFoxboeEZKa1cWfRi-uoY5TmCTYIaA$>.