Chase Hall

new data with json

This example displays a choropleth map of U.S. counties, colored by yearly data values from 2000 to 2021. A vertical slider with a play button animates through years, updating the fill colors with a sequential scale. The map is rendered as SVG paths using d3.geoPath with geoIdentity projection, based on TopoJSON data from the us-atlas library. Hovering reveals county names, state abbreviations, and the current value via SVG titles, while state borders are drawn as a mesh overlay.

Dec 7, 2022

Fork of React + D3 Viz Starter

This example demonstrates a React + D3 visualization starter template, displaying a blank SVG canvas with gray and light-gray rectangles that highlight the margin convention. The code loads remote JSON data via `d3.json` but does not yet render it, focusing instead on the boilerplate structure. A `VizContainer` component abstracts the SVG and group elements, using the margin convention to position inner content. The visualization relies on React 16 and D3 v6 loaded via CDN, with SVG rendering for the output.

Dec 6, 2022

new data with json

This choropleth map displays county-level ozone concentrations across the United States from 2000 to 2021. A vertical slider and play button animate through years, with the sequential YlGnBu color scale mapping ozone levels while gray indicates missing data. Built with React and D3 v5, it uses `geoPath` with an Albers USA projection and TopoJSON county/state boundaries, rendering SVG paths with hover tooltips showing county names and values.

Dec 6, 2022

Fork of Stylized Line Chart

This example shows a stylized line chart tracking Air Quality Index (AQI) values over time for ozone pollution in Bangor, Maine. The visualization uses a natural curve to connect data points, with circle markers reinforcing each observation. The chart is built with React components, using d3.scaleTime and d3.scaleLinear for axis scaling and d3.line with curveNatural for the path. Temporal and value axes are rendered as SVG elements with formatted date tick labels. Data originates from a CSV file loaded via d3.csv, and the styling relies on the Poppins font and custom CSS classes for marks and labels.

Dec 5, 2022

Fork of map with aqi data with histogram

This interactive visualization combines a map of U.S. states with a time-based histogram of air quality index (AQI) values. The map shows data points as blue circles, with radius scaled by AQI using a square-root transform. A separate histogram displays the monthly average AQI over time, binned by month. The visualization uses React with D3 v5 APIs, including `d3.geoAlbersUsa` and `d3.geoPath` for map projection and rendering, and `d3.histogram` with `timeMonths` for binning. Data is loaded from a CSV file containing ozone samples with geographic coordinates and dates.

Dec 5, 2022

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.

map of epa data sites

This map displays EPA air quality monitoring sites across the United States as blue circles overlaid on a geographic outline of the states. The visualization uses React to render SVG elements, with D3’s `geoAlbersUsa` projection and `geoPath` to draw state and interior boundaries from a TopoJSON US Atlas. Data is loaded via `d3.csv` from a GitHub-hosted file, with point locations plotted by longitude and latitude. A square root scale (`scaleSqrt`) maps AQI values to circle radii, though the current radius is fixed at 5 pixels.

new data

A choropleth map of U.S. counties shows ozone levels for each year from 2000 to 2021, with a vertical slider and play button to animate through time. County colors use a sequential yellow-green-blue scale, while state boundaries are drawn as thin lines. Built with React and D3 v5, it uses `geoPath` with a fitted Albers projection, a TopoJSON atlas, and a Map lookup from CSV data. Hovering a county reveals its name and ozone value.

Fork of new data

This interactive choropleth map shows annual PM2.5 air pollution levels across U.S. counties from 2000 to 2021, with a slider and play button animating through years. County polygons are colored using d3.scaleSequential with a reversed YlGnBu interpolator, while uncolored areas appear grey. The visualization uses React hooks for state management, d3.csv for data loading, topojson.feature for county and state boundaries, and d3.geoPath with geoIdentity projection for rendering SVG paths. State borders are drawn as a separate mesh layer, and tooltips display county names and values.

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

Practice Face

