Andre J Denais

FulcrumSpeedworks Customer Map With Fast Brushing Bars V1

This visualization combines a world map and a brushable time histogram to explore a dataset of missing migrants. The map displays circles sized by the total number of dead and missing using a square-root scale, with geographic context provided by `d3.geoPath` and graticules. The histogram, built with `d3.scaleTime` and `d3.histogram`, shows monthly death counts. Users can brush the histogram, triggering a reactive filter that dynamically updates which map circles are drawn. The project uses React for the interface and D3 v5 for projections, scales, and brushing.

Jun 1, 2023

Fork of Fork of USA Country Map

This example displays a map of the fifty United States, rendered as pink states with white borders that highlight orange on hover. The visualization uses the `d3.geoPath` function with the `geoAlbersUsaTerritories` projection to draw the geographic data. State boundaries come from the `us-atlas` TopoJSON file, processed by the `topojson` `feature` and `mesh` functions, while React manages the SVG rendering and user interface.

Jun 1, 2023

Fork of Sine Wave Circles

This example shows a horizontal row of 30 equally spaced circles whose vertical positions oscillate to form a sine wave pattern. The circles move up and down smoothly, with the wave phase shifting over time. Built with D3 v7, the code uses `d3.range(n)` to generate the circle indices and `d3.timer` to drive the animation loop. Each circle’s y-coordinate is computed from a sine function combining the index, a frequency factor, and the elapsed time, with the SVG canvas fixed at 960 by 500 pixels. The rendering uses standard SVG circle elements.

May 25, 2023

us test

This interactive map of the United States displays the 10-meter resolution state boundaries from the us-atlas package, with states shown in blue and territories outlined in gray. The visualization supports panning and zooming through d3.zoom, which applies affine transforms to the SVG group containing the map. The code builds the geographic paths using d3.geoPath with a null projection, and includes a graticule generated by d3.geoGraticule for reference. State boundaries are processed from the TopoJSON data using the topojson library's feature function.

May 15, 2023

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

Apr 25, 2023

Fork of United States Educational Attainment - Choropleth Map

A choropleth map shows the percentage of adults with a bachelor's degree or higher across U.S. counties, using a purple sequential color scale. Hovering over a county displays a tooltip with the county name, state, and exact percentage. The visualization loads county boundaries from TopoJSON and education statistics from a FreeCodeCamp-hosted JSON dataset, rendering them as SVG paths via `geoPath`. React manages the component state, while D3 v5 handles the `scaleThreshold` color mapping and the interactive legend.

Dec 18, 2022

SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays monthly NOAA climate summaries for SFO and Oceanside stations from 1946 to 2020, with a dropdown menu to switch between temperature attributes on the y-axis. The visualization uses React with D3 v6 scales and axes, rendering SVG circles colored by station through a ordinal color scale. An interactive legend allows hovering to highlight selected station data by adjusting circle opacity, while tooltips reveal exact temperature values on hover.

Dec 18, 2022

Fork of Mathematical Graphic Patterns

This animated canvas piece generates a shifting grid of glowing colored circles that ripple outward in a spiral formation, creating a dynamic, screensaver-like visual effect. The pattern continuously redraws over a semi-transparent black background, leaving faint trails as the positions and radii of the circles evolve over time. Rendering uses the Canvas 2D API with `getContext('2d')` and `requestAnimationFrame` for smooth animation. Each circle’s color, size, and location are computed from sine and cosine functions of grid coordinates and a steadily incrementing time variable, producing a complex, mathematically driven display.

Dec 15, 2022

React D3 Conditional Line Chart Practice - SFO Temp X-Bar

This React and D3 v6 example renders a statistical process control chart of San Francisco’s mean temperatures by year, using data from a local CSV file. The SVG visualization plots a connected line of sample means, with points conditionally colored green, amber, or red based on whether they fall within, below, or above the control limits (LCL and UCL). It overlays dashed lines for the upper and lower control limits and includes axis components built with `d3.scaleTime`, `d3.scaleLinear`, and custom React components.

Dec 8, 2022

React D3 Conditional Line Chart Practice - Tires R-Chart

This React and D3 line chart displays tire manufacturing quality control data as an R-chart, plotting sample ranges against upper and lower control limits (UCL and LCL). Conditionally colored circles mark each point as green, red, or amber based on whether values exceed the UCL threshold of 29.3383 or fall below the LCL of 0. The chart uses d3.scaleLinear for both axes, d3.line for the connected path and control limit lines, and d3.csv to load data from a local CSV file. SVG rendering displays axis ticks, dashed boundary lines, and hover tooltips.

Nov 23, 2022

React D3 Conditional Line Chart Practice - Tires X-Bar

This example shows sample mean values across 20 sequential samples as a connected scatter plot, with points colored green, amber, or red based on whether they fall within or outside the control limits of 17.5037 and 40.8296. Dashed lines mark the upper and lower control limits, and hovering over a point reveals its exact sample mean value in a tooltip. The visualization uses React with D3 v6, employing `d3.scaleLinear` for both axes, `d3.line` for the connected path and limit lines, and CSS classes for conditional point coloring. Data is loaded from a CSV file using `d3.csv`.

Nov 23, 2022

React D3 Conditional Line Chart Practice

A time-series line chart tracks a risk value as a percentage over monthly intervals from 2015 to 2016, with each data point colored by a conditional threshold: green below 50, amber between 50 and 75, and red above 75. Dashed reference lines mark the 50% and 75% boundaries. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line()` for the connecting path, and `d3.csv` to load the data from points.csv. SVG circles render each point, with hover tooltips showing the exact value via the `<title>` element.

Nov 23, 2022

Sine Wave Circles Playground

A grid of 300 white circles forms a static horizontal row that animates vertically as a sine wave, creating a fluid, undulating pattern across a black background. The animation uses D3 v7's `d3.timer` to continuously update each circle's `cy` attribute based on the sine of its index and elapsed time. Written in ES6 and ported from an older bl.ocks.org example, this SVG-based playground demonstrates how math functions can drive simple shapes into organic motion.

Aug 12, 2022

Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

A radial stacked bar chart displays two years of personal electricity consumption for three separate accounts, with each bar segment representing a bill year’s kilowatt-hours for a given month. A dropdown menu switches between accounts, updating the displayed data. The visualization uses d3’s `scaleRadial`, `scaleBand`, `stack`, and `arc` to render the polar layout, with a transition animation on updates. Data comes from a CSV file of electric billing records, and the chart is built as a reusable D3 component with SVG rendering.

Fork of Dragging HTML Elements 2

This interactive example demonstrates a drag-and-drop workload modeller built with custom HTML elements. It shows how items (including nested SVG graphics) can be moved between containers, reordered within collections, and grouped into targets using vc-dragitem and vc-dragcontainer elements. The implementation relies on the native HTML5 Drag and Drop API, custom elements defined via customElements.define, and CSS grid for layout. Users can select multiple items, collapse/delete collections, and save or restore connection configurations.

Fork of AQI Data in America in 2021 with Histogram and Brushing

This interactive visualization combines a choropleth map of US states with a histogram of AQI values over time, using linked brushing to filter data points on the map. The map displays circles colored by a quantile scale ranging from green to red based on AQI levels, while the histogram shows monthly average AQI values. Users can brush a time range on the histogram, which dynamically filters which data points appear on the map. The visualization uses d3.geoAlbersUsa and d3.geoPath for the map projection, d3.histogram for binning, and d3.brushX for the interactive selection, all rendered as SVG within a React framework.

Fork of NASCAR Scatterplot With Dropdown, Filter

A NASCAR scatterplot displays race winners by starting position or other selectable statistics across years, with each point colored by track name. A dropdown menu switches between metrics like payout, caution flags, lead changes, and winning time. Hovering over the legend highlights all points for a specific track while fading others. The visualization uses React with D3 scales (scaleTime, scaleLinear, scaleOrdinal) for axes and coloring, rendering SVG circles, and loads data from a CSV file.

Fork of United States Educational Attainment - Choropleth Map

Fork of Waste-Aggregation by gates

This interactive map displays building-level waste generation data in a Mumbai ward, using Leaflet to render an OpenStreetMap base layer with circle markers. Each building marker is color-coded and clickable, revealing a popup with population, dry waste, wet waste, and total waste values from GeoJSON fetched via D3.js. The visualization overlays building-to-gate mapping data, highlighting which buildings are connected to specific waste collection gates. The code uses `d3.json` to load GeoJSON data from a GeoNode WFS service and a GitHub-hosted mapping file, with Leaflet's `L.geoJSON` handling dynamic styling and interactive popups.

Animated Reusable D3 Scatter Plot Black and White

This example presents an animated scatter plot of the Iris Dataset, cycling through four flower measurements as the x-axis every five seconds. The visualization uses a reusable D3 scatter plot component with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Circles transition smoothly via `transition().duration(1000)` with a staggered delay, while the x-axis labels animate between column names. The code leverages D3’s `.join()` operations to handle entering, updating, and exiting elements, rendering as SVG with a black-and-white aesthetic.

Feb 10, 2022

Animated Labels Reusable D3 Scatter Plot Black and White

This example animates the classic Iris dataset through a reusable D3 v3 scatter plot, cycling the x-axis between four measured features every five seconds. Circles representing flower samples transition smoothly to new positions using `transition().duration(1000)`, while axis scales and labels update in sync. The implementation leverages `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and a custom scatterPlot factory function that manages enter, update, and exit selections. Styled in black and white with the "Share Tech" font, the SVG rendering highlights how reusable chart components can handle dynamic data bindings.

