cmda-tt / course-17-18

🎓 Frontend 3 · 2017-2018 · Curriculum and Syllabus 📊
https://cmda-tt.github.io/course-17-18/
Other
39 stars 64 forks source link

Assessment 3 data: @laurens-booij #536

Closed Laurensbooij closed 6 years ago

Laurensbooij commented 6 years ago

Air quality in Amsterdam

For assessment 3 I want to make a visualisation based on data about the air quality as measured hourly at twelve different locations across Amsterdam.

Data

I found the data via the recommended source: data.amsterdam.nl. The data can be downloaded in csv format at www.luchtmeetnet.nl. The data can only be downloaded one station at a time. There are twelve stations in Amsterdam, which means twelve data files. I already consulted Titus about this. His suggestion was to use d3.queue() merge the files together.

The data is provided in the following format:

tijdstip locatie component waarde LKI
2017-04-03 11:00:00+02:00 Amsterdam-Westerpark PM25 17,8 3
2017-04-03 11:00:00+02:00 Amsterdam-Westerpark PM10 25,6 3
2017-04-03 12:00:00+02:00 Amsterdam-Westerpark PM25 15,0 3
2017-04-03 12:00:00+02:00 Amsterdam-Westerpark PM10 24,8 3
2017-04-03 13:00:00+02:00 Amsterdam-Westerpark PM25 18,4 3
2017-04-03 13:00:00+02:00 Amsterdam-Westerpark PM10 27,2 3
2017-04-03 14:00:00+02:00 Amsterdam-Westerpark PM25 15,1 3
2017-04-03 14:00:00+02:00 Amsterdam-Westerpark PM10 22,7 3
2017-04-03 15:00:00+02:00 Amsterdam-Westerpark PM25 20,3 4
2017-04-03 15:00:00+02:00 Amsterdam-Westerpark PM10 30,2 4
2017-04-03 16:00:00+02:00 Amsterdam-Westerpark PM25 19,3 3
2017-04-03 16:00:00+02:00 Amsterdam-Westerpark PM10 32,4 4
2017-04-03 17:00:00+02:00 Amsterdam-Westerpark PM10 32,2 4
2017-04-03 17:00:00+02:00 Amsterdam-Westerpark PM25 21,2 4
2017-04-03 18:00:00+02:00 Amsterdam-Westerpark PM25 23,3 4
2017-04-03 18:00:00+02:00 Amsterdam-Westerpark PM10 20,5 3
2017-04-03 19:00:00+02:00 Amsterdam-Westerpark PM25 19,6 3
2017-04-03 19:00:00+02:00 Amsterdam-Westerpark PM10 22,5 3
2017-04-03 20:00:00+02:00 Amsterdam-Westerpark PM25 20,9 4
2017-04-03 20:00:00+02:00 Amsterdam-Westerpark PM10 21,3 3
2017-04-03 21:00:00+02:00 Amsterdam-Westerpark PM25 21,0 4
2017-04-03 21:00:00+02:00 Amsterdam-Westerpark PM10 23,8 3
2017-04-03 22:00:00+02:00 Amsterdam-Westerpark SO2 0,3 1
2017-04-03 22:00:00+02:00 Amsterdam-Westerpark PM25 21,2 4
2017-04-03 23:00:00+02:00 Amsterdam-Westerpark SO2 0,2 1
2017-04-03 23:00:00+02:00 Amsterdam-Westerpark PM25 20,5 4
2017-04-03 23:00:00+02:00 Amsterdam-Westerpark PM10 25,7 3
2017-04-04 00:00:00+02:00 Amsterdam-Westerpark SO2 0,4 1
2017-04-04 00:00:00+02:00 Amsterdam-Westerpark PM25 25,7 4
2017-04-04 00:00:00+02:00 Amsterdam-Westerpark PM10 34,0 4

The data displayed above is that from 24 hours, or one day. The complete dataset I want to use contains hourly data from 7 days.

What do I want to make?

I want to create a map on which all the measuring stations are displayed. When the user hovers over a station on the map, a chart is displayed that shows the data about air pollution in that location.

Maybe I can add a function that filters stations in different parts of the city. Or I could make it so that users can select from which component the pollution levels are shown.

Razpudding commented 6 years ago

Sounds like an interesting project! If you need any advice on how to put the stations on a map, here's how I would do it: Find a static map image of amsterdam. Load it in a csv. Put a div in it on each of the spots of the stations (this could also be a nice svg drawing of a sensor for instance). Target each of the divs with d3 and render charts at their x,y which become visible on mouseover. That might be the simplest way of tackling that part of the challenge. Just an idea!

Laurensbooij commented 6 years ago

Okay, many thanks for the tip!

Laurensbooij commented 6 years ago

How do I load my map image into a csv file?