Air Quality in Madrid

This is a project for https://cartodb.github.io/hackarto.vl (2018, June 6th). The objective is to create a VIZ with CARTO.VL library to show AIR QUALITY in Madrid, using Madrid's OpenData

HOW IT WAS CREATED

These were the main steps:

• Get air quality stations dataset from Madrid's OpenData
• Import stations to CARTO after some cleaning (air_quality_stations)
• Show air quality stations in a map with a basic style
•  Feature interactivity showing stations data (name. code and address)
• Import time-series after some cleaning (airquality_stations_2017)
• Show Air Quality torque animation for 3 variables: Particles < 10 µm, Sulfur dioxide and Ozone

FEEDBACK

MADRID OPENDATA

• Air Quality stations dataset was an xls who had several typos (e.g ' instead of '' for some stations) and it had to be manually cleaned
• CSV files with Time Series were not normalized, having several values per row and making them uncomfortable.

CARTODB

• CARTO CSV import didn't work well with Dº M' S'' data (QGIS helped with it)

CARTO-VL

• Maybe it could have an automatic 'cursor: pointer' on/off when dealing with interactivity (featureEnter / featureLeave) (something like layer --> interactive: true/false).

• It could have a method to manage all style properties for a feature at the same time (e.g. useful for onHover styles), to avoid this kind of duplication:

  feature.color.reset();
  feature.width.reset();
  feature.strokeColor.reset();
  feature.strokeWidth.reset();

  It could be something like feature.style.reset() (being style an object with all the FeatureVizProperty collection). The same principle could be applied when setting several style properties at the same time. Something like...

  feature.style.blendTo(
    {
      color: "yellow",
      width: feature.width.value * 2,
      strokeColor: "red",
      strokeWidth: 2
    },
    50
  );

  instead of...

  feature.color.blendTo("yellow", 50);
  feature.width.blendTo(feature.width.value * 2, 50);
  feature.strokeColor.blendTo("red", 50);
  feature.strokeWidth.blendTo(2, 50);

• Adjust fade code is not correct at docs

• It seems there is no way to work with torque.getSimtime() with the string API

HANGAR-ALPHA

• It was used via CDN (https://cartodb.github.io/hangar-alpha/framework/#installation).
• It produces some errors if Backbone or jQuery are missing (but docs don't warn about these dependencies).
• There was no class to override text-color with a simple white. It could be useful for dark backgrounds.