Feb 10, 2022

Missing Migrants on a Map with Fast Brushing Bars

A world map shows the global distribution of missing migrants, with circle sizes scaled by the total number of dead and missing per location. A time-series bar chart beneath the map displays the same totals aggregated by month. Brushing a time range on the chart immediately filters the map’s circles to show only incidents within that period. The visualization uses D3 v5 for geographic projections, histograms, and brushing, with React managing state and rendering SVG elements. Data comes from a CSV of migrant incidents, while country boundaries are drawn from TopoJSON.

Feb 10, 2022

SmileyPart3

This visualization is a cheerful, stylized smiley face rendered as an SVG. The face is composed of distinct, modular React components, including a brown circular background, black outlined eyes, an open mouth defined by a D3 arc, white teeth with a gap, and a spiky orange polygon for hair. The rendering uses React to construct the SVG elements, while the D3 library's `arc` API generates the precise paths for the mouth and teeth shapes.

Feb 2, 2022

Crime in India Dashboard

The Crime in India Dashboard visualizes reported crime cases across Indian states using a choropleth map and two donut charts. Users select a year and crime type via dropdowns to update the map, while the donuts break down totals by state and offense category. The dashboard uses D3 v7 with topojson for state boundaries, d3.map projections, and d3.arc for donut segments, sourcing data from a public CSV of crimes against women. Simple animations enhance transitions when filters change.

Feb 1, 2022

Fork of Brush, Trendline, Legend, Title, Linechart, Barchart

This fork of a D3.js example combines a line chart of EPA groundwater monitoring levels with a bar chart of effective rainfall for the Bog of the Ring. A brushed time-series chart filters both views synchronously, and a dashed trendline with its equation updates based on the selected date range. The code uses `d3.brushX`, `d3.scaleTime`, `d3.axisBottom`, and `d3.nest` to build the SVG rendering, with `d3.csv` loading the two datasets. A color legend distinguishes the observation wells and rainfall series.

Jan 13, 2022

Fork of Brush, Trendline, Legend, Linechart, Barchart

The visualization shows groundwater monitoring data from two observation wells at the Bog of the Ring, plotting water levels over time as a line chart with a brushed time-range selector below. A dashed linear regression trendline appears for the selected period, calculated via the least-squares method in the `Regression.js` module. The implementation uses D3 v5 APIs including `d3.brushX`, `d3.scaleTime`, `d3.scaleLinear`, `d3.nest`, and `d3.line`, rendering to SVG with a categorical color scale to distinguish the two wells. Data is loaded from external CSV files.

Jan 13, 2022

Wind Rose DateHistogram

A wind rose diagram displays the frequency of wind speeds across 16 compass directions, with stacked colored arcs representing speed bins from 0–1 to 6+ knots. A linked date histogram below shows the monthly total of dead and missing migrants, with a brushable time range that filters the wind rose. The visualization combines React components for the histogram axes and marks with D3 v4 scales, including a custom radial scale from d3-scale-radial.js for the circular layout. Data comes from a CSV file, and rendering uses SVG paths and rectangles.

Jan 11, 2022

Wind Rose Starter Playtime

This wind rose visualizes wind speed and direction using stacked radial bars. The wind speed bins are shown as colored segments, with direction labels placed around the circular plot. The code uses `d3.arc()` for the bar geometry, `d3.stack()` to layer the speed categories, and `d3.scaleOrdinal` for color mapping. Data comes from a CSV file, with circular grid lines drawn via `d3.axisLeft`. The custom `d3-scale-radial.js` library is included but the main visualization uses standard linear scales for radius.

Jan 11, 2022

Fork of D3 map drag demo

This interactive globe displays world countries as clickable paths on an orthographic projection, with hover tooltips showing country names from the World Atlas TopoJSON dataset. Users can rotate the sphere by dragging, which adjusts the projection’s rotation via d3.drag and d3.geoPath, while a graticule and sphere outline provide spatial reference. A d3.zoom transform also pans and scales the entire SVG group, and country fill changes on hover through CSS.

Fork of Nascar Dashboard I- Just Plots

This dashboard presents four NASCAR visualizations: a map of track locations, a bar chart of starts before first wins, a stacked bar chart of top winning drivers by track, and a chart of car maker finishes. Built with Vega-Lite API and D3.js, it uses layered geoshape and circle marks with Albers USA projection, interactive selection for filtering, and tooltips. Data is loaded from external CSV files via D3’s `csv` method, with custom styling configured in a separate config file.

Fork of Line Chart for ILINet Flu Surveillance Data

This interactive dashboard for ILINet flu surveillance data combines a scatterplot, U.S. map, bar chart, and curve chart. The main scatterplot uses position, color (by year), and size (by ILI total) to reveal flu season patterns since 2015. Built with React and D3 v5, it uses `scaleOrdinal`, `scaleLinear`, and `geoAlbers` projections to render SVG marks and geographic features. A dropdown menu switches the y-axis attribute among ILI percentage, totals, providers, or patients, with data from the CDC's FluView Interactive.

NASCAR Stats Dashboard Template

This dashboard template arranges six placeholder visualization panels in a flexbox layout, with a top row and bottom row for displaying NASCAR race statistics from 1975 to 2003. The code includes reusable D3 components for scatter plots, stacked bars, maps, and bar charts, along with React hooks for managing data loading via d3.csv. Axes are rendered using custom React components that call d3 scale methods like xScale.ticks(), while a color legend supports interactive hover states with opacity fading. The styling uses named colored panels to define each visualization area before data integration.

Fork of Swedish map

This visualization displays a map of Swedish counties using a Mercator projection, with the counties filled in teal and their borders drawn in a complementary green. The code loads GeoJSON data via `d3.json`, processes it with the TopoJSON `feature` and `mesh` functions to extract county geometries and interior boundaries, and renders them as SVG paths using `d3.geoPath` within a React component. The map is fitted to the viewport, and the styling is applied through CSS classes.

Dec 5, 2021

Fork of Scatter Plot with brushing - Number of deaths by alcohol and drug risk factor per 5 countries.

This scatter plot visualizes customer data, showing age on the x-axis and total revolving balance on the y-axis, with points colored by education level using a categorical color scale. Users can brush horizontally on the chart to zoom into a specific age range, which triggers an animated update of both the x-axis domain and circle positions via transition. The visualization is built with D3 v7, using `d3.brushX`, `d3.scaleLinear`, and `d3.axisBottom`, and renders as SVG with data loaded from a CSV file.

Nov 18, 2021

BankInfo Barchart Practice

This example visualizes bank customer data as an interactive bar chart with five series of ten values each, rendered as SVG rectangles. Users can toggle between grouped and stacked layouts using custom radio buttons built with D3 selections. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout, with hover tooltips displaying precise values via a D3-managed HTML div. Data comes from a CSV file loaded asynchronously through a custom `useData` React hook, and transitions animate between layout states.

Nov 16, 2021

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, with each bar segmented by religion and colored using a categorical scale. Hovering over a bar reveals a tooltip with the specific country, religion, and population via d3-tip, while hovering over the legend highlights corresponding segments by fading the base bars and rendering a foreground layer. The chart uses d3.layout.stack and ordinal/linear scales for positioning, with data sourced from Pew Research’s Global Religious Landscape, rendered in SVG with D3 3.5, d3.legend, and d3-tip.

Oct 15, 2021

Practice with flying Barchart

Five colored series of bars fly between stacked and grouped layouts every two seconds in a D3 v6 bar chart. Each bar can be hovered to show a tooltip with the exact values of all series at that point. The chart uses d3.stack for stacking, d3.scaleBand for positioning, and transitions to animate bar positions and sizes. Data comes from a CSV file loaded via d3.csv in React.

Oct 11, 2021

Some Practice JS

A simple bar chart displays four dummy data points, comparing values across regions (USA, India, China, Germany). The visualization renders as SVG rectangles using D3 version 6, with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. The chart's purple bars are generated through D3's selection API, appending `rect` elements with computed width, height, and position attributes from the scales. The example comes from a practical introduction to D3.js, demonstrating fundamental data binding and scale usage.

Oct 8, 2021

Wind Rose Starter

This wind rose visualization displays the frequency and direction of wind speeds, with eight speed categories (from 0-1 to 6+ units) arranged as concentric rings around a central point. Each of the 16 compass directions (N, NNE, NE, etc.) is represented as a wedge, colored by speed category using `d3.scaleOrdinal()`. The chart uses `d3.arc()` with `innerRadius` and `outerRadius` from a `d3.scaleLinear()` to draw stacked radial bars, and includes circular gridlines and angle labels. Data is loaded from a CSV file with `d3.csv()`, and the visualization is rendered as SVG, with an optional `scaleRadial` function from the included `d3-scale-radial.js` file available for alternative radial scaling.

Oct 4, 2021

Golden Gate Transit Bus Ridership 2019-2021 Tooltip

This line chart visualizes Golden Gate Transit bus ridership from 2019 to 2021, revealing the dramatic drop in monthly rides during the COVID-19 pandemic. The chart uses D3 v6 scales and natural curve interpolation to draw the ridership trend, with a React-based tooltip that highlights the date and rank of the data point nearest the mouse position. The hover behavior is implemented via an inverted time scale to find the closest data point, and the tooltip displays a formatted date and value. The underlying data is loaded from a CSV source hosted on GitHub.

Sep 3, 2021

Golden Gate Transit Bus Ridership 2019-2021

This line chart tracks Golden Gate Transit bus ridership from 2019 to 2021, revealing a sharp decline coinciding with the COVID-19 pandemic. The visualization uses D3 v6 scales for time and linear axes, with a smooth natural curve path drawn in SVG via React components. The data is fetched as CSV from a GitHub gist, with x-axis labels formatted as months and y-axis showing monthly ride counts.

Sep 3, 2021

Muni Ridership 2019-2020/Pandemic

This interactive line chart visualizes San Francisco Muni’s average daily boardings from 2019 through 2021, highlighting the drastic ridership drop caused by the COVID-19 pandemic. The SVG rendering uses React and D3 v6, with `scaleTime` for the date axis, `scaleLinear` for ridership, and a natural curve via `line` and `curveNatural`. Data comes from a remote CSV loaded with `csv`. Axes are custom React components, while a tooltip is planned but not yet implemented.

The Basic Reusable D3 Scatterplot Black and White

This example presents a reusable D3.js scatter plot visualization of the classic Iris dataset, mapping petal length against sepal length. The SVG-based chart uses `d3.scaleLinear` for axis scaling, `d3.axisLeft` and `d3.axisBottom` for axes, and a custom `scatterPlot` module that encapsulates the rendering logic. Data is loaded from a remote CSV file via `d3.csv`, with numeric parsing applied to each column. The visualization demonstrates a black-and-white aesthetic with configurable dimensions, margins, and point radius, making it adaptable for various datasets, though it is specifically illustrated with flower measurements.

GGT and MUNI Animated D3 Scatter Plot

This animated D3 scatter plot displays ridership data for Golden Gate Transit (GGT) and Marin Transit (MUNI), cycling through three column-based views—Operator, Date, and Ridership—every 3.5 seconds. The visualization uses D3 v7's `scaleLinear` for axes and `transition` for smooth 1-second animations, with circles entering at radius 0, updating positions with staggered delays, and axes transitioning simultaneously. Data is loaded via `d3.csv` from a raw Gist URL, rendered as SVG with custom Share Tech font styling, and the animation loop is driven by `setInterval`.

The Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through four attributes of the Iris Dataset—petal width, sepal width, petal length, and sepal length—on the x-axis while keeping sepal length on the y-axis. Built as a reusable D3 module, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to smoothly move circles and update axes every 3.5 seconds. The SVG rendering includes staggered update delays per point, with enter animations growing radius from zero, all styled with the Share Tech font.

The Dynamic Reusable D3 Scatter Plot

This dynamic scatter plot visualizes the Iris dataset, with points representing individual flowers. It uses a reusable D3 module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes in SVG. Every two seconds, the x-axis attribute cycles through petal width, sepal width, petal length, and sepal length, automatically updating the scales and circles. Data is loaded via `d3.csv` from a GitHub gist, and the chart animates through these four feature comparisons.

Sep 1, 2021

Reusable Cycle D3 Scatter Plot Black and White

This example visualizes the classic Iris Dataset as an animated scatter plot, cycling through four measured attributes on the x-axis every two seconds while sepal length remains constant on the y-axis. Built with D3 version 6, the reusable `scatterPlot` module manages scales, axes, and circles, using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. The SVG renders black-and-white circles, with axes updated dynamically via the `svg.call(plot)` pattern, demonstrating a configurable chart that handles data changes through setter methods.

Aug 27, 2021

Animations Practice

This example demonstrates an animated landscape scene with a spider-chart-like overlay, rendered in SVG. The visualization uses native SVG `<animate>` elements to cycle colors and positions over 15 seconds, shifting the sky gradient and sun’s vertical path. It uses Google Fonts’ Share Tech and applies CSS for typography, with a radial gradient sky and two linear-gradient terrain paths. The layout is built purely with SVG primitives, including circles, paths, and a complex line-and-text network reminiscent of a radar chart.

Aug 27, 2021

Fork of City density filtering by population and proximity

A world map displays cities with populations over 50,000 sourced from OpenStreetMap, rendered as gray dots alongside highlighted prominent cities. The visualization iteratively filters smaller cities within a distance buffer of larger ones, with blue and white circles indicating surviving cities and their ranks. Using d3.geoPath with a Natural Earth projection, it sizes circles via d3.scaleSqrt and employs @turf/turf functions like buffer and booleanPointInPolygon to determine proximity suppression. Country outlines come from World Atlas TopoJSON.

Aug 25, 2021

MPG Scatter Plot, Color & Interactive Legend

This scatter plot displays vehicle MPG highway ratings against a selected attribute, with each point colored by car make. Users can change the y-axis attribute via a dropdown menu. The interactive color legend highlights points of a specific make on mouse hover while fading others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and SVG circles with tooltips for data inspection.

Aug 25, 2021

Scatter Plot with Menus Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users switch between quantitative attributes (sepal/petal width and length) and categorical species for the x and y axes via dropdown menus. Built with D3 v7, it uses `scaleLinear` and `scalePoint` to adapt axes to data types, with animated transitions on circles and axes. The chart renders as SVG with a reusable `scatterPlot` function and a custom `menu` component that dispatches change events.

Aug 12, 2021

Scatter Plot with Menus include Species

This scatter plot visualizes the Iris dataset, allowing users to compare any two measurements—sepal and petal length and width—through interactive dropdown menus. A third menu option maps the categorical species column onto either axis, positioning points discretely. The visualization uses d3.scaleLinear and d3.scalePoint for scaling, with smooth transitions via d3.transition. Data is loaded using d3.csv, and the reusable chart pattern from Towards Reusable Charts enables dynamic updates through d3.selection.join.

Aug 12, 2021

Animated Reusable D3 Scatter Plot Black and White

This example displays the classic Iris dataset as an animated scatter plot, cycling through different x-axis variables every five seconds. The visualization builds a reusable D3 chart with a custom function that handles scales, axes, and circle elements. Circles enter with a growing radius transition and update their positions smoothly using `transition().duration(1000)` with staggered delays. The code uses `scaleLinear`, `axisLeft`, and `axisBottom` from D3 v6, rendering as SVG with black-and-white styling against a full-window canvas.

Aug 6, 2021

SVG Animation Playground

An SVG animation playground built with pure CSS and HTML, showcasing a Star Wars-inspired title sequence. Two images, "GETIT" and "RIGHT", animate with scaling, opacity shifts, and 3D depth effects using CSS keyframes and transforms. The text "IN BLACK AND WHITE" spins its letters individually with rotateY animations while moving in perspective space. The demo relies solely on CSS animations and inline SVG images, with a starfield background embedded via CSS, demonstrating how to create cinematic motion effects without JavaScript libraries.

Aug 5, 2021

MPG Scatter Plot with Menus

This interactive scatter plot visualizes the MPG dataset, allowing users to explore relationships between quantitative and categorical variables through dropdown menus that select the X and Y axes. Built with D3 v6, it uses a reusable chart pattern with `selection.join` for smooth enter, update, and exit transitions, animating circle positions and radii over 1000ms. The visualization leverages `scaleLinear` and `scalePoint` for axis scaling, with SVG rendering and custom menu components dispatching change events to update the plot dynamically.

Fork of SVG shapes and animation sandbox

A playful, abstract landscape built from layered SVG rectangles and moving cloud shapes, rendered in the browser. The sky is composed of stacked horizontal bands in various shades of blue, while larger and smaller cloud groups drift across the view using the SVG `<animateMotion>` element along specified motion paths. A pink flower is drawn with colored circles for petals around a central circle, connected by a green path stroke for the stem. The example uses raw SVG markup, inline CSS for full-page layout, and relies on native SVG animation APIs rather than JavaScript libraries.

Fork of SVG Playing Around and Studying

This example generates a full-screen SVG scene of a daytime landscape with a gradient sky, sun, land, birds, and a tree, all created programmatically using the DOM API `document.createElementNS` for the SVG namespace. The sky and sun use `linearGradient` and `radialGradient` elements with animated `stop` colors and offsets, cycling through a 24-second day-night color loop to simulate sunrise and sunset. Birds are constructed from SVG paths and positioned with CSS transforms, while the land and tree use predefined shape attributes. The animation relies on SVG `<animate>` elements and CSS keyframes to update colors and rotations continuously without any external charting library.

SFO NOAA Summary of the Month 1955-2020 Playground with Vega-Lite API

This interactive visualization plots monthly extreme minimum temperatures at San Francisco Airport from 1955 to 2020 as a scatterplot of circles, using color opacity to reveal density. It is built with the Vega-Lite API, registering Vega and Vega-Lite 4, and loads CSV data from the NOAA via d3.csv. The chart features a dark-themed config with larger fonts and tooltips, rendering SVG that fits the window dimensions.

US Map practice

This example shows a static map of US counties and state boundaries rendered in SVG, with each county path filled in grey and state interior borders drawn in a distinct teal color. The visualization uses D3 v5’s `geoPath` with a `geoIdentity` projection that applies `reflectY(true)` to flip the map vertically. React components load TopoJSON from the US Atlas package (`counties-albers-10m.json`), converting it to GeoJSON features via `feature` and `mesh` from TopoJSON, then fitting the projection to a 960×500 viewport with `fitExtent`. The map includes county polygons and state outline meshes, with styling defined in an external CSS file.

Jul 29, 2021