This example shows a static, stylized face built from a single yellow circle with a black outline, centered on an 960×500 SVG canvas. The rendering relies on raw SVG markup, using a `<circle>` element with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes. Although the page loads the React 18.2.0 production library via a `unpkg` script tag, the visualization itself does not employ React components or any dynamic behavior; it simply logs the React object to the console. The graphic demonstrates basic vector shape construction without interaction or data mapping.

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.

Nov 18, 2022

AQI Data in America in 2021 with Histogram and Brushing

This interactive visualization displays Air Quality Index (AQI) data across the United States in 2021, combining a bubble map with a linked histogram. Users can brush over the time-series histogram to filter which data points appear on the map. The map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries, while colored circles indicate AQI values using d3.scaleQuantile. The histogram is built with d3.bin and d3.brushX, with data loaded from a CSV file containing ozone measurements.

Nov 18, 2022

Fork of Pollution in US with counties by React and d3

This choropleth visualizes PM2.5 air pollution concentrations across US counties from 2000 to 2018, with a slider and play button animating through years. County colors map to concentration values via a quantile scale, while county and state boundaries are rendered using d3.geoPath with TopoJSON data from the US Atlas. React manages the interactive year state, and d3 provides the color interpolation and legend scales. Hovering reveals county names and exact values through SVG titles.

Nov 18, 2022

AQI Data in America by county

This interactive visualization displays a choropleth map of air quality index (AQI) data across U.S. counties, with each county colored by its AQI value according to a quantile scale. A brushed time-series histogram below the map filters the displayed data by collection date, allowing users to explore how AQI varies temporally. The map uses d3.geoPath with a geoAlbers projection and topojson county boundaries, while counties without data appear gray. The histogram is built with d3.bin and d3.brushX, and the entire interface is rendered as SVG within a React framework, reading from a CSV dataset.

Nov 8, 2022

Fork of Firefly Cartography

This example visualizes cities with populations over 50,000 as glowing firefly-like sprites on a dark, inverted Stamen toner-lite basemap. Each point is rendered using OpenLayers vector layers with a custom canvas-generated circle sprite. The map is built with React and OpenLayers, while city data is loaded via d3.csv from a Simplemaps World Cities Database. The visualization uses a WebGL-capable canvas context for sprite generation, creating a striking contrast against the dark gradient background.

Nov 3, 2022

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.

Nov 3, 2022

globe

This example displays a map of the world on a dark grey spherical globe with white borders. The globe is rendered using React and SVG, with the d3.geoOrthographic projection and d3.geoPath converting geographic data into SVG paths. Country boundaries are drawn from a TopoJSON file loaded using the d3.json function. A large grey circle provides the globe’s background, while the map features are layered on top with thin white strokes.

Oct 26, 2022

