Toly

Stock price display - Apple

This example shows the historical stock price of Apple as a line chart, with a vertical gradient stroke transitioning from red (low values) to green (high values). It includes interactive hover functionality: moving the mouse over the chart reveals a black circle marker and a text label displaying the exact price at the nearest data point. The visualization is built using D3.js v4, leverages SVG for rendering, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for axes. Data is loaded from a CSV file containing date and price columns, and the chart uses a bisector for efficient nearest-point lookup during mouse movement.

Jan 1, 2023

Analysis using scatterplots - TN

This animated scatterplot explores median family wealth in the US from 1983 to 2016, split by race, using data from the Urban Institute and US Census via the #TidyTuesday project. A dropdown menu filters the visualization by race, transitioning between point clusters and vertical bar highlights. The chart uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` APIs to render SVG elements, with figures normalized to 2016 dollars. It reveals persistent wealth disparities, with White families holding nearly eight times the wealth of Black and Hispanic families, alongside a sharp decline after the 2007-08 housing crash.

Jan 1, 2023

Histogram with Iris Data

This example visualizes the Iris dataset as a histogram, allowing users to select which quantitative attributes to plot on the X and Y axes via dropdown menus. It displays both rectangular bars and circular marks representing binned counts. Built with React and d3.v7, it uses `scaleLinear` for axes, `bin` for frequency computation, and `scaleOrdinal` for species-based coloring. Data is loaded as CSV, and the interactive visualization renders to SVG, with tooltips showing exact counts.

Histogram TP_dataviz Projet

This example displays a histogram of album titles on the x-axis against their Deezer fan counts on the y-axis, with bars animating into place via a staggered `transition`. The visualization fetches artist data from the Wasabi API, uses D3’s `scaleBand` and `scaleLinear` for axes, and includes interactive tooltips via `mouseover` and `mousemove` events. Two buttons, labeled Ascending and Descending, trigger sorting of the albums by fan count or release date, though the sort logic operates on a pre-fetched list. The SVG rendering is crisp, with bars colored in a muted green.

Bar Chart Religions of Largest 20 Countries

This example shows a stacked bar chart of the estimated 2010 religious breakdown for the 20 most populous countries, with each bar divided by religion. Hovering over a bar reveals a tooltip with the specific religion, country, and population, while hovering over the legend highlights that religion across all bars. The visualization uses D3 version 3 with `d3.layout.stack` for stacking, `d3.scale.ordinal` and `d3.scale.linear` for axes, `d3.legend.color` for the legend, and `d3-tip` for tooltips. Data originates from the Pew Research Global Religious Landscape and is rendered as SVG with animations.

Scatter Plot with Menus Including Species - TN

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that assign either quantitative or categorical variables to the x- and y-axes. The visualization uses D3 v6’s selection.join to smoothly transition data-driven circle positions and scales, with axes updating via d3.axisLeft and d3.axisBottom. The code employs d3.scaleLinear and d3.scalePoint for continuous and categorical mappings, respectively, and animates circle growth on entry using d3.transition with a one-second duration.

Grid Menus Animated Species Stratified Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through three dropdown menus that control the x-axis, y-axis, and species filtering. The visualization uses D3 v6 with SVG rendering and animated transitions via the selection.join pattern and transition API. When species selection changes, the plot smoothly animates between showing all data points and specific species, with color shifts from blue to salmon for filtered subsets. The reusable menu and scatter plot components handle data binding and axis updates.

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis - TN

This scatter plot animates COVID-19 vaccination rates and 7-day average case counts for the US population, using a dual y-axis where steelblue circles represent the proportion of people vaccinated and gray circles represent case counts. The visualization demonstrates that as vaccination numbers rise, case numbers decline, with annotations highlighting the peak and final case counts. Built with D3.js (version 6.7.0), it implements reusable scatter plot patterns with custom scales for time and linear axes, animated circle growth, and interactive menu selection for toggling between partial and fully vaccinated data. The code leverages D3's data joins, transitions, and annotation APIs, pulling data from Our World in Data and the New York Times rolling averages dataset.

COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

The visualization animates daily COVID-19 mortality and case averages across the United States using NYT rolling-averages data. A reusable D3 scatter plot framework, built with `scaleTime`, `scaleLinear`, and `axisBottom`, transitions circles smoothly between the two metrics every 2.4 seconds. The SVG rendering displays month and year tick labels, a y-axis label, and a vaccination milestone annotation. It uses `selectAll`, `data().join()`, and `transition().delay()` to update positions and redraw axes.

All Info In One - Studying of D3 Scatter Plot colors by species

This visualization uses the Iris Dataset to show how sepal and petal measurements relate across three iris species. It displays petal length on the x-axis, petal width on the y-axis, and sepal length as the size of each circle. Species are encoded by color, with setosa in blue, versicolor in red, and virginica in black. Built with D3 v6, the example uses `d3.csv`, `d3.scaleLinear`, `d3.scaleSqrt`, and SVG circles with tooltips to reveal exact values on hover. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`.

Title to the Dot (Studying of D3 Scatter Plot) - TN

This scatter plot visualizes the Iris dataset, plotting petal length against sepal length for each flower sample. The visualization uses a D3 v6 SVG rendering with circles positioned along linear scales. Points are intentionally rendered in a single color, with tooltips revealing the exact coordinate values on hover. The code leverages `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` for chart axes. The implementation dynamically sizes the plot to the browser window using `window.innerWidth` and `window.innerHeight`.

Iris Scatter Plot with Colors and Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users choose which measurements (sepal length/width, petal length/width) appear on the x- and y-axes via dropdown menus. Each of the three Iris species is distinguished by a unique color (purple, red, or green) with semi-transparent circles. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and re-renders with animated transitions whenever a menu selection changes.

AQI (or any data) Data in America by State

This interactive visualization combines a choropleth map of the United States with a linked time-series histogram to explore Air Quality Index (AQI) data by state. The map, rendered with d3.geoPath and geoAlbersUsa, colors each state using a quantile scale based on AQI values. The histogram below aggregates daily readings into monthly bins, and users can brush across it to filter the map’s coloring. Built with React and d3.v5, it loads CSV data from a GitHub gist and US state boundaries from a TopoJSON file.

World Map with D3 Final

This interactive world map displays country boundaries and names using a natural Earth projection, with a colored sphere background and hover effects that highlight individual countries in red. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas package, combining TSV country name metadata with JSON topology data. The code uses `geoNaturalEarth1`, `geoPath`, and `zoom` for projection and panning, while SVG paths render the map with CSS styling for interactivity.

Animated Scatter Plot with Menus_testing_dispatch

This animated scatter plot displays the Iris dataset with interactive menus for switching both the x and y axes among quantitative and categorical attributes, incorporating linear, square root, and power scale types. Built with D3 v6, the visualization uses menu components with dispatch events to update the chart's scale types and columns, while an additional click event toggles the x-axis color between blue and black. Circles transition smoothly between positions using `transition.attrTween` and `selection.join`, with axes rendered via `axisBottom` and `axisLeft`.

Animated Reusable D3 Scatter Plot with labels

This animated scatter plot visualizes the Iris Dataset, cycling through the four measured attributes on the x-axis every three seconds while keeping sepal length fixed on the y-axis. Built as a reusable D3 chart, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join` to smoothly transition circle positions and axis scales over one-second durations. The code also animates label updates and circle entry/exit states. The plot renders in SVG and relies on D3’s `csv` loader to fetch and parse the dataset.

Scatter Plots of Iris Dataset COLORS

This interactive scatter plot displays Fisher’s Iris dataset with colored points for three species—setosa, versicolor, and virginica—and lets users switch both the x- and y-axis features among sepal and petal length and width. It uses d3.csv to load the data, d3.scaleLinear and d3.axisBottom/axisLeft for scales and axes, and d3.select to update the SVG on button clicks. A custom button panel built with D3 selections highlights selected axes, while a legend identifies each species.