D3geo Playbox

This map of US counties visualizes county-level PM2.5 air quality data by year, with each county colored according to its pollution level and gray when no data is available. The visualization uses d3.geoPath and d3.geoIdentity for geographic projection, d3.scaleOrdinal with a color scale for data encoding, and TopoJSON from the US Atlas for county boundaries. React manages the component lifecycle, while the D3 data joins render SVG paths with tooltips showing county name, state, and measurement value. The underlying CSV data is loaded via d3.csv and filtered by year.

Jul 29, 2021

HIV/AIDS Choropleth Map

This choropleth map shows the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, using a yellow-to-red sequential color scale to indicate infection rates, with missing data rendered in light grey. The visualization loads country geometries from a TopoJSON world atlas and plots them as SVG paths via `d3.geoPath` with an Equal Earth projection. It joins country codes and HIV prevalence data from Our World in Data using React hooks, applying `d3.scaleSequential` and `interpolateYlOrRd` for color encoding.

Jul 27, 2021

Stylized Bar Chart

This stylized bar chart displays the population of the ten most populous countries for 2020, sourced from the UN Population dataset. The horizontal bars extend from zero based on a linear scale, with a custom formatter converting values (e.g., "1.4B"). Built with React and rendered as SVG, the visualization employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, drawing tick marks via `AxisBottom` and `AxisLeft`. Hovering over a bar reveals its exact population through a native `<title>` tooltip.

Jul 26, 2021

San Francisco County Map

This map shows the geographic boundaries of San Francisco County as an SVG-rendered chloropleth, with county shapes drawn from a TopoJSON source loaded via `d3.json`. The visualization uses `feature` from topojson to extract GeoJSON data and `d3.geoPath` with an `geoEqualEarth` projection to render each county outline as a path. The React-based component, `Marks.js`, maps over the GeoJSON features to generate the SVG paths, while the map initially displays a "Loading..." state until the asynchronous data fetch completes via `useEffect`.

Jul 25, 2021

Map Practice ArcGis import

This example embeds an interactive ArcGIS map of Clark County hospitals within an HTML page. It relies on an ArcGIS iframe, configured with a dark theme and specific map extent boundaries. The map displays hospital locations through ArcGIS’s built-in webmap service. While no custom JavaScript or React hooks are used in the shown code, the visualization leverages the ArcGIS API via its embedding URL, with scroll disabled and zoom enabled.

Jul 24, 2021

Map Practice HTML Starter

This example displays an interactive map centered on San Francisco using the ArcGIS API for JavaScript, with an “arcgis-light-gray” basemap loaded from ArcGIS services. The MapView is configured with a specific longitude, latitude, and zoom level to frame the initial view. The page relies on the ArcGIS `esri/Map` and `esri/views/MapView` modules, while a basic HTML structure and CSS ensure the map fills the viewport. A simple JavaScript console log statement demonstrates basic interactivity for developers.

Jul 24, 2021

Psuedo Spider Chart

A pseudo spider chart uses concentric circles and radial lines to organize seven labeled data points. The visualization renders as an SVG, with a central dot and nine concentric rings acting as value scales. Eight angled lines extend outward like a web, connecting to circular markers plotted across the grid. The chart displays numeric labels (5, 15, 25, 35, 45) alongside the center, while orange markers and a filled polygon emphasize the data pattern. The code uses plain SVG elements, including `circle`, `line`, `path`, and `text`, with no JavaScript libraries employed.

Jul 23, 2021

World Suicides Scatter Plot with Menus

This interactive scatter plot explores global suicide rates, allowing users to select which categorical or quantitative attributes to map to the x- and y-axes via dropdown menus. The visualization uses the D3.js v6 library, employing `selection.join` for smooth enter, update, and exit transitions when attributes change. Data is loaded as CSV from a GitHub gist and rendered into an SVG, with circles animated between positions over a one-second transition. The chart also dynamically switches between `scalePoint` for categorical data and `scaleLinear` for quantitative data, updating the corresponding axes.

Jul 2, 2021

Animated Scatter Plot with Menus

This example visualizes the Iris dataset as an animated scatter plot with interactive dropdown menus for selecting the x and y variables. The plot uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data coordinates, while `d3.transition` animates circle positions, radii, and axis updates over 1000 milliseconds. The menus are built with a reusable `menu` component that dispatches `change` events, and the chart itself follows a reusable `scatterPlot` pattern using `selection.join` for enter/update/exit handling. Data is loaded via `d3.csv` from a gist URL, rendered as SVG circles, and includes species labels among the selectable columns.

Jun 24, 2021

Animated Menus Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically change the x- and y-axis variables via two dropdown menus. The visualization shows the dataset's sepal and petal measurements across all species. Built with D3 v6, the chart uses SVG and animated transitions to reposition circles and axes smoothly when menu selections change. The code implements a reusable `scatterPlot` module with D3 scales, axes, and transitions, while a custom `menu` module handles the dropdown controls using D3's dispatch system.

Jun 24, 2021

JS playground

This example demonstrates a minimal JavaScript playground embedded directly in an HTML page, printing “Hello” combined with imported text to the browser console. It shows how D3 v6’s `select` and `scaleLinear` modules are imported, alongside custom local modules that export constants and default values. The page renders large static text (“JS in HTML”) and relies on separate `script.js` and `bundle.js` files, with the latter representing VizHub’s automatic bundling. The code highlights modular ES6 import/export syntax and debug output via `console.log`, with no interactive or data-driven visual elements.

Jun 4, 2021

Animated Vehicle Consumption Scatterplot

Animated Vehicle Consumption Scatterplot displays 2014 vehicle fuel consumption data from dipinpdinesh's GitHub repository, plotting CO2 emissions against MPG before cycling through engine size and cylinder count as the x-axis variable. The visualization uses D3.js v6 with SVG rendering and animated transitions to smoothly reposition circles between axis changes. It implements a reusable scatter plot pattern via selection.join, with a 1-second transition duration and staggered delays for circle updates, while axis labels and scales transition correspondingly.

May 29, 2021

Car Dimensions Simple

This scatterplot shows the relationship between car length and width, with each circle representing a model and colored by brand using a three-shade ordinal scale. The data is loaded from a CSV file via d3.csv and parsed into numeric values. The visualization uses d3.scaleLinear for both axes, d3.extent to set domains, and d3.axisLeft and d3.axisBottom to render tick marks. Each circle includes a tooltip title displaying the length, width, and brand. The SVG chart fills the browser window, with margins providing space for the axes.

May 29, 2021

Reusable D3 Scatter Plot Symbols B and W

This reusable D3 scatter plot displays the Iris Dataset, mapping petal length and sepal length to axes while encoding species with different symbol shapes via d3.symbol and scaleOrdinal. The plot uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and a join pattern in SVG. It is configured through a chainable scatterPlot function that accepts data, accessors, and margin settings, making it adaptable for other datasets.

May 27, 2021

D3 Scatterplot Black and White Template

This example renders the Iris dataset as a black-and-white SVG scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. It loads the CSV via `d3.csv`, parses numeric columns, and uses `scaleLinear` with `extent` for domains. Circles are drawn through `selectAll(...).join('circle')`, while `axisLeft` and `axisBottom` generate the axes. The visualization fills the full browser window, with margins and a fixed radius of 5 pixels for each point.

Golden Gate Transit Ridership B&W Scatterplot

This scatterplot visualizes Golden Gate Transit’s total monthly ridership from 2019 to 2020, highlighting the sharp decline caused by COVID-19. Each black circle represents a month, positioned by date and ridership count using d3.scaleTime and d3.scaleLinear, with axes rendered via d3.axisLeft and d3.axisBottom. The SVG is created with d3.select and sized to the full window. Data comes from a CSV file loaded asynchronously with d3.csv, and hover tooltips display exact ridership values via SVG title elements. The minimal black-and-white design emphasizes the trend without distraction.

Muni Average Daily Boardings B&W Scatterplot

A black-and-white scatterplot shows Muni’s average daily boardings from 2019 to 2020, revealing a drastic drop in ridership beginning in early 2020 due to COVID-19. Each circle encodes a date on a d3.scaleTime x-axis and boardings on a d3.scaleLinear y-axis, with tooltips showing the raw boarding value. The visualization is built with D3 v6, renders as SVG circles, and loads data from a CSV URL via d3.csv. Axes are generated using d3.axisLeft and d3.axisBottom.

VizHub Users Scatterplot B&W

This scatterplot displays the growth of VizHub’s user base over time, with each circle representing a recorded date and corresponding user count. The data originates from a CSV file containing dates and cumulative user totals. The visualization uses D3 v6’s `scaleLinear` for both axes, `extent` to set domains, and `axisBottom` and `axisLeft` for ticks. Circles are rendered via SVG, and the chart fills the browser window with fixed margins, using a black-and-white design for clarity.

D3 Scatterplot Black and White Basic

This example visualizes the Iris dataset as a black-and-white scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. The code uses D3 version 6 APIs including `csv` for data loading, `scaleLinear` and `extent` for scaling, and `select` for DOM manipulation. It renders points as SVG circles with a radius of 5 pixels, sized to fill the browser window. The plot’s minimal styling relies on default black circles against a white background.

May 4, 2021

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including overlapping circles, a line, and two path elements, all rendered directly in an SVG canvas. The code uses native SVG elements such as `circle`, `line`, and `path` with attributes like `fill`, `stroke`, `stroke-width`, and the `d` command for path data. A rectangle is present but commented out. The illustration showcases how basic geometric primitives and path coordinates compose a static vector graphic, with no interactive or data-driven behavior included.

Apr 30, 2021

JS in HTML

This example demonstrates a minimal, text-only visualization where the word "JS in HTML" is rendered at an extremely large font size (13em) and centered on the page. The visualization shows how D3 v6 can be imported and used alongside other JavaScript modules within a simple HTML document, with the code logging output to the browser's developer console. It uses D3's `d3.scaleLinear` and a named `select` import from the `d3` module, alongside custom modules (`something.js`, `thing.js`) that export strings. The page loads D3 from a CDN and executes both a main `script.js` and an automatically inserted `bundle.js`.

Apr 29, 2021

D3 Selection Exploration

Fifteen circles animate vertically in a sine wave across the screen, their positions updating every frame in a loop. Using D3 v6, the code demonstrates the `.join()` method to bind new data arrays to existing SVG circle elements, updating their `cx` and `cy` attributes. The animation runs via `setInterval`, and the source includes commented-out alternative approaches using `.enter()`, `.merge()`, and `.exit()` for comparison.

Apr 28, 2021

JavaScript Arrays

This example demonstrates the fundamental array methods in JavaScript, including `range`, `filter`, `map`, `sort`, `forEach`, and `reduce`. The code uses D3 v6’s `ascending` and `decending` imports to properly sort arrays, while also showcasing custom comparator functions. It works with a simple generated range of numbers and a small dataset of key-value entries, logging results to the console. The page renders only the static title “JavaScript Arrays” with no visual output, focusing entirely on algorithmic array manipulation.

Apr 27, 2021

HTML Starter

This starter page renders the text “Hello HTML” centered on a white background. It demonstrates the basic structure for a web-based visualization, using plain HTML for content and a CSS `style` block for layout. The embedded JavaScript script executes a single command, `console.log`, sending the message 'Hello JavaScript!' to the browser’s developer console. The example serves as the simplest possible foundation for building more complex, interactive data visualizations.

Apr 27, 2021

Final Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js to generate layered striped patterns across the full browser window. It shows how SVG masks with geometric symbols create intersecting horizontal and vertical line grids with dynamic cutout effects. The code uses D3’s `select`, `range`, and `symbol` APIs to render 100 rectangles per axis, applying two masks with inverted fills to produce the final composition. The visualization highlights algorithmic art generation through SVG rendering and mask manipulation.

Apr 26, 2021

Full Sol LeWitt Reproduction with D3 Draft

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of thin, alternating horizontal and vertical strokes that cover the full canvas. The piece generates its geometric pattern by drawing 100 horizontal and 100 vertical lines, each masked with an inverted circular symbol from D3’s `symbols[1]` (a circle) to create a subtle ring-like fade at the center. The code relies on `d3.select`, `d3.range`, and D3’s `.join` API for efficient SVG element creation, applying masks via `svg.call` with a custom `renderMask` function. The rendering is entirely SVG-based, with the final output sized to the browser window.

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

V1 Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. The code creates 100 rect elements in each orientation, positioned every 20 pixels, and applies two SVG masks to reveal the pattern only within a central circular area. The first mask uses a black background with a white circle, while the second inverts this with a white background and black circle, producing a complementary visual effect. The visualization uses d3-selection and d3-range to efficiently create and join the SVG elements.

Sol LeWitt Reproduction Final

This example reproduces a Sol LeWitt wall drawing using pure JavaScript and SVG APIs. It shows a grid of horizontal and vertical striped rectangles overlaid with two circular masks, creating a composition of intersecting lines that fade into a central circle. The code builds SVG elements dynamically via `document.createElementNS`, applying a black-to-white mask and an inverted white-to-black mask to reveal alternating line directions. One hundred horizontal strips and one hundred vertical strips are generated in loops, with the masks controlling visibility to form the final geometric pattern.

Sol LeWitt Reproduction Mask Inverse

This example reproduces a Sol LeWitt art piece using an SVG mask to create an inverse circle effect. Horizontal black stripes are partially revealed through a circular mask centered on the canvas, while vertical stripes overlay the full height. The code constructs the SVG dynamically with JavaScript, creating 100 horizontal rectangles masked by a white circle on a black background, plus 100 unmasked vertical rectangles. It uses raw SVG APIs including `createElementNS`, `mask`, and `rect` elements, with no external libraries.

Sol LeWitt Reproduction Mask

This visualization reproduces a Sol LeWitt art piece using a simple SVG mask to create a circular viewing window. It shows a series of horizontal black-and-white striped bars filling the entire screen, stopped by a central circular hole that reveals the full rectangle. The code builds an SVG via DOM manipulation, defines a mask containing a white rectangle and black circle, then appends 100 thin rect elements with the mask applied to create the striped pattern. The rendering relies on core SVG APIs and no external libraries.

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, displaying a grid of narrow horizontal rectangles that become visible only within a central circular mask. The code creates an SVG canvas via `document.createElementNS`, defines a mask with a single circle, and generates 100 stacked `<rect>` elements, each 10 pixels tall, that intersect the mask to form the final composition. The result is a precise, minimal geometric pattern whose vertical bands are revealed through the circular aperture, mimicking the clean, systematic aesthetic of LeWitt's wall drawings without any external libraries.

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using only SVG rendering. It draws 100 vertical rectangles, each 10 pixels wide, positioned at 20-pixel intervals across the full height of the browser window. The rectangles fill the viewport edge to edge, creating a rhythmic, striped pattern. The code creates the SVG element dynamically via `document.createElementNS` and appends each rectangle to it, with the window dimensions determining the overall canvas size.

Psuedo Scatter Pot

This example shows a sparse collection of eight large, identical gray circles scattered across a white 960-by-500 SVG canvas, arranged to mimic the look of a scatter plot without any underlying data or axes. The visualization is built directly in HTML with inline SVG markup, using basic `<circle>` elements with explicit `cx` and `cy` coordinates and a fixed radius of 34.5. It relies solely on static SVG rendering, not on any JavaScript libraries like D3, and the title suggests a playful commentary on pseudo-visualizations. The white background is drawn with a full-canvas `<rect>`, and each circle is placed without labels or gridlines.

Psuedo Bar Chart 2

This visualization presents four white rectangles of varying widths positioned against a white background, creating the illusion of a bar chart without any data axes or labels. The single SVG element contains four static `<rect>` elements at different x and y coordinates, with widths of 900, 450, 675, and 225 pixels. The code uses raw SVG markup directly in the HTML, with no JavaScript libraries or data binding, resulting in a purely declarative chart-like arrangement that mimics bars but lacks any meaningful quantitative encoding.

Psuedo Bar Chart

This example visualizes four evenly spaced bars of varying heights as a playful take on a standard bar chart, set against a white SVG canvas. The chart uses only raw SVG elements—a single `<path>` for the background and four `<rect>` elements with hardcoded x, y, width, and height values—to create the pseudo-bars. No JavaScript libraries or data binding are present; the rendering is purely static SVG markup. The design deliberately misaligns the bars’ vertical positions to suggest a skewed or alternative ordering, emphasizing form over data accuracy.

Psuedo Horizontal Bar Chart

A pseudo horizontal bar chart uses a minimalist SVG layout to visualize data as four outlined rectangles of varying heights and widths, arranged along a horizontal axis. Each `<rect>` element is placed at different x and y coordinates, with the tallest bar at the left and progressively shorter bars to the right. The chart is rendered directly via SVG markup inside an `index.html` file, with a white background and no axis labels or tick marks. This example demonstrates how raw SVG primitives can create a simple, abstract bar-like comparison without relying on a charting library.

Missing Migrants on a Map with Fast Brushing Bars (V1)

A world map uses semi-transparent circles to show the geographic distribution of missing migrants, with circle size encoding the total number dead or missing per location. A brushed time-series histogram below the map filters the displayed circles to a selected date range, updating the map dynamically. The visualization is built with React and D3 v5, using `geoNaturalEarth1` and `geoPath` for the map projection, `scaleSqrt` for circle sizing, and `brushX` for the interactive time filter. Data comes from a CSV of migrant incidents sourced from Simplemaps.

Mar 10, 2021

HistogramPractice Corpus Christi & SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot displays daily climate measurements from Corpus Christi and San Francisco International Airport stations between 2015 and 2020, sourced from NOAA. A dropdown menu lets users switch between five wind-related y-axis attributes, while each point represents a daily observation colored by station. A brushable time-series histogram at the bottom filters the main scatterplot by date range, and hovering over the color legend highlights points from a selected station with reduced opacity. The visualization uses React with D3 v6 scales, axes, brushing, and ordinal color mapping rendered as SVG circles.

Mar 10, 2021

Map Projection

This example displays a world map using an equal-earth projection, rendered as SVG paths. The visualization shows landmasses in teal, country interiors as lighter strokes, graticules as gray lines, and the surrounding sphere in light gray. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json`, converts it using `topojson.feature` and `topojson.mesh`, and draws the map with `d3.geoPath` and `d3.geoEqualEarth`. The React component manages asynchronous data loading with `useData`.

Mar 4, 2021

Texas NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays Texas NOAA monthly climate summaries from 1946–2020, letting users switch which weather attribute is mapped to the y-axis via a dropdown menu. A color legend for weather stations highlights and fades data points on hover. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and SVG circles for rendering, pulling CSV data from a GitHub gist.

Mar 4, 2021

Coronavirus with Labels

This line chart shows cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis to accommodate the wide range of values. A Voronoi overlay, built with `d3.Delaunay`, enables mouse interaction, highlighting the nearest data point and displaying a tooltip with the country name, death count, and date. The chart uses `scaleTime` and `scaleLog` from d3.v6 within a React framework, rendering as SVG. Data comes from the CSSEGISandData COVID-19 GitHub repository.

Jan 28, 2021

Organization Graph Diagram

A network graph shows the relationships between arts organizations and their affiliated programs. Four main nodes, each with a distinct color, connect to smaller child nodes representing partner groups, with leaf nodes indicating sub-projects. Three.js renders the SVG visualization, while D3's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` compute the layout. Links are drawn as lines with colors matching their source, and nodes are draggable through D3's `drag` behavior. The data, including node sizes, colors, and link distances, is predefined in external JavaScript modules.

Jan 19, 2021

Force Directed Graph Starter

This example demonstrates a basic force-directed network graph with three connected nodes arranged through physical simulation. A D3 force simulation (`d3.forceSimulation`) combines charge, link, and centering forces to position the nodes, while SVG circles and lines represent the data. The code uses d3 v6 with explicit imports for `select`, `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter`, rendering circles for nodes and black lines for edges in an SVG container. The simulation updates node and link positions on each tick event, showing a minimal starter template for network visualizations.

Jan 18, 2021

Coronavirus Multiple Lines with Voronoi Overlay

The chart displays global cumulative COVID-19 death totals over time, with each country represented as a separate line on a log-scaled y-axis and a time-scaled x-axis. It uses D3.js v6 within a React component, constructing SVG paths via `d3.line` and rendering axes through `d3.axisBottom` and `d3.axisLeft`. A Voronoi overlay, built with `d3.Delaunay`, enables hover interactions: moving the mouse over a cell highlights the corresponding country's line in black, making it easy to identify individual series in dense clusters. Data comes from the CSSE at Johns Hopkins.

Jan 16, 2021

Coronavirus Multiple Lines

A log-scale multi-line chart tracks cumulative COVID-19 deaths over time for each country, using color-coded paths to compare global mortality trends. The visualization loads data from a CSSEGISandData GitHub CSV, transforms it with d3.csv and timeParse, and renders SVG paths via d3.line and d3.scaleLog. React manages the component state, while d3.axisBottom and axisLeft generate labeled gridlines. Random RGB stroke colors distinguish countries, with a title and axis labels annotating the chart.

Jan 4, 2021

Coronavirus Visualization Labels

This visualization displays the global cumulative death toll from COVID-19 over time, using a logarithmic y-axis to accommodate the exponential growth pattern. The SVG line chart plots daily totals sourced from the Johns Hopkins CSSE COVID-19 dataset, with React managing component state and D3 v6 handling scales, axes, and the line generator. A vertical marker line labels the current date, while a horizontal reference line highlights the one-million-deaths threshold, with both annotations rendered as custom React components.

Dec 31, 2020

Coronavirus Log Y Axis

This visualization displays the global cumulative COVID-19 death toll over time using a logarithmic Y-axis scale, making exponential growth trends visible as straight lines. The React component uses D3 v6 functions like `scaleTime`, `scaleLog`, and `line` to generate an SVG path from CSSE COVID-19 time series data, with custom axis components rendering grid lines and tick labels. A black marker line indicates the current date, while a second marker highlights the one-million death threshold on the logarithmic scale.

Coronavirus Linear Y Axis

A single red line traces the cumulative global death toll from COVID-19 over time on a linear y-axis, with a marker line and label indicating the one-million death milestone and a vertical “now” marker at the latest date. Built with React and D3 v6, the chart uses `scaleTime` and `scaleLinear` for axes, `line` for the path generator, and `axisBottom`/`axisLeft` for tick rendering. Data comes from a global time-series CSV of deaths provided by the CSSEGISandData repository, summed across countries per day.

Coronavirus 1,000,000 line React + D3 Axis

This chart tracks cumulative COVID-19 deaths worldwide over time, using a single bold red line to show the total rising toward one million. The visualization combines React components with D3 scales and axes, including a horizontal marker line at the 1,000,000-death threshold and a vertical “now” marker at the most recent date. Data comes from the Johns Hopkins CSSE time-series CSV, transformed by d3.csv and d3.timeParse, while d3.axisBottom renders the time axis with grid lines.

MM on a Map Multiple Views with Brushing V2.1

The visualization shows global missing migrant incidents on an equal Earth projection map, with bubble size representing deaths and missing persons. A brushed date histogram below the map filters the displayed bubbles by reported date range. The React application uses D3 v5 modules including `geoPath`, `geoEqualEarth`, `geoGraticule`, `brushX`, and `scaleSqrt` for proportional sizing. World boundaries come from TopoJSON data, while migrant statistics load from a CSV file. SVG rendering displays the geographic features and interactive histogram, supporting linked-view brushing between the temporal and spatial components.

Summarizing Coronavirus Data

This example displays a single, large numeric summary of global COVID-19 deaths, updating in real time from the Johns Hopkins time-series dataset. It shows the total death count and the most recent date column, formatted with commas. The code uses d3.csv to load the data, then applies the array map and reduce methods to sum the latest column’s values, and d3.format to create the comma separator. The result is inserted into a pre element via the DOM’s textContent property.

Coronavirus Basic Line Chart with 1,000,000 line

This example displays cumulative global COVID-19 death totals as a simple black line chart, with a horizontal marker indicating the one-million-death threshold. The React component uses d3.scaleTime and d3.scaleLinear to map dates and counts, while d3.line generates the SVG path from the Johns Hopkins CSSE time-series dataset. A static `<line>` element highlights the million-death milestone.

Dec 16, 2020

Coronavirus Basic Line Chart with 1,000,000 line Margin Convention

This example shows the global cumulative death toll from COVID-19 over time, plotted as a basic line chart with two prominent marker lines. A horizontal line at the 1,000,000 death mark and a vertical line at the most recent date provide reference points against the black trend line. The chart uses React and D3 v6, leveraging `scaleTime` and `scaleLinear` for axes, `line()` for the path generator, and data from the CSSEGISandData COVID-19 GitHub repository. The visualization is rendered as an SVG, filling the entire browser window.

Dec 16, 2020

Cost of Excessive Alcohol Consumption by State

A choropleth on a Natural Earth projection shows the cost of excessive alcohol consumption per capita by U.S. state, with circles sized by state population. The visualization uses React to render an SVG, importing `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule` for the map and graticule, while `d3.scaleSqrt` maps population to circle radius. State boundaries come from TopoJSON’s `states-10m.json`, and cost data is loaded via `d3.csv` from a GitHub gist. Land and sphere fills are styled in CSS, with semitransparent teal circles overlaid on the map.

Dec 16, 2020

Missing Migrants Scatter Log Scale

This example visualizes the "Total Dead and Missing" counts from the Data Canvas Sense Your City dataset over time, using a scatter plot with a logarithmic y-axis to accommodate the wide range of values. The chart is rendered as an SVG using React, with D3’s `scaleTime` and `scaleLog` for axes and `csv` for data loading. Each data point is a circle with a tooltip showing the reported date, generated by the `Marks` component. The axes are drawn using custom `AxisBottom` and `AxisLeft` components.

Dec 11, 2020

Missing Migrants Scatter

This scatter plot charts the reported dates of migrant incidents against the total number of dead and missing, revealing temporal patterns in the data. Using D3’s `scaleTime` and `scaleLinear` for axes and `React` components for rendering, each circle represents an incident with a native SVG `<title>` tooltip. The visualization loads CSV data from a GitHub gist via `d3.csv`, with React state management handling asynchronous data retrieval and rendering a loading message until the dataset arrives.

Dec 11, 2020

Missing Migrants Line Chart

This example visualizes monthly totals of dead and missing migrants using a bar chart built with React and D3 v5, drawing from the Missing Migrants dataset. The x-axis maps reported dates using `scaleTime`, while the y-axis uses `scaleLinear` to show aggregated counts computed with `d3.bin` and `sum`. SVG rendering displays orange bars with axis labels, and native `<title>` tooltips provide values on hover. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

Dec 11, 2020

Points on a Map

This visualization displays world cities with populations exceeding 50,000 as semi-transparent dots on an equal-earth projection map. The map shows landmasses, graticules, and country interiors using the `d3.geoPath` and `d3.geoEqualEarth` projections, while city points are positioned via the same projection and scaled using `d3.scaleSqrt`. Built with React and D3 v5, it loads GeoJSON world data from the `world-atlas` package and city coordinates from a CSV, rendering everything as SVG circles with opacity for overlapping points.

Dec 10, 2020

Cost of Excessive Alcohol Consumption By State

This interactive scatterplot visualizes the cost of excessive alcohol consumption across U.S. states, sourced from NOAA data. Users can switch between three y-axis metrics—Cost Per Capita, Cost Per Drink, and Total Cost—via a dropdown menu built with React and the react-dropdown library. Each state is rendered as an SVG circle using D3 v6 scales and axes. Hovering over the legend highlights corresponding data points by adjusting circle opacity.

Dec 10, 2020

Barchart

