31:T44d,md`# Check air quality of cities worldwide after major events This page allows you to select a country (e.g. ${openaq_country.country}), city (e.g. ${openaq_city.city}), followed by a location which has a air quality monitor in that city (e.g. ${openaq_request.location}). You can select a special date (e.g. ${openaq_request.special_date}) and its respective label (e.g. ${openaq_request.special_date_label}) to show in the map. The page fetches data from the OpenAQ Api, which is available at: https://docs.openaq.org/ This is the data source used for the current visualization: ${openaq_data_url} **NOTE:** In some cases you will see an empty plot after selecting a location. In that case try selecting a different location with same/similar name from the dropdown. ## Disclaimer * I am not an expert on air quality data, this was a curiosity driven project based on the availability of open data and tools. * Data are often noisy and incorrect, I have not taken any measures to assess the correctness of this data. * Please do not make any scientific conclusions based on this data. `32:T57f,viewof openaq_request = form(html``)33:T878,chart = vl.data(combined_data) // Using the cars data (below) .layer( add_band({color: "green", min_value: 0, max_value: 12}), add_text({label: "Good", y: 6}), add_band({color: "yellow", min_value: 12.1, max_value: 35.4}), add_text({label: "Moderate", y: 20}), add_band({color: "orange", min_value: 35.5, max_value: 55.4}), add_text({label: "Unhealthy for Sentitive Group", y: 40}), add_band({color: "red", min_value: 55.5, max_value: 150.4}), add_text({label: "Unhealthy", y: 100}), add_band({color: "purple", min_value: 150.5, max_value: 250.4}), add_text({label: "Very Unhealthy", y: 225}), add_band({color: "maroon", min_value: 250.5, max_value: 300}), add_text({label: "Hazardous", y: 275}), add_vline({x: openaq_request.special_date.toISOString().slice(0, 10)}), vl.layer( vl.markLine({"color": "steelblue", strokeWidth: 0.5}) .encode( vl.y().aggregate("mean").fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time").timeUnit("yearmonthdate"), vl.color().fieldN("data_source") ), vl.markErrorband({"color": "steelblue", strokeWidth: 0.5}) .encode( vl.y().aggregate("ci").fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time").timeUnit("yearmonthdate"), vl.color().fieldN("data_source") ), vl.markCircle({"color": "steelblue", strokeWidth: 0.5}) .encode( vl.y().aggregate("mean").fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time").timeUnit("yearmonthdate"), vl.color().fieldN("data_source") ), ), vl.markLine({"color": "firebrick"}) .encode( vl.y().fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time"), ) .transform( vl.regression("value").on("time") ) ) .width(600) .title(`${openaq_request.parameter} of ${openaq_request.location} (Author: shubhanshu.com)`) .description("Data source: https://air-quality.com/place/india/noida/5cd80264?lang=en&standard=aqi_us") .render()34:T675,vl.data(data) // Using the cars data (below) .layer( add_band({color: "green", min_value: 0, max_value: 50}), add_text({label: "Good", y: 25}), add_band({color: "yellow", min_value: 51, max_value: 100}), add_text({label: "Moderate", y: 75}), add_band({color: "orange", min_value: 101, max_value: 150}), add_text({label: "Unhealthy for Sentitive Group", y: 125}), add_band({color: "red", min_value: 151, max_value: 200}), add_text({label: "Unhealthy", y: 175}), add_band({color: "purple", min_value: 201, max_value: 250}), add_text({label: "Very Unhealthy", y: 225}), add_band({color: "maroon", min_value: 251, max_value: 300}), add_text({label: "Hazardous", y: 275}), //add_vline({x: "2020-03-22"}), add_vline({x: "2020-03-24"}), vl.markCircle() .encode( vl.y().fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time"), vl.tooltip().fieldT("value"), // For tooltips, show the Name field ), vl.markLine({"color": "steelblue", strokeWidth: 0.5}) .encode( vl.y().fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time"), ), vl.markLine({"color": "firebrick"}) .encode( vl.y().fieldQ("value"), // For y, use the Miles_per_Gallon field vl.x().fieldT("time"), ) .transform( vl.regression("value").on("time") ) ) .width(600) .title("Air Quality Index of Noida/UP/India.") .description("Data source: https://air-quality.com/place/india/noida/5cd80264?lang=en&standard=aqi_us") .render()35:[] 2f:{"title":"Check air quality of cities worldwide after major events","cells":[{"id":264,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"viewof openaq_country = form(html`

Select Country

