PM2.5 For Selected Country

100%

PM2.5 For Selected Country

✓ Published1🌍 Public

Last edited Oct 22, 2020

Created on Oct 22, 2020

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.

AI-generated description

A visualization constructed using D3 and (https://github.com/vega/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).

The user can choose the country by using the menu and to see the trend from 2010 to 2017 in this country.

The only bug in this visualization is that I don't know why the little arrow of the menu disappear...

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

97% 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

96% 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

96% match

Loading thumbnail…

PM2.5 For Selected Country

A line chart displays PM2.5 pollution trends for a selected country from 2010 to 2017, with country choices via a dropdown menu. The visualization loads CSV data from a Kaggle dataset and processes it with d3.csv, then renders an SVG using D3 v5’s scaleLinear, axisBottom, axisLeft, and line with curveBasis. A color legend, generated via a custom colorLegend function using scaleOrdinal and schemeCategory10, shows the selected country’s line color. React dropdown styling is referenced, though rendering relies directly on D3 selections.

Rrioto9858

95% 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

94% match

Loading thumbnail…

PM2.5 For Selected Country

A multi-line chart displays PM2.5 air pollution values per year for a selected country, drawn as SVG paths using D3 v5 within a React framework. A dropdown menu lets the viewer choose a country, triggering a redraw of the line chart and its color legend. The visualization uses d3.line, d3.curveBasis, d3.scaleLinear, and d3.scaleOrdinal, with data loaded from a CSV via d3.csv and processed into yearly series.

PPakcheera Choppradit

93% 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

88% 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

87% match