Fork of Cheap Tricks for Interaction

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom controls. The visualization renders geographic boundaries as SVG paths, colored light green against a blue sphere, and displays country names as tooltips. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` for map generation, with data from the world-atlas package. The zoom functionality is implemented via D3's `zoom` event, while the `topojson` library's `feature` API processes the TopoJSON data.

Oct 25, 2022

Fork of Choropleth Map

This choropleth map colors world countries by their economic classification using a spectral color scale, with an interactive color legend showing the categorical values. The map renders geographic boundaries and landmasses through D3’s geospatial projection and path generation, while hover effects highlight individual countries. Data is loaded from the World Atlas topojson and TSV files, processed via the `topojson` feature API, and colors are assigned using `d3.scaleOrdinal` with a `schemeSpectral` range. The view supports zoom and pan through D3’s interactive zoom behavior.

Oct 25, 2022

Fork of D3 Git History Streamgraph

This fork of the D3 Git History Streamgraph visualizes commit activity across D3 repositories over time. Each layer represents a repository, with thickness scaled to the number of weekly commits, smoothed via the `array-blur` library, and stacked using `stackOffsetWiggle` with `stackOrderAppearance`. The order of layers is determined by the first commit date, so reading labels from bottom to top reveals the historical introduction of each repo. Rendered as an SVG using `d3.area`, `axisTop`, and `axisBottom`, the chart uses hover effects to highlight individual layers, making the explosion of packages around D3 4.0 clearly visible. Data comes from a JSON file of all D3 commits, sorted by week.

Oct 25, 2022

map with aqi data

This map displays air quality index (AQI) readings as circles overlaid on a U.S. states map, with circle size proportional to AQI values. It renders SVG via React, using d3.geoPath with a geoAlbersUsa projection for the map outlines and d3.scaleSqrt to map AQI to radii. The data is loaded as CSV from a GitHub gist, while state boundaries come from the us-atlas TopoJSON. Hovering over a circle shows a tooltip with its AQI value.

Oct 18, 2022

AQI Data in America by State

A choropleth map of the United States colors each state by its average Air Quality Index (AQI) value, using a quantile color scale ranging from green to red. A linked time-series histogram below displays monthly mean AQI values, with a brushable interface that filters the map’s state colors based on the selected date range. The visualization uses React and D3 v5, with `d3.geoAlbersUsa` and `d3.geoPath` for map rendering and `d3.brushX` for interactive filtering. Data comes from a CSV of ozone samples collected nationwide.

Oct 18, 2022

map with points

This visualization displays a map of the United States with a circle for each city, sized by population using a square-root scale to reduce visual disparity. It shows the geographic distribution of populated areas across the country. The code uses React to manage state and rendering, while D3 v5’s geoAlbersUsa and geoPath project and draw state boundaries and interior borders from TopoJSON data. City coordinates are projected from longitude and latitude, and circles are rendered as SVG elements with opacity.

Oct 18, 2022

EPA Recording sites

A choropleth map of EPA air quality recording sites displays colored circles over US state boundaries, with each circle sized by AQI values. The visualization uses d3.geoAlbersUsa and d3.geoPath for map rendering and d3.scaleQuantile for color encoding. A date histogram below uses d3.histogram to bin daily AQI readings by month, with brushX filtering the map to show only data within a selected time range. Both components are built with React and render SVG elements.

Sep 30, 2022

Fork of AQI Data in America by county

This choropleth map of U.S. counties uses a quantile color scale to display air quality index (AQI) values, with gray indicating missing data. A histogram below the map shows monthly mean AQI values over time. Users can brush over the histogram to filter the map to counties within a selected time range. The visualization combines React with D3 APIs including geoAlbers, geoPath, scaleQuantile, brushX, and histogram, rendering to SVG. Data is loaded from CSV and TopoJSON sources.

Fork of AQI Data in America by county

This visualization maps Air Quality Index (AQI) data by US county, coloring each county based on its PM2.5 concentration using a quantile color scale from green to red. The map uses `d3.geoAlbers` with `d3.geoPath` to render county boundaries, with counties lacking data shown in grey. The data is loaded from a CSV file and rendered as an SVG within a React application, utilizing the D3.js library.

Fork of AQI Data in America by county

This visualization shows the Air Quality Index (AQI) across American counties using a choropleth map, with each county colored on a quantile scale from green to red based on PM2.5 concentrations. The map is rendered as SVG using React and d3.geoAlbersUsa projection, with d3.geoPath drawing county boundaries from TopoJSON data. County-level pollutant data is loaded from a CSV file, and counties with missing data appear in grey. The color scale d3.scaleQuantile maps AQI values to a eight-color gradient, with d3.geoMesh rendering state interiors.

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.

map

This example displays a map of U.S. counties as unfilled, stroked polygons on a blank background, all rendered as SVG paths. The map shows the geographic boundaries without additional fill or data encoding. The code uses React with D3 v5 functions including `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate the path data, and TopoJSON's `feature` function to convert topojson data into GeoJSON features. Data loads asynchronously via `d3.json` from a remote URL, and each feature is mapped to an SVG `<path>` element with a thin teal stroke.

Aug 8, 2022

Fork of map with points

This example displays a choropleth-style map of the United States rendered as SVG paths, using React to manage component state and the d3.geoAlbersUsa projection with d3.geoPath to draw state boundaries from TopoJSON data loaded via the us-atlas package. The map is populated with geospatial features fetched from a remote URL, while a loading fallback appears until the data arrives. The visualization emphasizes the geographic outlines rather than quantitative values, with a single teal fill applied to all marks.

