CITI-SENSE widgets - Barcelona pilot

Widgets for embedding data collected with PSP sensor pack

Air quality index map

In order to embed the air quality index map visualization widget into the portal it is important:

  1. Load jQuery using the script 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. Load Google maps API library using the script 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  3. Load CITI-SENSE air quality visualization widget using the script 
    <script src="http://citisense.u-hopper.com/widgets/psp/jquery.aqi.js"></script>
  4. Load CITI-SENSE air quality visualization widget styles 
    <link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">

After that we can define the container for embedding the visualization, e.g. 

<div id="container_map" style="width: 300px; height: 200px;"></div>
and use the following code to actually load the widget in the container 
<script>
  $(function() {
    $("#container_map").aqi({
        type: 'map'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        , sensor_id: 'LEO-666BA0BF' // either sensor id can be given
        , participant_id: 'LEOTEST209' // or participant id can be given, or both
        , measurement: 'aqi' // or caqi
        , observedProperty: 'NO2'
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        , aqis: [ // customizable path coloring wrt to AQI values
            {
                from: 1,
                to: 2,
                color: 'rgb(0,255,0)'
            }, {
                from: 3,
                to: 4,
                color: 'rgb(255,255,0)'
            }, {
                from: 5,
                to: 6,
                color: 'rgb(255,0,0)'
            }
       ]
    });
  });
</script>
where type attribute should have the value map, measurement should contain the value aqi, and observedProperty should specify the gas the index is computed for.

Activity levels map

In order to embed the activity levels map visualization widget into the portal it is important:

  1. Load jQuery using the script 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. Load Google maps API library using the script 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  3. Load CITI-SENSE activity levels visualization widget using the script 
    <script src="http://citisense.u-hopper.com/widgets/psp/jquery.met.js"></script>
  4. Load CITI-SENSE visualization widget styles 
    <link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">

After that we can define the container for embedding the visualization, e.g. 

<div id="container_map" style="width: 300px; height: 200px;"></div>
and use the following code to actually load the widget in the container 
<script>
  $(function() {
    $("#container_map").met({
        type: 'map'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        , sensor_id: 'LEO-666BA0BF' // either sensor id can be given
        , participant_id: 'LEOTEST209'
        , observedProperty: 'ACTIVITY_INDEX' // arbitrary name of the observedProperty representing the activity level (default is ACTIVITY_INDEX)
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        , mets: [ // customizable path colors wrt to MET value
            { 
                from: 0,
                to: 1.5,
                color: 'rgb(40, 255, 40)'
            }, {
                from: 1.5,
                to: 3,
                color: 'rgb(255, 255, 0)'
            }, {
                from: 3,
                to: 6,
                color: 'rgb(255, 204, 203)'
            }, {
                from: 6,
                to: 10,
                color: 'rgb(255, 0, 0)'
            }
        ]
    });
  });
</script>

Visualization will produce the map with routes coloured in accordance with 4 default values of activity levels:

  • Sedentary (<1.5) - green
  • Light (1.5-3) - yellow
  • Moderate (3-6) - creme
  • Vigorous (>6) - red

Air quality index graph

In order to embed the Air quality index visualization widget into the portal it is important:

  1. Load jQuery using the script 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. Load Highcharts visualization library using the script 
    <script src="http://code.highcharts.com/highcharts.js"></script>
  3. Load CITI-SENSE air quality index visualization widget using the script 
    <script src="http://citisense.u-hopper.com/widgets/psp/jquery.aqi.js"></script>
  4. Load CITI-SENSE qir quality visualization widget styles 
    <link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">

After that we can define the container for embedding the visualization, e.g. 

<div id="container_graph" style="width: 300px; height: 200px;"></div>
and use the following code to actually load the widget in the container 
<script>
  $(function() {
    $("#container_graph").aqi({
        title: 'Chart 1 title (optional)'
        , subtitle: 'Chart 1 subtitle (optional)'
        , type: 'graph'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,sensor_id: 'LEO-666BA0BF' // either sensor id can be given
        , participant_id: 'LEOTEST209' // or participant id can be given, or both
        , measurement: 'aqi'
        , observedProperty: 'NO2'
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        , aqis: [ // customizable bands wrt to AQIs
            {
                from: 1,
                to: 2,
                color: 'rgb(0,255,0)',
                label: {
                    text: 'Light'
                }
            }, {
                from: 3,
                to: 4,
                color: 'rgb(255,255,0)',
                label: {
                    text: 'Moderate'
                }
            }, {
                from: 5,
                to: 6,
                color: 'rgb(255,0,0)',
                label: {
                    text: 'Strong'
                }
            }
        ],
    });
  });
</script>

Visualization will produce the following graph:

Activity levels graph

In order to embed the activity levels graph visualization widget into the portal it is important:

  1. Load jQuery using the script 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. Load Highcharts visualization library using the script 
    <script src="http://code.highcharts.com/highcharts.js"></script>
  3. Load CITI-SENSE activity levels visualization widget using the script 
    <script src="http://citisense.u-hopper.com/widgets/psp/jquery.met.js"></script>
  4. Load CITI-SENSE activity levels visualization widget styles 
    <link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">

After that we can define the container for embedding the visualization, e.g. 

<div id="container_graph" style="width: 300px; height: 200px;"></div>
and use the following code to actually load the widget in the container 
<script>
  $(function() {
    $("#container_graph").met({
        title: 'Chart 1 title (optional)'
        , subtitle: 'Chart 1 subtitle (optional)'
        , type: 'graph'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,sensor_id: 'LEO-666BA0BF' // either sensor id can be given
        , participant_id: 'LEOTEST209' // or participant id can be given, or both
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        , mets: [ // customizable bands of METs
            { 
                from: 0,
                to: 1.5,
                color: 'rgb(40, 255, 40)',
                label: {
                    text: 'Sedentary'
                }
            }, {
                from: 1.5,
                to: 3,
                color: 'rgb(255, 255, 0)',
                label: {
                    text: 'Light'
                }
            }, {
                from: 3,
                to: 6,
                color: 'rgb(255, 204, 203)',
                label: {
                    text: 'Moderate'
                }
            }, {
            }, {
                from: 6,
                to: 10,
                color: 'rgb(255, 0, 0)',
                label: {
                    text: 'Vigorous'
                }
            }
        ],
    });
  });
</script>

Visualization will produce the following graph: