INBOs name appears on top of map

When you browse to the bird tracking explorer en scroll down, the text "Research Institute Nature and Forest" appears above the map instead of in the header bar.

Add birds in select-bird dropdown

Use bird_tracking_devices to populate the dropdown select-bird #39 (comment) with all bird names. They should be grouped per species in <optgroup>s and sorted alphabetically.

Tasks

Example

Larus fuscus
- Eric
- Michelle
- Misja

Get data via CartoDB API

This query can be used to get distance_from_nest data. The select clause can be extended or limited:

SELECT cartodb_id, date_time, day_of_year, ST_Distance_Sphere(the_geom, ST_GeomFromText('POINT(3.182863 51.3407476)', 4326)) as distance_from_nest_in_meters FROM tracking_eric ORDER BY date_time

Example for 10 records:

https://lifewatch-inbo.cartodb.com/api/v2/sql?q=SELECT%20cartodb_id,%20date_time,%20day_of_year,%20ST_Distance_Sphere(the_geom,%20ST_GeomFromText('POINT(3.182863%2051.3407476)',%204326))%20as%20distance_from_nest_in_meters%20FROM%20tracking_eric%20ORDER%20BY%20date_time%20LIMIT%2010

Add sql?format=json& for different formats.

Add day selection to year chart

Add functionality to year-chart so that user can select a day.

Tasks

Trigger a call when selecting a day
Effected elements should load new data, see interaction C in #39 (comment)
Highlight the selected day (black border)
Add button to clear selection (@peterdesmet)

Show metric metadata

Add metadata on the metric selected in select-metric in metric-metadata .

Tasks

Decide what metric metadata to show for each metric, e.g. maximum distance from catch location, speed
Reload on new selection or when returning to default
See #39 (comment) to see what interactions trigger a reload

Limit number of months drawn to 6

Inspecting the calendar heatmap svg shows that cal-heatmap draws 12 months. The number of months displayed depends on the browser settings.
Limiting this number to 6 should improve performance.

Use white text labels for satellite view

Make dynamic stacked area chart

Get data from stacked area chart directly from the cartodb API, and transform it in javascript to the desired format.
Group all days together. This will turn the chart into a regular line chart.

Dynamic calendar chart legend

Currently, the legend on the calendar chart is fixed: it always uses the same colour for the same distance. This doesn't however highlight differences for an individual.

It would be best if this scale is calculated based on the data.

Move metadata to Google Spreadsheets

Cf. fish tracking network.

Fields

Tasks

Update table in SQL queries
Update latitude/longitude in documentation
Update latitude/longitude in SQL queries
Update is_active in SQL queries

Change default calendar view

The default calendar chart should show the last 5 months with data.

Add metric selection

Selecting a metric in select-metric loads data for that metric.

Tasks

Effected elements should load new data, see interaction B in #39 (comment)
Use active class to indicate current metric
No problem in adding an ID for each metric

Add day chart

Add a line chart to day-chart, showing the data for the selected bird and day.

Tasks

nvd3 css causes unexpected changes in cal-heatmap

When the html file loads both the nvd3 css and the cal-heatmap css, the first one causes the div element of the cal-heatmap visualisation to expand.

Show bird metadata

Use bird_tracking_devices to populate the bird-metadata #39 (comment) with info on the selected bird.

Tasks

Load species
Load sex
Reload when selecting another bird
Think about best way to display this (pipe separated, labels?)
Think what other info we could add

Example

Species: Larus fuscus | Sex: female

Show selected time frame

Show the timeframe selected in year-chart in selected-time. The time should be displayed in a nice readable way, e.g. Tuesday April 1, 2013.

Tasks

Year selection: April 2013 to March 2013
Month selection: April 2013
Day selection: Tuesday, April 1 2013
Reload on new selection or when returning to default
See #39 (comment) to see what interactions trigger a reload

Browsing calendar should clear selection

For a less confusing UX, the date selection should be cleared if a user navigates in the calendar.

indicate day tick marks

In the raw line chart, days (and preferably also weeks) should be visible.

Possible solutions:

draw colored bands in the chart background
set large and small tick marks

Add Disqus comments

It would be cool if people could leave comments via Disqus. It is yet another JS library though. :-) The best solution is maybe to reference the blog post.

Add `onClick` event to new domains when navigating

When clicking the arrows, new domains are created. These month labels have no onClick event set so this has to be done.

Load a calendar heatmap in year-chart with data on the selected bird. The calendar is similar to a Github calendar and should/could show the distance from catch location, as that gives an indication if the bird is breeding or migrating.

Tasks

12 months horizontally
7 days vertically
Labels for months
Labels for days of the week
Load a metric in each block (e.g. average distance from home)
Decide on metric with @EricStienen and separate in useful blocks: e.g. average distance from home, with grey (no data), close to catch location (blue), and migrating (pink).
Add legend
Show a tooltip with the chosen metric when hoovering over a day (use Bootstrap tooltips, cf. GitHub)
Think about mobile reloading (as SVG is fixed width)

Make animation playoff faster by loading all data

If all data are pre-loaded, we could maybe set the time frame reload lower than 2 seconds.

Mockup of bird tracking explorer version 2

Add month chart

Add a calendar heat map in month-chart, showing the data for the selected bird and timeframe.

Tasks

Loading of calendar chart

On load the calendar chart seems to display hours, before collapsing and showing months. Do you know why the hours are loaded first? Is this something we can prevent?

Add month selection to year chart

Add functionality to year-chart so that user can select a month.