Aug 5, 2022

Fork of Assignment 9: Choropleth Map

This choropleth map visualizes the average Air Quality Index (AQI) across U.S. counties, encoded through a Blues color scale with a threshold legend. It uses `d3.geoPath` to render county boundaries from TopoJSON data, while `d3.map` associates each county with AQI values from a CSV file. The visualization employs `d3.scaleThreshold` and `d3.schemeBlues` for color mapping, with white state boundaries overlaid for geographic context. The SVG rendering approach displays county-level data without interactivity beyond tooltips showing county names and percentages.

Aug 4, 2022

rotatable globe

A rotatable globe displays Earth’s continents and oceans, with animated color-coded pings appearing at random latitude and longitude coordinates. The globe auto-rotates around its vertical axis using a custom `autorotate` plugin that updates the projection’s rotation each frame. Built with React, the visualization uses D3 v5’s projection and path APIs, TopoJSON for world-110m-withlakes data, and the Canvas API for rendering. Users can drag to pause rotation and zoom via the Planetary.js-compatible drag and zoom plugins, with support for high-density displays.

Aug 4, 2022

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.

Aug 4, 2022

Average AQI Per Month in Bangor, Maine

This interactive visualization displays the average Air Quality Index (AQI) per month in Bangor, Maine, for years 2018 through 2022. A slider at the top lets users select a year, triggering a two-second animated transition of the bar chart. The code uses d3.v4 with a d3-queue to load multiple CSV files containing monthly data. Bars are drawn as SVG rectangles, with fill colors mapped through a d3.scaleQuantile. The y-axis scale remains fixed at 0 to 50, while each year’s data updates smoothly via `transition.attr` calls.

Aug 3, 2022

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.

Aug 3, 2022

Example AQI Data in Scatter Plot

This scatter plot visualizes Air Quality Index (AQI) values over time, colored by the dominant pollutant type for each recorded date. Each circle represents a daily measurement, with the y-axis showing the AQI value and the x-axis encoding the date. The visualization is built using Vega-Lite’s API via `vega-lite-api`, with data loaded from a CSV file using `d3.csv`. A firebrick rule line marks a fixed y-value of 20, and tooltips display the specific pollutant and AQI value for each point.

Aug 3, 2022

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.

Aug 1, 2022

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.

Aug 1, 2022

Fork of Assignment 9: Choropleth Map

This choropleth map visualizes the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a blue sequential color scale with a legend. It renders SVG paths via `d3.geoPath` and TopoJSON data from `us-10m.v1.json`, while county values are loaded from `education.csv` and mapped with `d3.map`. The color scale employs `d3.scaleThreshold` and `d3.schemeBlues[9]`, with county tooltips showing exact percentages and state boundaries drawn as white strokes.

Aug 1, 2022

AQI in America with Histogram

This example combines a choropleth map of U.S. states with a histogram of air quality index (AQI) values over time. The map uses d3.geoAlbersUsa projection and d3.geoPath to draw state boundaries, with circles positioned by latitude and longitude and colored by a d3.scaleQuantile. The histogram below aggregates AQI readings by month using d3.histogram and d3.timeMonths, computing monthly means. Both visualizations are rendered as SVG within a React component, using data from a CSV file of ozone measurements.

Jul 29, 2022

histogram for map

This histogram displays the average Air Quality Index (AQI) for each month, derived from ozone data collected across the United States. The visualization uses d3.bin with timeMonths thresholds to group daily measurements into monthly bins, then calculates the mean AQI per bin via d3.mean. The resulting bar chart is rendered as SVG elements through React components, with d3.scaleTime and d3.scaleLinear mapping the time and AQI values. The data is loaded asynchronously from a CSV file using d3.csv, and the bars include tooltips showing each monthly average.

Jul 29, 2022

AQI data in America over histogram

This visualization maps Air Quality Index (AQI) data across the United States, displaying each monitoring site as a circle sized proportionally to its AQI value. The map uses a `geoAlbersUsa` projection and `geoPath` to render state boundaries from TopoJSON, while circles are scaled with `scaleSqrt` on a dataset from a CSV file. The React-based interface integrates D3 v5 for data loading and map rendering, with SVG elements providing a clear, interactive view of regional air quality variations.

Jul 28, 2022

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.

Jul 28, 2022

histogram graph for map

This visualization displays U.S. ozone AQI data over time, using a histogram to show monthly average AQI values. The chart reveals how air quality varies across different months. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to define axes, `d3.histogram` with `timeMonths` thresholds to bin data, and `mean` to calculate aggregate values. The data is loaded from a CSV file, and the resulting bars are rendered as SVG rectangles with mouseover tooltips showing the average AQI for each bin.

Jul 27, 2022

AQI data in america

This example displays a map of the United States with circles representing the population of various cities, colored in blue to contrast against the teal state boundaries. Using the `geoAlbersUsa` projection from `d3`, the map renders state outlines and interiors via `geoPath`. A `scaleSqrt` function maps city populations to circle radii, while React manages the application state and loads both the US Atlas TopoJSON and city CSV data. The visualization highlights population distribution without explicitly referencing AQI values.

Jul 27, 2022

Migrant Deaths Linked Views with Fast Brushing using csv file

This example shows global migrant deaths with a linked scatterplot and map. A brush on the time-series histogram filters the map’s circles by date range, which are sized proportionally to the number of dead or missing individuals. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for landmasses and graticules, while circles are rendered as SVG. The histogram uses `d3.bin`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.brushX` to enable fast linked filtering. Data comes from a CSV file with reported dates and coordinates.

Jul 26, 2022

.json to .csv

This example converts a JSON dataset from the Environmental Protection Agency's Air Quality System API into a CSV string, logging the result to the console. The data contains air quality monitoring records for ozone, including location, measurement, and agency details. The code uses React to load the JSON data from a URL, then programmatically constructs the CSV by extracting the keys from the first object as headers and mapping each row with a replacer function that converts null values to empty strings. It relies on the `AQI.json` import and `d3` v6 libraries.

Jul 25, 2022

Fork of Assignment 9: Choropleth Map

This choropleth map displays the percentage of adults with a bachelor’s degree or higher per U.S. county using a blue threshold color scale and a legend with tick marks. The code loads education data from a CSV and U.S. county boundaries from TopoJSON via `d3.json` and `d3.csv`, then renders paths with `d3.geoPath`. It uses `d3.scaleThreshold` and `d3.schemeBlues` for coloring, adds hover tooltips via SVG `<title>` elements, and overlays state boundaries with `topojson.mesh`. The visualization is built with D3 v5 and React, drawing to an SVG canvas.

Jul 22, 2022

test321

This scatter plot displays one week of temperature data in San Francisco, with timestamps on the x-axis and temperatures in degrees Celsius on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, with d3.axisBottom and d3.axisLeft for the axes. Circles are rendered via SVG, and the data is loaded from a CSV using d3.csv. The chart includes labeled axes and a title, with data sourced from Data Canvas - Sense Your City.

Jul 22, 2022

Fork of D3 v5 Zoomable Sunburst

This fork of the D3 v5 Zoomable Sunburst visualizes hierarchical data as an interactive radial partition layout. Clicking a node zooms the view to focus on that node’s subtree, with smooth animated transitions between levels. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates arc paths and labels. Data is loaded from the Observable `@observablehq/flare` dataset, rendered as SVG paths with color-coded top-level branches and interactive click handlers.

Jul 21, 2022

Document

Six years of monthly data (2009–2014) appear as animated bar charts, with bars growing from the bottom and recolored by a quantile scale as the user drags a year slider. The visualization loads six CSV files asynchronously via `d3.queue`, then uses `d3.transition` for a two-second animated update of bar heights and axis. A range input triggers `draw()` on change, while `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantile` handle positioning, scaling, and color mapping. The SVG rendering relies on `d3.axisLeft`, `d3.axisBottom`, and `.attr` transitions.

Jul 21, 2022

US Estimated Crime Data (1995 - 2015): Top 5 States

This interactive sunburst chart visualizes estimated crime data for the top five US states from 1995 to 2015. The visualization uses a hierarchical partition layout with animated zooming, where clicking a slice refocuses the view on that segment. Built with D3 v4 and React, it renders SVG arcs with text paths for labels, using d3.partition, d3.arc, and transition.attrTween to create smooth scaling animations. The data appears to come from a JSON structure containing pollutant metrics, though the visualization maps these hierarchical values into the sunburst layout.

Jul 21, 2022

Untitled

A line chart displays stock closing prices over time for two datasets. An "Update" button triggers an animated transition between the datasets, smoothly interpolating both the line path and the x- and y-axes using D3.js transitions with a 750-millisecond duration. The visualization uses d3.svg.line, d3.time.scale for time-based x-axis formatting, and d3.svg.axis, with data loaded from CSV files via d3.csv. The SVG path and axes are updated in place, demonstrating dynamic data swapping.

Jul 19, 2022

Scatter Plot with Menus

A scatter plot displays air quality measurements, with dropdown menus allowing users to select which pollutant attribute (pollutant, PM10, ozone, or PM2.5) drives the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear`, `extent`, and `max` from d3 to map data to SVG coordinates. Axes are rendered by custom React components, and circles include native SVG `<title>` tooltips. Data loads asynchronously from a CSV using d3's `csv` method.

Jul 18, 2022

Stylized Line Chart

This stylized line chart visualizes daily Air Quality Index (AQI) values for Bangor in 2022 over time. Each data point is rendered as a small circle with a hover tooltip, while the connecting line is drawn using D3’s `line` function with a natural curve. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, and rendered as an SVG. The data is loaded from a CSV source via D3’s `csv` parser, and the chart is styled using the Poppins font and a custom color palette.

Jul 18, 2022

10Green Line Graph Template

This line graph template displays daily Air Quality Index (AQI) values over time for Bangor, Maine, using D3 scales (scaleTime, scaleLinear) to map data points as SVG circles. The visualization reads CSV data via d3.csv, with React managing component state through hooks. Axes are rendered by custom React components that generate D3 tick marks and labels, while the chart's teal color scheme and clean styling come from CSS classes.

Jul 15, 2022

10 green graph template with menus

Ten green horizontal bars display AQI values for Maine pollutants in a React and D3 bar chart. Two dropdown menus select axis attributes, though only the options array for the Y-axis is shown. The SVG visualization uses D3's scaleBand and scaleLinear for axes, with tooltips revealing each bar's exact value. Pollutant data loads from a CSV file using D3's csv function.

Jul 15, 2022

Fork of React Starter

This example demonstrates an interactive dropdown menu that lets users select a pollutant metric such as NO2, Ozone, PM2.5, or PM10. When an option is chosen, the selection is logged to the browser console. The interface uses React hooks, specifically `useState`, to manage the selected value, and a reusable `Dropdown` component built with React’s `select` and `option` elements. The code relies on React 16.13.1 and ReactDOM for rendering, with inline CSS for styling the large text and dropdown.

Jul 15, 2022

backup bar chart

This example visualizes air quality index values for various pollutants in Maine using a horizontal bar chart. The chart displays pollutants along the y-axis and their corresponding AQI measurements along the x-axis. It loads the CSV data using D3's `csv` utility and renders the SVG bars and axes with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code also includes tick marks and labels generated from the scales.

Jul 14, 2022

bar graph exsample

This example combines a bar graph and a line graph to compare Air Quality Index (AQI) values across different pollutants. The bar chart displays AQI values with tooltips, while the line chart overlays the same data points, both sharing the x-axis for AQI and y-axis for pollutant names. The visualization uses vega-lite-api, registering vega and vega-lite, and loads data from a CSV file via d3.csv. Custom axis and label styling is applied through a config object to improve readability.

Jul 13, 2022