\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"viewof search_cities = Inputs.search(country_cities, { datavals: [\"city\"] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof selected_city = Inputs.table(search_cities, {\n multiple: false,\n sort: \"lastUpdated\",\n reverse: true,\n value:\n search_cities.filter((x) => x.city == \"Seattle-Tacoma-Bellevue\")[0] ||\n search_cities[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof openaq_city = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`## Special Date (${openaq_request.special_date_label}) happened on ${openaq_request.special_date.toISOString().slice(0, 10)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"selected_city","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"country_cities = {\n const response_data = await d3.json(\n `https://api.openaq.org/v2/cities?page=1&offset=0&sort=asc&country_id=${openaq_country.country}&order_by=lastUpdated`\n );\n return response_data.results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"table(combined_data, {pageSize: 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"combined_data = [...openaq_data, ...ref_year_data]","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"ref_year_data = {\n const json_data = await d3.csv(reference_year_data_url);\n return json_data\n .map((d) => {\n const new_d = { ...d };\n new_d.value = parseInt(d.value);\n new_d.time = new Date(+d.local);\n new_d.time.setFullYear(new_d.time.getFullYear() + 1);\n new_d.data_source = \"reference\";\n return new_d;\n })\n .filter((d) => d.value > 0 && d.value < 1000);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"openaq_data = {\n const json_data = await d3.csv(openaq_data_url);\n return json_data\n .map(d => {\n const new_d = {...d};\n new_d.value = parseInt(d.value);\n new_d.time = new Date(d.local);\n new_d.data_source = \"original\";\n return new_d;\n }).filter(d => d.value > 0 && d.value < 500);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"city_data = {\n const json_data = await d3.json(\"https://raw.githubusercontent.com/shivammathur/countrycity/master/data/geo.json\");\n const object_entries = Object.entries(json_data)\n .map(d => [country_dict.get(d[0]), d[1]]);\n return object_entries // (new Map(object_entries))\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"country_dict = new Map(\n country_data.map(d => [d.name, d[\"alpha-2\"]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"country_data = d3.json(\"https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"openaq_locations = {\n const json_data = await d3.json(`https://api.openaq.org/v1/locations?city=${openaq_city.city}&country=${openaq_country.country}`);\n return json_data.results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"reference_year_data_url = {\n return `https://api.openaq.org/v1/measurements?location=${encodeURI(openaq_request.location)}&country=${openaq_country.country}¶meter=${openaq_request.parameter}&date_from=${ref_dates.from.toISOString().slice(0, 10)}&date_to=${ref_dates.to.toISOString().slice(0, 10)}&format=csv`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"ref_dates = {\n const new_from_date = new Date(+openaq_request.date_from);\n new_from_date.setFullYear(new_from_date.getFullYear() - 1); \n const new_to_date = new Date();\n new_to_date.setFullYear(new_to_date.getFullYear() - 1); \n return {from: new_from_date, to: new_to_date};\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"md`Full OpenAQ data is available in AWS for more analysis - https://github.com/openaq/openaq-info/blob/master/FAQ.md#90days`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"openaq_data_url = `https://api.openaq.org/v1/measurements?location=${encodeURI(openaq_request.location)}&country=${openaq_country.country}¶meter=${openaq_request.parameter}&date_from=${openaq_request.date_from.toISOString().slice(0, 10)}&format=csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"openaq_max_value = d3.max(openaq_data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`# Data from Air-Quality.com`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof place_id = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"vl.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"function add_vline(params){\n const spec = vl.markRule({\"color\": \"black\"})\n .data({values: [{\"time\": params.x}]})\n .encode(\n vl.x().fieldT(\"time\")\n )\n return spec;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"function add_text(params){\n if(!openaq_request.show_bands){\n return vl.layer();\n }\n const spec = vl.markText({\"color\": \"black\"})\n .data({values: [0]})\n .encode(\n vl.y().datum(params.y),\n vl.text({fontSize: 20}).value(params.label)\n )\n return spec;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"function add_band(params){\n if(!openaq_request.show_bands){\n return vl.layer();\n }\n const spec = vl.markRect({\"color\": params.color})\n .data({values: [0]})\n .encode(\n vl.y().datum(params.max_value), \n vl.y2().datum(params.min_value),\n vl.opacity().value(0.2),\n )\n return spec;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"vl.data(data) // Using the cars data (below)\n .encode(\n vl.y().fieldQ(\"value\"), // For y, use the Miles_per_Gallon field\n vl.x().fieldT(\"time\"), // For x, use the Horsepower field\n vl.tooltip().fieldT(\"value\"), // For tooltips, show the Name field\n //vl.opacity().fieldQ(\"ratio\"),\n )\n .layer(\n vl.markCircle(),\n vl.markLine({\"transform\": \"regression\"})\n )\n .title(\"Air Quality Index of Noida/UP/India.\")\n .description(\"Data source: https://air-quality.com/place/india/noida/5cd80264?lang=en&standard=aqi_us\")\n .render() ","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# Air Quality Index\nData from https://air-quality.com/place/india/noida/5cd80264?lang=en&standard=aqi_us\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = {\n const json_data = await d3.json(data_url);\n return json_data.data.history[0].data.map(\n d => {\n d.value = parseInt(d.value);\n return d\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"data_url = \"https://gist.githubusercontent.com/napsternxg/922a64a05e59c7b68d1e400572c4f9f8/raw/7562a1a9631cf7a4f5d5ac7de440b712298fa408/aqi_5cd80264_daily_air-quality.com.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"request_args = {\n return {\n place_id: place_id,\n kind: \"aqi\",\n standard: \"aqi_us\",\n interval: \"daily\",\n lang: \"en\",\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {table} from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"import {date} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}