Animated Vehicle Consumption Scatterplot

This animated scatterplot visualizes vehicle fuel consumption and CO2 emissions from a 2014 dataset, plotting over 1,000 points with D3.js. Every 17 seconds, the x-axis transitions between CO2 emissions, engine size, and cylinder count, repositioning points via `selection.join` with staggered `transition` delays. The SVG chart uses `scaleLinear` domains, axis generators, and custom labels, with the y-axis fixed to combined MPG. Data loads from a CSV via `d3.csv`, and the reusable chart pattern updates axes and circles smoothly during each attribute swap.

Reusable D3 Scatter Plot with Symbols

A reusable D3 scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct SVG symbol shapes from `d3.symbol`. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` to assign symbols, and `d3.axisLeft`/`d3.axisBottom` for ticks. A `scatterPlot` factory function configures dimensions, margins, and accessors via chained methods, then renders paths using `d3.symbolGenerator`. Data is loaded asynchronously with `d3.csv` from a GitHub Gist, and the plot fills the window with a 24px tick font.

Reusable scatter plot with axis labels and tooltip

A scatter plot visualizes EU countries by urban population percentage and fertility rate, with hover tooltips displaying country names. The chart uses D3’s scaleLinear, extent, axisLeft, and axisBottom for axes and scaling, with circle elements bound to mapped data. Styled axis labels and a tooltip div are appended via D3 selections, while the data comes from a CSV of 2022 EU population statistics. The reusable scatterPlot function supports configurable dimensions, margins, and value accessors, with mouseover and mouseout events toggling tooltip opacity.

D3 Scatter Plot Matrix multiple colors

A 4x4 scatter plot matrix compares all numeric fields of the classic iris dataset, with each cell plotting one field against another. D3 v6 renders 16 SVG charts, using `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeSet1` to color points by iris species, and `d3.axisLeft`/`d3.axisBottom` for ticks. Titles appear only on diagonal cells.

Title to the Dot Scatter Plot - Good

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each circle represents an individual flower sample, with tooltips revealing its exact coordinates. The code uses d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft for tick marks. All points are rendered as SVG circles, with the canvas sized to fill the browser window.

COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot - TN

A reusable D3 scatter plot visualizes COVID-19 death averages in the United States over time, using data from the NY Times rolling-averages dataset. The chart renders an SVG with time-scaled x-axis and linear-scaled y-axis, plotting daily death averages as small circles. Labels annotate the national trend, noting the vaccination milestone at 30% and citing the NYT source. The implementation uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `timeFormat`, with a configurable chart factory pattern for reusable accessor properties.

Reusable D3 Scatter Plot - TN

This reusable scatter plot visualizes the Iris Dataset, mapping petal width against sepal length with animated transitions. It cycles through four attribute combinations every two seconds using `setInterval`. The chart is built with D3 v6, employing `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins via `selection.join`. SVG circles update positions smoothly, while axes persist through idempotent re-rendering. The code follows a reusable chart pattern with setters for width, height, data, and margin, as demonstrated in Bostock’s "Towards Reusable Charts."

Reusable scatter plot with axis labels and tooltip - TN

A reusable scatter plot displays EU countries by urban population percentage and fertility rate, with axis labels and hover tooltips showing country names. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and a custom `scatterPlot` function with getter-setter methods for configurability. SVG circles render the data from a CSV of 2022 EU population statistics, while tooltips appear via D3 selection events.

Daily new cases of Covid in Italy - Scatter Plot

This scatter plot visualizes daily new Covid cases in Italy over time, with point size representing the number of patients in intensive care. The x-axis uses `d3.scaleTime`, the y-axis uses `d3.scaleLinear`, and point radii are scaled with `d3.scaleSqrt`. A button toggles the visibility of a connecting line drawn with `d3.line()`. Data is loaded from the Italian government’s COVID-19 CSV repository via `d3.csv`, and the SVG rendering fills the browser window.