An interactive stacked and grouped barchart displays multiple data series generated by the `bumps()` function in `testdata.js`. The chart’s primary view is a stacked barchart, with a radio-button form allowing the user to toggle the layout to a grouped barchart, triggering an animated transition. The visualization uses D3 v6 scales, including `scaleBand` and `scaleOrdinal`, and a `d3.stack` operation to compute the stacked series. An SVG tooltip, populated with a legend of series values, appears on mouseover events.

Playground 2020 presidential election margins (preliminary results)

This visualization shows the 2020 presidential election margins for each state, using donut-like rings to represent the disparity between winning and losing party votes. The inner radius of each ring indicates the losing party’s vote count, while the outer radius shows the winning party’s margin, highlighting the “excess” votes that don’t affect the Electoral College outcome. Built with d3.v5 and rendered as SVG, it uses d3.geoPath for the U.S. map and d3.scaleSqrt for circle sizing, with data scraped from The New York Times election API.

2016 US Vote Totals

A scatterplot displays total votes per U.S. state in the 2016 election, with each state represented by a circle positioned by its vote count on the y-axis and state name on the x-axis. The visualization uses React to render SVG elements, with D3 v6 scales and axes handling the layout. Data comes from a CSV file of county-level election results aggregated by state. The chart employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and a `d3.scaleOrdinal` color scale, though the fill is currently disabled.

MM on a Map Multiple Views with Brushing V2 (Slow)

This visualization presents missing migrant incidents on a world map using scaled bubble markers, with a linked date histogram below for temporal brushing. Selecting a date range filters the map markers accordingly. The example uses React for component structure, while d3.geoEqualEarth and d3.geoPath render the geographic basemap from TopoJSON world-atlas data, with d3.bin and d3.brushX handling the histogram aggregation and brushing interaction.