Fork of Making a Bar Chart

This visualization displays the daily Air Quality Index (AQI) values for two pollutants, NO2 and Ozone, as horizontal bars. It shows how AQI levels fluctuate over time for each pollutant type, with the x-axis representing AQI values and the y-axis listing pollutant categories. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, with data loaded from a local CSV file. Custom axis label formatting is applied using D3's `format` function, and the chart includes a title and axis label for the AQI value.

Jul 13, 2022

tests

This visualization plots air quality index (AQI) values over time, with each point colored by the main pollutant type. It uses the vega-lite-api library to construct a scatterplot with tooltips showing AQI value and pollutant. A horizontal red rule line is also drawn at a fixed y-value of 20, though its significance is not labeled. The data is loaded from a CSV file hosted on GitHub using d3.csv, and the visualization is rendered with Vega-Lite in an SVG view.

Jul 13, 2022

interactive graph

This interactive scatterplot displays air quality index (AQI) values over time, plotting each daily measurement as a point with a fixed size and full opacity. Hovering reveals the exact AQI value via tooltip. The visualization loads daily API data from a CSV file using `d3.csv`, then builds the chart with the vega-lite-api library, which registers Vega and Vega-Lite and renders to SVG. The chart automatically fits the window size and applies custom styling for readability.

Jun 30, 2022

Loading and Parsing CSV Data

This example shows how to load and parse a CSV file using D3 v5, displaying the file size, row count, and column count of a dataset containing CSS named colors. The visualization uses the `d3.csv` method to fetch the remote CSV from a GitHub gist and parse it into an array of objects. After loading, it calculates the data’s byte size with `d3.csvFormat`, the number of rows via the array length, and the number of columns using the `data.columns` property. The resulting text is rendered in a large `<pre>` element, demonstrating the basic pipeline of asynchronous data loading and summary reporting.

Jun 29, 2022

Loading data with react and d3

This example demonstrates how to load and summarize a CSV dataset within a React application using D3.js. It displays a text message showing the data’s size in kilobytes, row count, and column count after fetching CSS named colors from a GitHub gist. The code uses React’s `useEffect` and `useState` hooks alongside `d3.csv` to asynchronously retrieve the data, and `d3.csvFormat` to calculate its length. The interface shows "Loading..." until the data arrives, then renders the summary.

Jun 29, 2022

mouse follower

A smiling face, drawn as a single SVG circle, follows the mouse cursor across a 960 by 500 canvas. The React application tracks pointer movement via the `onMouseMove` event, updating the circle's center coordinates in its state. The reusable `useCallback` hook optimizes the event handler, and ReactDOM renders the interactive graphic inside the `#root` div. The example demonstrates real-time state-driven SVG redrawing using React 16.9.

practice viz

A smiley face is rendered as a static SVG graphic, centered within a fixed viewport. The visualization uses React components to structure the SVG elements, while D3’s `arc` generator creates the mouth path. A yellow circle with a thick black stroke forms the head, and two smaller black circles serve as eyes. The code imports `arc` from D3 and uses React’s `ReactDOM.render` to mount the component, combining declarative UI with D3’s geometry helpers for a simple, recognizable icon.

123

This example shows a simple smiley face rendered as an SVG using React components for structure and D3’s `arc` function to generate the mouth path. The face is centered with a yellow circle, two black eye circles, and a crescent-shaped mouth created via `d3.arc` with defined inner and outer radii and angular extents. Positioned offsets for the eyes and stroke width for the face outline are computed dynamically. The code integrates React 16.9 and D3 v5, rendering directly into the DOM via `ReactDOM.render`.

practice project

This practice project demonstrates a simple smiley face rendered as an SVG graphic using React and D3. The visualization shows a yellow circle with a black stroke for the face, two black eye circles, and a mouth formed by a D3 arc path. The component uses React’s declarative JSX to define SVG elements, while the `arc()` API from d3-shape computes the mouth’s curved path geometry. Coordinates are calculated relative to the SVG’s center, with fixed offsets for eyes and mouth radius controlling the facial features.