theopak / drought.io Goto Github PK

main.html:

droughtMap.js has been added to app/scripts/directives. It depends on d3Service and topoJsonService. Something is going wrong with the services being utilized...

Are we still including agricultural data in the chart?

\cc @agulen

Currently the directives/droughtMap.js file is a mess because it combines the use of a factory, the global scope, and pure luck in order to draw the map. One result is that the map never appends layers in the right order because the largest file is the layer that we want on the bottom (and yet the largest file takes the longest to load and therefore appends last). This is generally a bad idea.

Here's a good explanation of Angular's $q.all() function which reduces a number of promises into one which is resolved only then all the promises are resolved: http://stackoverflow.com/questions/21024411/angular-q-how-to-chain-multiple-promises-within-and-after-a-for-loop

The droughtMap directive requires operations to happen in this order:

1. D3 must be loaded and instantiated.
2. Topojson must be loaded and instantiated.
3. All data files must be loaded in any order. Data files include the us map and the drought severity zone map. (or we could combine topojson files server-size as describe in Issue #3).
4. The data files can be drawn.

I don't think we've collected any meaningful user feedback from the class, so it's essential that we collect external feedback. @agulen what do you think? A few simple steps:

1. Set up experiments A/B tests and measure engagement from site users.
2. Add a survey to the view so that we're prepared to collect information. Google Forms would probably be sufficient for the few data features we'd want to measure.
3. Get as many users as possible.

The things we want to measure:

• minutes of engagement
• percent of users that don't interact with the visualization the way we expect:
  • clicks and gestures on non-interactive things
  • failure to click on clickable areas
  • failure to scroll/zoom/drag on necessary areas
  • failure to load data into the chart
• user's estimate of areas affected by drought before and after seeing the map and chart
• questions the user has after seeing our visualization

It's pretty cool of the NOAA to provide access to official government data through their Web Services REST API, however, it's not appropriate for on-demand use because it's slow and unreliable.

Sets that returned 200 OK with a year's worth of precipitation data for a single location had response times from 63 ms to 1.5 minutes, although during development I've noticed that the same requests often return 502 Bad Gateway. I'm not sure if this lack of speed and reliability are happening on the API's side.

The data that we're fetching represents historical weather. When we need to load this we should probably grab a local copy instead of using the API.

I think this would be an appropriate solution:

• A Node.js job downloads all the data sets and stores them as static JSON or CSV/TSV files.
  • The app needs the data to be refreshed daily, at most.
  • The job can be scheduled to check for new data periodically.
• A service routes requests to the right file.
• Our web app requests static files from our own web storage instead of the NOAA service.
• The solution is successful is it serves responses faster and more reliably than the NOAA service.

-Titles
-Legends
-Units
-Scales
-Small descriptions

We need a script that outputs a topojson file with the following characteristics. Ideally, the script will run as a service (or at least a cron job) on the server.

• Shows all of the contiguous USA and nothing else.
• Contains shapes describing one set of NOAA locationid types (e.g. states, continues, or ZIP codes).
• Each shape is divided into sections tagged by brought severity level (or non-drought status).
• Projected with albersUsa() projection
• Reasonable small file size (e.g. no more than a few MB).

Here are some helpful links:

• http://www.tnoda.com/blog/2013-12-07
• http://droughtmonitor.unl.edu/MapsAndData/GISData.aspx
• http://www.mapshaper.org
• https://gist.github.com/radcliff/89e1c0619330c1d0b3cf

[https://github.com/ngyewch/angular-rickshaw](angular-rickshaw) 0.5.0 (the latest stable version) requires Angular 1.2.3, but our app uses Angular 1.3.x (the latest version, one difference is that it doesn't support IE 8). This conflict prevents our app from building on the test and production environments.

We have a few options in fixing this:

• Downgrade everything we're using to Angular 1.2.0.
• Fix angular-rickshaw to work with Angular 1.3.0.
• Figure out how to use the parts we need from both.