.json to .csv

parsing json data

This example demonstrates how to load and parse a single JSON record containing air quality monitoring data using D3’s `json()` method within a React component. The visualization shows the raw fields from the data file, including location details, ozone measurements, and AQI values, though no chart is rendered. The code uses React hooks (`useState`, `useEffect`) to fetch the data asynchronously and store it in state, with D3 v6 handling the JSON parsing via `d3.json`. The interface remains a blank page as the parsed data is only logged to the console.

78% match

Json AQI Data in America with Histogram and Brushing

This interactive visualization displays US Environmental Protection Agency Air Quality Index (AQI) readings for ozone monitoring sites, overlaid as colored circles on a geographic map of the United States. The map uses d3.geoAlbersUsa with d3.geoPath, and each circle’s color reflects its AQI value via a d3.scaleQuantile. A brushing histogram at the bottom, built with d3.brushX and d3.bin, filters the map’s circles by date range, with the time series generated using d3.scaleTime and d3.timeMonths. The application is built in React with D3 v5, rendering all elements as SVG.

69% match

Parsing CSV Data

This example demonstrates loading and parsing a CSV file using D3.js within a React application. It fetches a dataset of CSS named colors from a GitHub gist, displaying the file size in kilobytes, row count, and column count in a large text message. The code uses d3.csv to load the remote data and d3.csvFormat to recalculate the file size, while also logging the formatted CSV data to the console.

RRichardPearce60

68% match

Vis for Project

This visualization shows the average Air Quality Index (AQI) for six pollutants—CO, NO2, SO2, PM10, PM2.5, and Ozone—as a pie chart with a custom legend listing each pollutant and its mean value in units. The code loads a CSV dataset from a GitHub gist, aggregates the pollutant-specific AQI values by summing and averaging non-void entries, and renders the result using D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10`. The SVG is drawn with paths, and each segment includes a mouseover handler that logs the pollutant’s AQI to the console.

Llibramanju

map of epa data sites

This map plots U.S. Environmental Protection Agency air quality monitoring sites, with each circle’s radius scaled by the square root of the AQI value. Built with React and D3 v5, it renders a U.S. Albers projection via `d3.geoAlbersUsa` and `d3.geoPath` over a TopoJSON atlas. Animated legend transitions in `colorLegend.js` use D3’s transition API to reflect color scale changes. Data is loaded from a CSV via `d3.csv`, and a D3 zoom interaction lets users inspect regions.

Untitled

This example combines a U.S. state map with a date-based histogram, visualizing ozone AQI values from a cleaned CSV dataset. The map renders state boundaries and interiors using `d3.geoPath` and `topojson` features. A histogram of daily AQI readings is drawn with React and D3 scales, where each bar’s tooltip displays its exact AQI value. The code uses `d3.csv` for data loading and `d3.json` for the US Atlas topology, with styling provided by Poppins font and custom CSS.

Example AQI Data in Bar Graph

This bar graph displays the Air Quality Index (AQI) values for various pollutants in Maine, with each pollutant represented as a horizontal bar whose length corresponds to its AQI measurement. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. SVG rectangles are rendered for each bar, with axes created through custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV file using D3’s `csv` function, and hovering over a bar reveals its exact AQI value via a tooltip.