MM on a Map Multiple Views with Brushing V2.3 (Curran'sFastBrush)

This interactive visualization presents global missing migrant incidents on a natural Earth projection map, with a linked time-series histogram showing monthly death tolls. Users brush across the histogram’s time axis to filter which incident circles appear on the map, with circle sizes scaled by death counts via `scaleSqrt`. The React app uses D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map rendering, `brushX` for selection, and `topojson` for world atlas features. Incident data comes from a CSV of Missing Migrants reports with geographic coordinates parsed into `[longitude, latitude]` pairs.

Missing Migrants on a Map Multiple Views

This interactive visualization pairs a geographic bubble map with a time-series histogram to explore global missing migrant incidents. The map uses `d3.geoEqualEarth` projection and `d3.geoPath` to render landmasses and graticules, with circle radii scaled by `d3.scaleSqrt` based on total dead and missing. Below, a `DateHistogram` bins records monthly via `d3.bin` and `d3.timeMonths`, summing fatalities. Data comes from a CSV of the Missing Migrants Project, rendered with React 16 and D3 v5. The combined SVG view offers spatial and temporal context for the same dataset.

Nov 10, 2020

Corpus Christi and SFO Coordinate Plots

This interactive parallel coordinates plot compares daily climate measurements from two California locations, Corpus Christi and SFO, across multiple dimensions. The visualization uses D3.js v3 to render each monitoring station as an SVG path, colored by its variety label. Users can drag dimension axes horizontally to reorder them, with grey background lines providing context. The code employs d3.scale.ordinal for axis positioning, d3.svg.axis for labeled ticks, and d3.behavior.drag to enable smooth axis repositioning.

Nov 10, 2020

Gunz N' Roses Moving Points Template

This interactive scatterplot template visualizes time-series data for three categories—gunz, roses, and chocolate—as colored points moving across a date-based x-axis. Users can click legend items to filter categories, which dims unrelated points and lines while enabling drag-and-drop repositioning of individual data points. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, `d3.drag`, and `d3.axisLeft` to render the SVG animation, with dynamic y-axis rescaling based on data bounds and hover effects that highlight values.

Nov 10, 2020

Refactored Bar Chart

This Refactored Bar Chart displays the top ten countries by population in 2020 using a horizontal bar layout. A React component loads CSV data from a GitHub-hosted UN population dataset, then renders an SVG with d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and separate AxisLeft, AxisBottom, and Marks components for modular chart construction. Each bar’s length encodes population values, with axis ticks and labels generated programmatically from the scales.

Nov 9, 2020

Missing Migrants on a Map

A world map displays missing migrant incidents as semi-transparent circles, sized by the total number of dead and missing people reported at each location. The map uses an equal Earth projection with graticules and country borders, rendered as SVG paths via `d3.geoPath` and topojson features. Circle radii are scaled with `d3.scaleSqrt` based on data from a CSV file, and the visualization is built with React, D3 v5, and the `useWorldAtlas` and `useData` hooks.

Nov 6, 2020

SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot visualizes daily climate measurements at San Francisco International Airport from 2015 to 2020. A dropdown menu lets users switch which weather attribute—such as wind speed, humidity, or temperature deviation—is plotted on the y-axis against time. A color legend identifies data points by station, with hover states that fade non-matching points for comparison. Built with React and D3 v6, the SVG visualization uses `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` for station colors, and fetches its CSV data from a remote gist via a custom `useData` hook.

Nov 5, 2020

Corpus Christi & SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot lets users explore daily climate data from two NOAA stations, Corpus Christi and San Francisco, between 2015 and 2020. A dropdown menu switches between five wind-related variables plotted on the y-axis. Points are colored by station using a D3 ordinal scale, and hovering over the legend highlights that station's points while fading the others. Built with React and D3 v6, the visualization renders as SVG with axes generated by `AxisBottom` and `AxisLeft`.

Nov 5, 2020

SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus

A scatterplot displays monthly NOAA climate summaries for SFO and Oceanside from 1946 to 2020, with a dropdown menu to switch between four temperature-related y-axis attributes. React manages the UI state, while D3 v6 handles the scales, axes, and SVG circle rendering, with each point tooltipped by its value. The data loads from a CSV hosted on GitHub, and the axis labels update dynamically based on the user’s selection.

Nov 5, 2020

SFO Peak Wind History 2015-2020

This chart plots daily peak wind speed at San Francisco International Airport from 2015 to 2020 as a scatterplot, with each circle representing a day’s measurement. The x-axis shows time while the y-axis displays wind speed, and hovering reveals the exact value via SVG `<title>` tooltips. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and reusable axis components to render the visualization in SVG. Data comes from NOAA daily climate records.

Nov 3, 2020

Scatter Plot, Color & Interactive Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species. An interactive legend allows users to hover over species names, highlighting only the corresponding data points and fading the others. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Point tooltips display the precise petal length value using d3.format.

Oct 28, 2020

Scatter Plot, Slightly Stylized with Color & Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris flowers. Each data point is rendered as a colored circle in an SVG, with colors assigned by species using a d3.scaleOrdinal color scale. The chart includes custom React components for axes, marks, and a color legend, with d3.linear scales mapping data to pixel coordinates. A tooltip appears on hover, displaying the petal length value.

Oct 8, 2020

Scatter Plot, slightly stylized with color

This visualization presents a scatter plot of the Iris Dataset, mapping petal length against sepal width. Each circle represents a flower, with its color encoding the species using a scaleOrdinal range of three distinct hues. The chart includes labeled axes and grid lines, with a tooltip displaying the petal length value on hover. Built with React and rendered as SVG, the plot leverages D3 v6 functions like `scaleLinear` and `extent` for scaling, while the custom `Marks` component creates the circles. The design is slightly stylized with a Poppins font, muted tick colors, and a circular radius of 7 pixels.

Oct 7, 2020

Polished Scatter Plot with Menus!!

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which attribute is mapped to the x-axis and y-axis. Built with React and D3.js (v6), it uses `scaleLinear` for axes, SVG circles as marks, and native tooltips for data values. The visualization updates state through React hooks, while `AxisBottom` and `AxisLeft` components render tick marks and labels using D3 scales.

Oct 2, 2020

NOAA Summary of the Month with Vega-Lite API: Oceanside and SFO

This visualization plots NOAA monthly summary data for Oceanside and SFO as a scatterplot of average temperature over time, with points colored by temperature value and a tooltip showing the exact reading. The chart loads CSV data via d3.csv and renders with the Vega-Lite API, using vl.markCircle, vl.encode, and field mappings for the x-axis, y-axis, and color scale. Appearance is customized through a config object that adjusts axis ticks and label fonts for readability.

Sep 26, 2020

Line Chart With Multiple Lines

This example displays a line chart tracking temperature over time across multiple worldwide cities, using data from Curran’s senseYourCity dataset. Multiple colored lines show each city’s temperature trend, with a time-scaled x-axis and linear temperature y-axis. The visualization uses React with d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveNatural to generate smooth SVG paths, alongside custom AxisBottom and AxisLeft components for ticks and labels.

Sep 25, 2020

SFO NOAA Summary of the Month 1955-2020 with Menus

This interactive scatterplot visualizes monthly NOAA climate summaries for San Francisco from 1955 to 2020. A dropdown menu allows users to switch the y-axis between five meteorological attributes, including average wind speed and temperature extremes. The React-based application uses d3.scaleTime and d3.scaleLinear to map the CSV data, rendering each month as a semi-transparent SVG circle. Datasets are loaded asynchronously via d3.csv, with axes and ticks generated by custom React components.

Sep 25, 2020

Some energy consumption data by type from the eia

This interactive scatter plot displays energy consumption data across U.S. states and regions, with a dropdown menu to switch between different fuel types and years from the EIA dataset. The visualization renders SVG circles whose vertical position reflects the selected consumption value while the horizontal axis shows the state or region. React handles the component state and dropdown interactions, while d3.v6 provides the scale functions (`scaleTime`, `scaleLinear`) and axis components. The underlying CSV data is loaded asynchronously via d3.csv, and each circle includes a native SVG `<title>` element for hover tooltips.

Scatter Plot with Menus!!

This interactive scatter plot displays the Iris Dataset, allowing users to select which sepal and petal measurements appear on the x and y axes via two dropdown menus. The visualization is built with React and D3 v6, rendering the points as SVG circles with tooltips. Axes are constructed using D3’s linear scale and tick generation, with labels derived from the selected attributes. The code initializes with petal length on the x-axis and sepal width on the y-axis, and the dataset is loaded from a CSV file using D3’s csv function.

SFO NOAA Summary of the Month 1955-2020

This scatterplot displays the average monthly temperature at San Francisco Airport from 1955 to 2020, with each point representing a single month's reading. The chart uses a time-scaled x-axis for dates and a linear y-axis for temperatures, with circles colored in teal. Built with React and D3 v6, it renders SVG elements, including axes and circle marks, while loading CSV data from a NOAA gist. The code employs D3's `scaleTime`, `scaleLinear`, `extent`, and `csv` functions to process and map the data.

SFO Daily Departure From Normal Average Temperature 2015-2020

The chart displays daily temperature departure from the normal average at San Francisco Airport (SFO) from 2015 to 2020, with each point representing one day’s deviation. The visualization uses a React and D3 v6 setup, rendering an SVG scatterplot with d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis. Data is loaded via d3.csv from NOAA’s public dataset, and each circle includes a native SVG `<title>` element for basic tooltip functionality. The axes are constructed using custom React components that map D3 scales to SVG elements.

Menus with React

This example demonstrates how to build an interactive dropdown menu using React. It shows a labeled select element with options for choosing a pet, and logs the selected value to the console. The code defines a reusable `Dropdown` React component that manages its state via the `useState` hook and renders an HTML `<select>` element with `<option>` children. The main `App` component initializes with the value “hamster” and updates the selection through the `onSelectedValueChange` handler. The project uses React 16.13.1 and ReactDOM for rendering.

Sep 23, 2020

React Starter

A minimal React starter template renders the text “Hello React” inside a root div. The example demonstrates the basic setup for integrating React with a visualization gallery, using React 16.13.1 and ReactDOM to mount the app. It does not include any data visualization or charting logic, serving purely as a scaffold. The HTML loads React and ReactDOM from a CDN, and the JavaScript defines a functional component that is rendered into the page.

Sep 23, 2020

Stylized Line Chart

A stylized line chart displays a week of temperature in San Francisco, using a smooth, curved path with a thick teal stroke and minimal labeled axes. The chart is built with React and D3 v6, using `scaleTime` and `scaleLinear` for scales, `d3.line()` with `curveNatural` to generate the path, and custom `AxisBottom` and `AxisLeft` components for ticks. Data is loaded via `d3.csv` from a remote gist, rendered as SVG, and styled with the Poppins font.

Sep 21, 2020

World Map II

This example renders an equal-Earth projection world map using React and D3 v5. The visualization displays landmasses in teal, country borders as thin strokes, graticules, and a light gray sphere background. It loads GeoJSON data from the world-atlas TopoJSON source, converting it with `topojson.feature` and `topojson.mesh`. The SVG paths are generated with `d3.geoPath` and `d3.geoEqualEarth`, while `geoGraticule` creates the grid overlay.

Sep 21, 2020

SFO Peak Wind Speed 2015-2020 with Vega-Lite API

This visualization displays daily peak wind speeds at San Francisco International Airport from 2015 to 2020 as a scatterplot, with each semi-transparent circle representing a day’s measurement. The data is loaded from a NOAA CSV via d3.csv, while the chart itself is built declaratively using the Vega-Lite API, registering Vega and Vega-Lite for rendering. Custom axis and label styling in config.js improves readability, and the plot is rendered as a full-window SVG with tooltips provided by vega-tooltip.

Sep 19, 2020

SFO NOAA Summary of the Month: Average Temperature 1955-2020 with Vega-Lite API

This visualization plots monthly average temperatures recorded at San Francisco International Airport (SFO) from 1955 to 2020. Each semi-transparent circle represents a single month’s average temperature on a time-series axis, with a tooltip showing the exact value. The chart uses the Vega-Lite API and its `markCircle` encoding, with `vl.x().fieldT` for the date and `vl.y().fieldQ` for the temperature. Data is loaded via D3’s `csv` function from a NOAA-hosted GitHub gist, and the rendering is handled by Vega-Lite with custom axis styling from a config file.

Sep 19, 2020

SFO NOAA Summary of the Month 1955-2020 with Vega-Lite API Template

This example visualizes the average monthly temperature at San Francisco’s SFO airport from 1955 to 2020, with each point representing a month. The visualization uses the Vega-Lite API to encode the date on the x-axis and the average temperature on the y-axis, with tooltips displaying the temperature values. Data is loaded from a CSV file via d3.csv, and the chart is rendered with Vega-Lite and displayed using the Vega renderer, with a custom dark theme configuration for improved readability.

Sep 18, 2020

My Second interaction with Vega-Lite API

This visualization displays a line chart of weekly temperature data in San Francisco, plotted across time with tooltips revealing exact temperature values on hover. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip, using d3.csv to load the dataset from a GitHub gist. The chart dynamically fills the browser window via autosize and applies a custom dark color config for improved readability.

Sep 17, 2020

Axes with React & D3

This example demonstrates how to combine React with D3 to render a horizontal bar chart of UN population data for ten countries in 2020. The code uses React hooks like `useState` and `useEffect` to load and manage the CSV data, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data parsing and scaling. Axes are drawn manually as SVG elements, with x-axis ticks generated via `xScale.ticks()`, and the chart updates reactively as data loads.

Sep 11, 2020

The Margin Convention

A bar chart displays the ten most populous countries in 2020 using UN population data loaded via `d3.csv`. React renders an SVG with `rect` elements sized by `d3.scaleLinear` and positioned with `d3.scaleBand`. The chart uses the margin convention to offset the visualization within the SVG. The page also imports a utility function that summarizes dataset size, though it is not currently displayed.

Sep 11, 2020

Rendering Bar Chart with React & D3

This example demonstrates a horizontal bar chart of the top ten most populous countries in 2020, using United Nations population data loaded via `d3.csv`. React manages the component state and renders SVG `<rect>` elements, while D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions and widths. The chart updates asynchronously after the CSV fetch completes, showing a loading message until data arrives.

Sep 11, 2020

Rendering Data with React & D3

This example renders a radial burst of CSS named colors, loading the data from a CSV file via `d3.csv` and displaying it as an SVG pie chart. Using React's `useState` and `useEffect` hooks, the application fetches the color dataset and maps each row to a pie slice with `d3.pie` and `d3.arc`. Each slice's fill is set to the color's RGB hex value from the data, and the chart is centered within a 960x500 SVG canvas. The visualization combines React's declarative component structure with D3's data processing and arc generation utilities.

Sep 10, 2020

Loading Data With React and D3

This example demonstrates how React and D3 can work together to load and summarize a dataset of CSS named colors from a GitHub gist. The app uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, while D3’s `csv` function fetches and parses the remote CSV file. Once the data arrives, the interface displays a concise summary—file size in kilobytes, row count, and column count—computed with `d3.csvFormat` and `data.columns.length`. The visualization is minimal, rendering the numeric summary as large, oversized text rather than a chart.

Sep 10, 2020

My First interaction with Vega-Lite API

This visualization displays automobile data using Vega-Lite’s API, plotting the origin of each car against its horsepower as semi-transparent circles. The marks are heavily overlaid to reveal density patterns across the three origin regions. The example demonstrates how to construct a chart programmatically using the `vega-lite-api` library, which imports data from a CSV via d3’s `csv` method and renders through vega and vega-lite. Tooltips are enabled through the vega-tooltip handler, and the chart’s size adapts to the window dimensions with custom styling from a separate config file.

Sep 5, 2020

Loading and Parsing CSV Data

This example demonstrates how to load a CSV file over HTTP using D3’s `d3.csv` function. The visualization displays basic statistics from the parsed data—file size in kilobytes, row count, and column count—in a very large `<pre>` element. The CSV data comes from a GitHub gist containing named CSS colors. The code also includes commented-out alternatives using `fetch` with `async`/`await` and the lower-level `d3.csvParse`, highlighting different approaches to asynchronous data loading.

Sep 4, 2020

MouseFollower

A smiling face follows the mouse cursor as it moves across an SVG canvas. The example demonstrates real-time interaction by tracking mouse coordinates and updating a circle element’s position. Built with React hooks (`useState`, `useCallback`) and D3 v6, it renders an SVG circle that responds to `onMouseMove` events. The code uses ReactDOM to mount the component and D3 for basic utility functions, though the interaction relies primarily on React’s state management for dynamic updates.

Sep 4, 2020

SmileyPart4

A grid of fifteen cartoon smiley faces, each with a brown circular head, eyes, a toothy arc mouth, and a unique hairstyle, is rendered using React components and SVG. The faces are generated by mapping over an array from d3.range, and each face’s features—such as eye offset, mouth radius, and stroke width—are randomized with Math.random. The mouth and teeth use d3.arc to define their curved shapes, while the hair is drawn as a polygon.

Sep 4, 2020