Fork of D3 Scatter Plot - TN

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The SVG rendering uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Circles represent individual flowers, with a fixed radius and no color encoding. The chart fills the browser window, with axis fonts enlarged via CSS for readability.

Dec 29, 2022

Fork of D3 Selection (with dots and lines)

A dynamic SVG visualization animates a set of circles and connecting lines in a wave-like pattern. The circles’ vertical positions and radii oscillate over time based on a sine function, while black lines of varying thickness link each circle to its neighbor. The example demonstrates D3’s `join` method for efficient incremental updates of SVG elements. It uses D3 v6.7.0, employs `selectAll`, `data`, and `join` to handle both `circle` and `line` elements, and updates the scene roughly 60 times per second via `setInterval`.

Dec 28, 2022

Fork of DNA Animation

This animation depicts a stylized, two-stranded DNA helix constructed from a sequence of circles connected by smooth, colored paths. The parallel strands oscillate horizontally, and the connecting rungs are rendered as thick line segments, creating a simplified molecular representation. The visualization is built with D3 version 7, using its `line` generator and the `.join()` operation to efficiently update SVG circles, paths, and lines at 60 frames per second via `setInterval`. Two independently timed sine-wave functions drive the positional data for each strand.

Dec 28, 2022

Fork of D3 SIN Animation

This fork of the D3 SIN Animation displays a series of moving circles whose horizontal positions, vertical offsets, and radii oscillate according to a sine wave over time. The animation updates sixty times per second, with each frame generating new data based on an increasing time variable. It renders as an SVG element sized to the browser window, and the `vizData` function uses D3’s data-join API to update existing circle elements with new coordinates and radii. The code imports `select`, `range`, and `scaleLinear` from the D3 library.

Dec 28, 2022

Sol LeWitt Reproduction with D3 - squares

This example reproduces a Sol LeWitt geometric composition by dividing the canvas into four quadrants, each filled with a distinct pattern of parallel or rotated line segments. The piece uses D3 v6 to generate SVG rectangles and applies four separate `mask` definitions to confine each pattern to its respective square. Horizontal, vertical, and 45-degree rotated lines are created by binding data from `d3.range` and manipulating `x`, `y`, `width`, `height`, and `transform` attributes. The viewport is scaled to the browser window, and the code imports `select` and `range` directly from the D3 module.

Sol LeWitt US Flag with d3.

This visualization reproduces Sol LeWitt’s geometric interpretation of the US flag using only SVG shapes and masks. It displays a field of red and blue stripes composed of thin, overlapping rectangles, with a canton containing white five-pointed stars. The code uses d3’s `select`, `range`, and `symbol` APIs to generate the pattern procedurally. It builds two masks (`redMask` and `blueMask`) to clip the horizontal and vertical stripe groups, then places stars via repeated `path` elements with `symbol(symbols[4], …)`. The rendering is pure SVG, with dimensions and spacing derived from the variables `aa`, `bb`, and `ll`.

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt drawing by generating two sets of intersecting parallel line segments—horizontal and vertical stripes—that are masked to reveal a central circular form. The SVG uses custom mask elements to clip the stripes, with one mask isolating the circle for the horizontal lines and an inverted mask for the vertical lines. The code constructs the scene entirely through native SVG APIs, creating rectangles programmatically in a loop, without relying on external visualization libraries.

Fork of Sol Lewitt Art Vert - TN

A generative SVG composition reproduces the visual language of Sol LeWitt’s art, displaying 100 vertical black rectangles evenly spaced across the full viewport height. The code creates each rectangle via the SVG namespace API, setting its x position at increments of 20 pixels with a fixed width of 10 pixels. The piece uses raw JavaScript with `document.createElementNS` and `setAttribute` to build the vector geometry, filling the entire browser window without any data input or interactive behavior.