Realize a Sketch: PM2.5 in a specific country

100%

Realize a Sketch: PM2.5 in a specific country

✓ Published0🌍 Public

Last edited Oct 7, 2020

Created on Sep 23, 2020

This visualization displays the annual PM2.5 concentration trend for China from 2010 to 2017, shown as a line chart with year on the x-axis and PM2.5 value on the y-axis, using the vega-lite-api library. The data originates from a Kaggle dataset covering global air pollution, processed with d3.csv and range functions to filter and reshape the records. The chart applies a customized config for axis styling and includes tooltips showing country, year, and value.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the Kaggle:PM2.5 Global Air Pollution 2010-2017 (Mean Annual Exposure for 240 Countries) via Gist: PM2.5 Global Air Pollution Dataset (From 2010-2017)

The data is processed and melt to fit the visualization. It realize the sketch of showing PM2.5 trend in a specific country (eg. China).

There are some problems where I would do some further studies. I want to make a combobox to let the user select the country they want to see. However, I cannot get the parameter out of the eventlistener which is monitoring the selected option in the combobox. How to pass the selected option in the combobox into the data loading session. There is such thing in Java Jframe called getselecteditem. but how to do this in js?

I have modified the getData.js to try to fix this problem but I failed. And in the index.html, there is a select box which is commented out. Please help me with this problem.

MIT Licensed

Similar vizzes

Loading thumbnail…

PM2.5 For Selected Country

This visualization shows the annual PM2.5 air pollution trend for a selected country from 2010 to 2017, with the user choosing the country via a dropdown menu. It uses D3 v5 with React, rendering an SVG line chart with axes, a color legend, and a title. The data comes from a Kaggle dataset on global air pollution, processed and structured per country. Key APIs include `d3.csv`, `scaleLinear`, `line`, `nest`, and `axisBottom`.

PPakcheera Choppradit

86% match

Loading thumbnail…

PM2.5 For Selected Country

This visualization displays PM2.5 pollution trends for a selected country between 2010 and 2017, using data from Kaggle’s Global Air Pollution dataset. A dropdown menu lets users choose a country, triggering a D3 line chart that updates with the new country’s yearly values. The code uses d3.line, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the SVG chart, with a color legend built via a custom colorLegend function. Data is loaded and processed using d3.csv and d3.nest.

PPakcheera Choppradit

85% match

Loading thumbnail…

PM2.5 For Selected Country

This visualization displays PM2.5 air pollution trends for a selected country from 2010 to 2017 using a multi-line chart. A dropdown menu allows users to switch between countries, updating the line path to show that nation’s annual mean exposure values. The code uses D3 v5 with React, employing `d3.line`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.nest` to process and render the data. It also uses a custom `colorLegend` component and `foreignObject` for the dropdown UI. Data originates from a Kaggle dataset loaded via a Gist URL.

Iivaleehan

84% match

Loading thumbnail…

PM2.5 Around the World

This visualization combines a choropleth map and line chart to explore global PM2.5 air pollution levels from 2010 to 2017. A slider selects the year, updating the map's color shading and highlighting the corresponding point on the time-series chart. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection for the map and `d3.scaleLinear` for chart axes. The data comes from a Kaggle dataset of mean annual PM2.5 exposure for 240 countries, with missing values shown via a diagonal hatch pattern.

Rrioto9858

84% match

Loading thumbnail…

PM2.5 For Selected Country

This interactive visualization displays PM2.5 air pollution trends for a user-selected country from 2010 to 2017, using data from a Kaggle dataset processed via D3’s `csv` loader. A dropdown menu built with React and D3 lets viewers switch countries, triggering an update that redraws a line chart with `d3.line` and `curveBasis`. The SVG rendering includes axes via `axisBottom` and `axisLeft`, a color legend via `scaleOrdinal` with `schemeCategory10`, and removes and rebuilds all groups on each selection change.

Iivaleehan

84% match

Loading thumbnail…

Fork of PM2.5 For Selected Country

This visualization displays the PM2.5 air pollution trend for a selected country from 2010 to 2017, using data from a Kaggle dataset. A dropdown menu lets users choose a country, and the line chart updates accordingly with axes, labels, and a color legend. Built with React and D3 v5, it uses d3.csv for data loading, d3.nest to group by country, d3.scaleLinear and d3.line with curveBasis for rendering. The SVG rendering includes axis ticks, gridlines, and a colorLegend component built from the same D3 scales.

BBruce J

83% match

Loading thumbnail…

PM2.5 Around the World

This interactive visualization displays PM2.5 air pollution levels for countries worldwide from 2010 to 2017. A choropleth map, rendered using d3.geoPath and d3.geoNaturalEarth1, color-codes each country by its annual mean PM2.5 concentration. Users can select a year via a slider, which updates both the map and a line chart showing pollution trends for all countries. Hovering or clicking a country highlights its data in red on the line chart. The data is sourced from Kaggle's PM2.5 Global Air Pollution dataset.

Rrioto9858

83% match

Loading thumbnail…

PM2.5 Air Pollution Trend

This visualization presents PM2.5 air pollution trends from 2010 to 2017 for 240 countries, with each country’s annual mean exposure drawn as a thin, semi-transparent line over time, revealing a sharp global dip in 2014 followed by a rebound in 2015. Built with the vega-lite-api and D3.js, it loads CSV data from a GitHub Gist via `d3.csv`, then melts the dataset into a tidy format before rendering line marks with tooltips. The code customizes axis styles, hides the domain, and uses a dark color scheme to improve readability, with the view auto-sizing to the browser window.

Rrioto9858

83% match