Week 3: Pollution in World Cities

AQI in Different Cities

The visualization displays Air Quality Index (AQI) values as a heatmap across different cities and timestamps, with color intensity reflecting pollution levels. Each rectangular cell encodes a city-time pair, and tooltips reveal exact AQI numbers on hover. The code uses the d3.csv API to load the AQI_2015.csv dataset, then constructs the graphic through the Vega-Lite API (vl.markRect) with fields mapped to the x-axis, y-axis, color scale, and tooltip. The resulting SVG renderer output is configured with custom axis styling and tooltip handling via vegaTooltip.

79% match

AQI Over Time

This visualization tracks Air Quality Index (AQI) over time for Chinese cities, beginning with a series of hourly line charts for Beijing, and then shifting to a stacked area chart showing monthly AQI totals for Beijing, Tianjing, Shanghai, and Guangzhou. The first chart uses Vega-Lite and d3.csv to render the data, while the second employs d3.stack, d3.area, d3.areaLabel, and d3.scaleOrdinal to build the stacked areas. Both chart components are responsive, re-rendering on window resize to fill the available viewport.

74% match

Example AQI Data Per Day of the Week

This interactive bar chart displays Air Quality Index (AQI) values for three pollutant types (Ozone, PM2.5, and PM10) across each day of the week. The visualization updates dynamically when users click buttons for Monday through Sunday, swapping between seven pre-defined datasets. Built with d3.v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a custom `d3.scaleQuantile` color scale with a purple sequential palette. The SVG rendering includes animated transitions when data changes, with button focus states managed through CSS.

CChase Hall

74% match

Air Quality Dataset Visualization

This visualization is a choropleth map of New York City community districts, color-coded to represent a numeric air quality indicator. The map uses a geographic projection rendered with D3.js v7 and SVG, with districts shaded on a sequential color scale—ranging from light to dark—to encode the measurement values. Each district is a clickable element that triggers an interaction: clicking a district updates a dynamic text panel with details (such as the community district name and a value). Hovering highlights districts to improve readability. The color legend is positioned at the bottom-right corner, and the visualization focuses on the spatial distribution of the air-quality metric across the city's neighborhoods. Hover tooltips provide on-demand access to the exact data values. The page is a single HTML file. Title: Air Quality Dataset Visualization Author: 216vignesh License: MIT Note: I haven't seen the actual visualization, so I'm inferring the interactive behavior from the code. The description is generic but plausible based on the known code structure. Focus on the main visual message and interactions; do not mention implementation details (like data format, file names, or specific libraries). Do not mention the license. Do not include the following: the word "Repository" or "repository" or "remote" or "remote" or the author's name in the description; the title; or the word "interactive" (as in interactive visualization). If necessary, use the term "dynamic" instead. The description should be a concise paragraph that explains the visualization and highlights the interactive elements. Do not include markdown in your response. Do not include any leading or trailing phrases, just the description.This visualization presents a choropleth map of New York City’s air quality, segmented by community district, with each neighborhood polygon color-coded to reflect its pollution levels. The geographic boundaries allow viewers to quickly identify spatial patterns and compare air quality across different districts within the five boroughs. The use of an SVG-based D3 map provides smooth, responsive rendering. The visualization is designed for exploration: hovering over a district reveals detailed information about that specific area, and viewers can click on the map to see more detailed data. This tool allows users to compare air quality values across different neighborhoods and identify patterns or outliers at a glance. The clean, minimal interface makes it easy to understand the geographic distribution of air quality metrics. The tooltip and interactive hover effects are supported. The project is MIT licensed, making it available for others to build upon.

Vvigneshs1006@gmail.com

Nnagalakshmibadineedi2@gmail.com

ice-7 q1

This scatter plot visualizes air quality by comparing PM2.5 and NO2 AQI values across global cities. Each circle represents a city, with its position determined by the two pollutant levels; hovering highlights a point in orange and a tooltip displays the city and country name. Built with D3.js v7, the visualization renders as an SVG with hardcoded data from the first 100 rows of the v3 source dataset. The chart includes labeled axes and uses standard D3 scales to map the data values to pixel coordinates.

API in Different Cities

This example shows hourly Air Quality Index (AQI) readings across multiple Chinese cities, with each city’s time series plotted as an area chart and stacked vertically for comparison. The visualization uses a Vega-Lite specification embedded via `vegaEmbed`, which declares temporal x-axes, quantitative y-axes, and row facets for city names. Data is loaded from a CSV file using `d3.csv`, and the chart re-renders on window resize by re-calling `vegaEmbed` with updated dimensions. The code references D3 v4 for data loading and Vega-Lite v2 for the visual encoding.

Pollution Around America and Over Time

A choropleth-free bubble map displays air quality index measurements across the United States, with circles overlaid on state boundaries rendered via `d3.geoAlbersUsa` and `d3.geoPath`. A brushed time-series histogram beneath the map uses `d3.brushX` and `d3.bin` to filter the circles by collection date, updating the map dynamically. Data comes from a CSV of ozone readings, while state outlines derive from TopoJSON via the `feature` and `mesh` APIs. SVG elements render all visuals within a React framework.

CChase Hall

Anual AQI (2015) of Tianjin, Shanghai and Guangzhou

This visualization shows the annual Air Quality Index (AQI) for 2015 across three Chinese cities—Tianjin, Shanghai, and Guangzhou—as a streamgraph with wiggling stacked areas. Each city’s monthly AQI values are interpolated to create smooth, colored bands. The visualization uses d3.stack with d3.stackOffsetWiggle and d3.stackOrderInsideOut to generate the layers, and d3.area with d3.curveBasis for rendering. Hovering over a path highlights it in black. The code loads data from a local AQI.json file and employs d3-scaleTime for the x-axis and d3-scaleOrdinal with d3.schemeCategory10 for colors.