mroberge / hydrocloud Goto Github PK

There should be an example of how to cite hydrocloud in README.md, the ?Help page, and perhaps in some of the code pages too. Maybe the wiki too?

Roberge, M. C., McGuire, M. P., & Lian, J. (2017). HydroCloud: A Web Application for Exploring Stream Gage Data. Journal of Open Research Software, 5(1), 18. DOI: http://doi.org/10.5334/jors.173

• README.md
• ?help page
• inside of the code, maybe?
• on one of the wiki pages?

page crashes when it sends a poorly formated array to D3 to plot as a path. Only occurs in hydrograph and histogram plots.

Either use a geoJSON file for the sites, or load a dynamic resource from the USGS that shows the currently active sites.

UK Environment Agency: Flood Warning Information Service

• A sample request for the List of Stations. Returns JSON.
• REST API
• An example page. This includes a hidden table with all of the data.
• https://flood-warning-information.service.gov.uk/river-and-sea-levels
• http://www.gaugemap.co.uk/#!Map/Summary/188/202
• They would like users to add the following attribution: this uses Environment Agency flood and river level data from the real-time data API (Beta)

Need a limit on the size of the legend so that it fits on smaller screens. And make the font smaller on smaller screens too.

The time x-axis is too crowded to read dates. When screen is narrow, reduce the number of tic marks, or reduce the number of labels.

Knockout seems to like Sammy

Right now, the more points you click on, the more data gets added to the viewModel. What is the limit? This will affect future plans to allow users to request older data.

• Web Storage
• Limit the number of sites that you can keep in memory
• List the sites in the Legend along with a delete "X"

More about this here:
https://help.github.com/articles/securing-your-github-pages-site-with-https/

This might not be possible since I use a custom domain;
It seems as simple as changing some settings.

Save data locally, and use this data instead of loading the data again.
Right now if you click on the same point twice, it will get added to the table twice, and it will download the data twice too.

When you click 'load new resource', it doesn't change the display at all. The graph should be redrawn with the new data. Right now the flag system doesn't trigger any behavior beyond logging to the console when the data have finished loading.

I guess it says it in the name, but some sites do provide discharge, not level. I'm using stage, however.

When you click on a site in the map view, an info window opens up. If you switch views and then come back, the window is still there, but with no content and very small. Instead, the window should be closed when the view changes.

There needs to be something indicating to the user that they have made a data request and need to wait for the data to be returned. This is further complicated by the ability of the system to make multiple requests.

Method 1: onresize use the window.onresize event to trigger your chart element to call the width function and set the width to the size of the window. Like this:

window.onresize = d3.select("#mychart_div")
  .call(myChart.width(window.innerWidth));

This will cause your entire chart to run through all of its operations, like sorting data or whatever.

Method 2: viewbox: with this method, you allow the svg element and everything in it to be scaled to fit a space. To make it work, you first need to set the width and height of the svg to 100% in the css. This forces the svg element to change in size as the window size changes: http://jsfiddle.net/Thyti/8KVtU/452/

svg { width: 100%; height: 100% }

Then, you add the viewbox attribute programatically to create a new coordinate system that has the same number of width and height units as the svg. You need to do it this way because D3 scales everything to the size of the svg, so you want the sizes to be 1:1. Finally, you set a preserveAspectRatio attribute to none, but this may be the default. See:

var svg = d3.select(this);
svg.attr("viewBox", "0 0 " + width + " " + height)
   .attr("preserveAspectRatio", "none");

This last method works great, but as the svg gets stretched, it makes the text look funny.

The navbars are set in position: absolute; you can't scroll down to see the text content on narrow screens. Change the navbars to position: fixed. This allows scroll, but it will break the carousel buttons, so these need to be taken out of the bootstrap system and replaced with knockout controls. Also, padding needs to be added to body to prevent overlap with navbars.

When you resize the window while the map is display: none, the map does not update to the new size. I could try resizing the map as soon as it is displayed again.

Google's FusionTables have been deprecated, and will be taken out of service on December 3, 2019.

HydroCloud uses FusionTables to plot all of the stream gage locations. Right now, we are plotting a reduced set that is >8,000 points. FusionTables helps by providing a Tile Service layer, so that only the points in the view area are plotted. If the entire dataset is plotted at once, it is too slow.

One alternative is to plot points using D3's Quadtree.

Currently, whenever a stream gage is not functioning, it posts a reading of -999999. This plots off the bottom of the graph, making a mess. This should be screened out, and there should be a system for missing data.

Dates from the winter contain sections where the y values seem to drop to below the bottom of the screen. These might be missing data. Add a screening function to find bad data. Figure out a way to plot these sections!

app is slow on my phone. I heard that androids are slow with CSS transitions. Could be. The graph and map pop quickly. Replace bootstrap animations with ko.

If you click on a bad site, it crashes the line parser in D3 and the whole system stops working.

add tests to see if online resources are available; test the different functions better; test the reuseable chart using the static data file.

Create a new state variable called 'view' to replace 'graph'. the view will include "map" in addition to all of the different types of graph. This will allow me to only update the graphs when they are showing, and only update the map when it is showing.

Several possibilities for blame:

• The new info box mechanism is slowing down the system.
• The new Fusion Table is slowing things because it is so big (create a smaller table)
• The new Fusion Table is slow because it is new and not cached?
• The new Fusion Table is slow because v2 is slow
• The new Fusion Table is slow because I didn't implement v2 correctly

Create a tutorial for first-time users, or add a tutorial button. When you click on it, it explains how to use the website.

Intro.js highlights different parts of the screen with text to explain that part. You click through the tutorial without ever leaving the page.

pegelonline only serves the most recent 31 days. Data measured every 15 minutes. 653 sites are available.

List of sites: http://www.pegelonline.wsv.de/webservices/rest-api/v2/stations.json

Sample request: http://www.pegelonline.wsv.de/webservices/rest-api/v2/stations/BONN/W/measurements.json?start=P30D

Invite people to re-use the code in their own websites, and to contribute suggestions and pull requests.

Some things to include:

• Explanation of how to use the hydrograph function
• Explanation of how to embed hydrocloud into a webpage
• Explanation of how to file an Issue Report
• Explanation of how to submit a pull request
• Suggestions for how people can contribute
• Example web pages

The 'invitation' to Users and Contributors should take place:

• On the help screen
• In the README.md file

• Flow duration X axis: "Number of measurements that exceed this discharge" should be shortened to 'exceedance'; perhaps a full explanation of how flow duration curves work could be put into the help page.
• Flow duration Y axis should match the Y axis on the hydrograph.
• Dates on the hydrograph are too crowded on small screens. Use fewer ticks. Perhaps add more ticks for larger screens, but design for small screens first.
• Are all of the data from Germany and the UK given as discharge, or are some stage? This should be reflected in the hydrograph Y axis. Also, all units should be converted to metric.