Tasks

Trigger a call when selecting a month label
Effected elements should load new data, see interaction D in #39 (comment)
Highlight the selected label (bold?)
Add button to clear selection (@peterdesmet)
Make it clear to user that months can be selected.

Bird selection via GET

I think the bird selection can reload the page, and add a query parameter ?bird_name=Eric. That way, you can reference a specific bird.

This would require a submit button, which I don't think is a problem.

Remove `three_gulls` table from CartoDB

The three_gulls table currently powers 6 visualizations: 5 for this blog post and 1 shared on Twitter. To avoid confusion, I think these visualizations should be powered with the bird_tracking table and we should remove three_gulls. That way, users can either use the big table (bird_tracking) or a small test table (tracking_eric, which is already used more widely).

Things to do:

Update visualizations SQL
Update gists
Check if anything needs to be updated for blog
Remove table.

Visualizations:

Add Google Analytics to explorer

Reload data when clicking on distance tabs

The two tabs Distance from colony and Distance travelled should invoke a new backend call. This limits the amount of data that is pushed in the browser memory.

Standardize tooltips

The tooltips in cal-heatmap have a very different style then the nvd3 tooltips. On 1 page, the tooltips should be the same.

no marker fill

Is it poosible to have none-filled markers instead of color filled?
Instead of blue and black I would prefer blue and unfilled markers.

bird_tracking[day=1] {

marker-fill: #a6cee3;
}

bird_tracking[day=0] {

marker-fill: #000;
}

Load data for selected bird

When a bird is selected in select-bird, all relevant data should be loaded.

Tasks

Selection should happen on click or enter (notice that there is no submit button)
Effected elements should load new data, see interaction A in #39 (comment)

Geographic position in bird_tracking_devices

@EricStienen, while describing the fields in bird_tracking_devices, I noticed that we should define and probably rename tracking_start_location and associated coordinates.

tracking_start_date_time: Time at which tracking is considered operational (sometime after tagging (set to 18:00:00 on tagging date).
tracking_start_latitude/longitude: I assume this is the estimated position of tagging, and not necessarily the same as the tracking_start_position. Should we rename this field to tagging_latitude/longitude?

Do this field definitions fit with the wmh project? What use is the latter field? Do we need a bird_tracking_nests table?

Group birds per species

In selectbox, bird names should be grouped by species, using optgroup.

Replace line chart by d3 line chart

That way, we can limit the x axis to the number of months that are drawn by cal-heatmap and have it navigate together with the heatmap.

Reassess bird_tracking_devices table

SQL to find day/night records

Issue reported by @EricStienen : this SQL statement does not work. Why?

select
  t.cartodb_id,
  t.the_geom,
  t.the_geom_webmercator,
  t.device_info_serial,
  t.date_time,
  t.altitude,
  d.bird_name,
  d.sex,
  d.project_name,
  d.ring_code,
  d.ring_code_color,
  d.scientific_name,
  date_part('hour',t.date_time) as hour
from bird_tracking t
  left join bird_tracking_devices d
  on t.device_info_serial = d.device_info_serial

case when hour > 23 then Day = 0
        when hour < 4 then Day = 0              
      else Day = 1
end

where
  d.scientific_name = 'Larus fuscus'
and
  d.bird_name = 'Nico'
and
  t.userflag is false

Add charts for total distance travelled per hour

Delete media queries

The CSS from the blog is responsive, changing the position/visibility of certain elements (e.g. the header) depending on the window width. These media queries should be overwritten, as the dashboard will not be responsive, but fixed-width.

Suggestions for UX improvements

Show data type selection (distance travelled/distance from nest) near charts (as it does not affect map or bird data)
Increase size of bird selection dropdown
Bird data should be shown closer to bird selection
Map can be shown next to bird selection/data
Indicate that calendar chart allows user to select day or month
Indicate selected day or month as text
Indicate selected bird as text
Show map above calendar chart, line chart below.
Rewrite introduction text, and delete references to gulls, as harrier data will be included as well.

Tasks

Add arrows (@peterdesmet)
Clicking navigation should trigger a call
New month should be loaded
Calendar should slide to new position
Clear any selection
Effected elements should load new data, see interaction E in #39 (comment)

Define map styles

set base layer style
set cartocss for data

Add map

Add a CartoDB map, showing occurrences of the selected bird and timeframe.

Tasks

Create a CartoDB viz (@peterdesmet)
Include the viz (basemap, legend, buttons, etc.)
Load the data for the selected bird and timeframe (I'm not sure how this interacts with the viz?)
Reload on new selection or when returning to default
See #39 (comment) to see what interactions trigger a reload

Improve data selection

Add "clear selection" button. This button refreshes the map and line chart and displays all the data for the selected bird.
Highlight selected month or day.

Add persistent IDs to the data

Currently occurrenceID= cartodb_id. These IDs should instead be generated by UvA-BiTS. This will allow for persistence and easier imports. See also https://github.com/LifeWatchINBO/bird-tracking-gull-occurrences/issues/23

inbo / bird-tracking Goto Github PK

bird-tracking's People

Contributors

Stargazers

Watchers

Forkers

bird-tracking's Issues

Tasks

Example

Tasks

Tasks

Fields

Tasks

Tasks

Tasks

Tasks

Example

Tasks

Tasks

Tasks

Tasks

bird_tracking[day=1] {

bird_tracking[day=0] {

Tasks

Tasks

Tasks

Recommend Projects

Recommend Topics

Recommend Org