Skip to main content
SimilarExport ZIP
100%

Document

✓ Published0🌍 Public
Mmingchao080910
Last edited Mar 29, 2020
Created on Mar 29, 2020
Forked from HTML Starter

This example analyzes British shipping routes and their environmental impact on major cities. It presents four interactive SVG visualizations: a map of the UK with city pollution levels, an arc chart ranking ship categories by sailing mileage, a line chart showing hourly sailing distances, and a scatter plot relating trip duration to distance. The code loads AIS track data and Emission data, using D3 modules such as `d3.nest`, `d3.sum`, and `d3.scaleBand` for aggregation, plus `d3.arc`, `d3.line`, and `d3.geoPath` for rendering, with transitions animating the arc chart.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization shows London’s monthly air quality data from 2010–2018, displaying PM2.5 and PM10 particulate levels as a multi-line chart. A dropdown menu lets users select different pollutant measures, while a color legend indicates measurement year. The visualization uses D3.js v3 to render SVG graphics, with animate transitions on the line paths. Data originates from the Kings College London Air Quality Dataset, and the code relies on D3’s `scaleTime`, `scaleLinear`, `nest`, and `line` functions for time-series rendering. Axis helpers like `axisBottom` and `axisLeft` structure the plot.

KKeerthiKandadai
71% match
Loading thumbnail…

109550187_HW7

This interactive visualization shows air pollution levels across multiple monitoring stations, displaying daily average concentrations for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) as a series of stacked horizon charts. Users select a year and band number via dropdown menus, which updates React state and triggers D3 to re-render the SVG. The code uses `d3.csv` to load air pollution data from a remote server, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.mean` to aggregate hourly measurements into daily averages. Each pollutant uses a distinct color scheme, with bands overlaid to encode magnitude.

Ppatricknicholas27@gmail.com
71% match
Loading thumbnail…

Final Project

This example visualizes air quality patterns, comparing SO2, particle, and NO3 concentrations across 31 U.S. states from 2008 to 2018 through animated line charts. Users select a pollutant via radio buttons, triggering an animation that reveals trends over time. The visualization uses D3.js v4 with SVG rendering, featuring a custom color palette for state-specific lines. The code integrates React for structure and employs D3’s data join and transition methods to update the chart dynamically, with data embedded directly in the script.

YYi Yang
70% match
Loading thumbnail…

ICE-7 London Air Scatter Plot Background vs Roadside

This visualization presents a scatter plot of London air quality measurements, comparing roadside versus background monitoring stations across time. Users can select different pollutants via a dropdown menu, while color encodes month and stroke distinguishes station type. The visualization includes interactive legends that filter data points by month or station type, with animated transitions updating circle positions. The code utilizes D3 v5 modules including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `interpolateBuPu` for color encoding, with data loaded from a CSV file using `d3.csv`.

SShreeti Upreti
70% match
Loading thumbnail…

Pie chart

This pie chart visualizes shipping amounts across different cities during the Covid era, with each slice labeled by its value and a legend identifying city names. The code fetches CSV data from a GitHub gist using `d3.csv` and renders the chart with React and SVG. It employs `d3.pie` to compute arc segments, `d3.arc` to generate path geometries, and `d3.scaleOrdinal` for color mapping. Text labels are positioned via `arc.centroid`, and a custom legend displays colored rectangles and city names.

VVineela Reddy
69% match
Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS

This example shows an interactive horizon chart for air pollution data, letting users compare pollutant levels across six types (SO2, NO2, O3, CO, PM10, and PM2.5) for selected years. The visualization uses D3.js (v7) with an SVG rendering approach, displaying time-series data from a GitHub-hosted CSV dataset. It employs d3.rollup to aggregate measurements and d3.scaleTime for the x-axis, while a dropdown menu switches between annual datasets. The chart updates dynamically by redrawing the SVG elements when the user changes the year selection.

Eeyxxr1260@gmail.com
69% match
Loading thumbnail…

Relearning and formatting everything

This example shows two bar charts: one displaying the top 10 most populous countries and another projecting emissions targets through 2050 with dashed goal lines. The SVG visualization uses D3 v5 scales including `d3.scaleBand` and `d3.scaleLinear`, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from CSV files using `d3.csv`, and populations are multiplied by 1000 to handle formatted values. The charts include interactive hover states and custom tick formatting that converts values to abbreviated notation.

Bbertieip
69% match
Loading thumbnail…

Scatter Plot Roadside Pollution over Time

This interactive scatter plot visualizes monthly roadside pollution levels in London from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. Each circle represents a monthly average, colored by pollutant type, with a legend that filters data on click. The visualization includes animated transitions using `transition().duration()` and `delay()`, a dropdown menu for selecting variables, and D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The chart renders as an SVG with interactive color legend and axis labels.

KKCachel
69% match