Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published1🌍 Public
Mmadalahyndavi123@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025

This line chart tracks daily PM2.5 concentrations in Dallas, Texas, over five months from January to May 2023. The visualization uses an orange stroke path to display fluctuating air pollution levels, with time on the x-axis and concentration values on the y-axis. The code loads data from a CSV file using `d3.csv`, parses dates with `d3.timeParse`, and constructs the chart with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`. All elements are rendered as SVG, with axis labels and a chart title added via D3 selections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This area chart shows daily PM2.5 air pollution levels in Dallas, Texas from January to May 2023, revealing fluctuating concentrations that mostly range between 15 and 60 µg/m³. Using D3.js v7, the visualization loads CSV data with `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG area chart where `d3.area()` generates the filled path beneath the line. The chart applies `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes drawn via `d3.axisBottom` and `d3.axisLeft`.

Mmadalahyndavi123@gmail.com
95% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This visualization shows daily air quality measurements from a Phoenix EPA monitoring site, comparing mean concentrations of four pollutants (NO₂, O₃, SO₂, CO) and an overall AQI value across dates in early January 2000. It renders as a grouped bar chart using D3 v6, with `d3.scaleBand` for the date and pollutant groupings, `d3.scaleLinear` for the y-axis, and `d3.schemeSet2` for categorical colors. Hovering over bars triggers a tooltip via D3’s mouse events. The SVG chart loads data from a CSV file, parsing dates with `d3.timeParse` and formatting axis ticks with `d3.timeFormat`.

Hharshabandi3060@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example visualizes daily air-pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix using D3 v6. It renders an SVG multi-line chart, with each pollutant line colored by a categorical scale and labeled near its final data point. The code loads data from a local CSV, parses dates with `d3.timeParse`, and generates paths with `d3.line`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Hharshabandi3060@gmail.com
76% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive visualization presents a reusable scatter plot comparing healthy lifestyle metrics from a 2021 dataset of 44 cities, including sunshine hours, pollution index, and life expectancy. Built with React and D3 v7, the chart renders as SVG and uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for gridlines. The reusable `reusableScatterPlot` function accepts configurable accessors for x and y values, labels, and tooltips, allowing multiple charts to be generated from the same dataset. A hover tooltip displays city-specific values for the selected variables.

Ssravya7136@gmail.com
76% match
Loading thumbnail…

Fork of Fork of new data

This interactive choropleth map displays annual PM2.5 air pollution levels across U.S. counties from 2000 to 2021, with users scrubbing a vertical slider or clicking "play" to animate through years. State boundaries remain visible while county fill colors shift along a sequential YlGnBu scale, with gray representing missing data. Built with React and React hooks, the visualization uses d3.csv, d3.json, and topojson to load data and county geometries, then renders SVG paths via d3.geoPath and geoIdentity. A rotating slider and datalist labels enable temporal exploration.

CChase Hall
76% match
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the relationship between U.S. county-level PM2.5 air pollution measurements from 2010 and 2018, using data from a raw GitHub-hosted CSV file. Each point represents a county, with positions mapped through D3’s `scaleLinear` and `extent` functions. The visualization uses D3 v7 to load the data via `csv`, filter rows with null values, and render circles in an SVG. Axes are generated using `axisLeft` and `axisBottom`, all embedded within a React-hosted HTML page that fills the viewport.

KKhanin Sisaengsuwanchai
76% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This heatmap shows daily mean concentrations of four air pollutants (NO2, O3, SO2, and CO) over time, with color intensity indicating pollution levels. The visualization uses D3.js v6 to read a CSV file of EPA air quality data, parse dates, and render an SVG with a color scale based on the `d3.scaleSequential` with the YlGnBu interpolator. Each cell represents a pollutant-date combination, and hovering reveals a tooltip with the exact date and value. The chart employs `d3.axisTop` and `d3.axisLeft` for labeled axes.

Hharshabandi3060@gmail.com
75% match
Loading thumbnail…

Fork of Fork of Pollution in US with counties by React and d3

This choropleth map visualizes PM2.5 pollution levels across U.S. counties from 2000 to 2018, with each county colored on a sequential YlGnBu scale. Users can scrub through years via a vertical slider to animate changes over time. The map uses React to manage state and render SVG paths generated with `d3.geoPath` and a `geoIdentity` projection, with county boundaries drawn from the us-atlas TopoJSON. Data is loaded from a CSV of county-level pollutant measurements, and the animation uses a timed `setInterval` loop to advance the year automatically.

CChase Hall
75% match