adventuresenglish.info@gmail.com

Clickable Tooltip

This interactive scatter plot visualizes doping allegations in professional bike racing from 1994 to 2015, plotting race times against years. Built with D3 v7, it fetches cyclist data from a Free Code Camp GitHub repository and renders SVG circles with jitter to reduce overplotting. Hovering reveals a clickable tooltip with rider details and source links, while color-coded dots and a legend distinguish riders with and without doping allegations. Tooltip transitions use D3’s `.transition()` for smooth fade-in/out effects.

Feb 4, 2024

Let's get tool tipsy up in here

This interactive D3 visualization compares state-level median income, alcohol consumption, and murder rates. Users select different quantitative variables for the x- and y-axes via HTML dropdown menus, toggling between a categorical bar chart and a quantitative scatterplot. The SVG rendering uses `scaleBand` and `scaleLinear` for the axes and animated transitions via `transition` for morphing between chart types. Hovering over a bar or text label triggers a CSS-styled tooltip that fetches an external SVG state flag and displays a data table, using `pointer` for mouse position tracking.

Jan 30, 2024

Untitled

A force-directed graph of 100 nodes and 100 links arranges itself into a circular structure using d3.forceSimulation with charge, link, X, and Y forces. The layout is pre-computed by running the simulation to completion before rendering, then SVG circles and lines are drawn. The code uses D3 v4's forceSimulation API and React-ready SVG output.

Jan 30, 2024

GDP Bar Chart

This example presents a static bar chart of GDP data, with each bar’s height representing a country’s economic output. The visualization uses D3.js to bind data to SVG elements, scale the bars with `d3.scaleLinear`, and apply a color scale to differentiate values. The chart is rendered inside a minimal React component, with the view instantiated via a simple `div` container. Bars are drawn using SVG `rect` elements, and the code leverages D3’s selection and data-join pattern to create the visualization.

Dec 22, 2023

SVG FILE TESTER

This example demonstrates how an SVG file can be loaded and embedded into an HTML page. It uses D3’s `xml()` function to fetch an external SVG file, retrieves the document element, and adjusts its `viewBox` and dimensions to fit a specified height while preserving the aspect ratio. The modified SVG is then appended to the page body. The visualization also includes a static red cross-hatch pattern from the source file, rendered using standard SVG elements.

Dec 19, 2023

T3 Test

A field of 150 colored circles of random size, position, opacity, and color fills the browser window. Hovering over a circle reveals a styled tooltip displaying the circle's data (x, y, and id) in a table. The tooltip repositions to stay within the viewport, and the circle's fill color transitions to a new random color. Built with D3 v7, this demo uses selection-based event handlers (`mouseover`, `mousemove`, `mouseleave`) and D3's `transition` to animate the color change.

Dec 18, 2023

Animation Practice

A blue div demonstrates chained D3 transitions, changing background color to green, fading to transparent yellow, then returning to full opacity over three 3-second stages. Using D3 v7’s `transition`, `duration`, and `style` methods within `index.js`, the animation runs on page load via `main()`. The example shows basic sequencing without data, relying on SVG-free DOM manipulation and the `d3.select` API.

Dec 18, 2023

Color Experiments

This example generates 150 circles at random positions across the full browser viewport. Each circle receives a random radius, opacity, and a fill color selected from a procedurally generated RGB range using D3’s `select` and `join` methods. The SVG renders with a 13em body font, displaying the title "Color Experiments" at the top of the page. The data is constructed in plain JavaScript with no external dataset.

Dec 17, 2023

box test

This example demonstrates basic chart interactivity by rendering a single green circle in D3.js version 7, which changes to magenta on mouse hover. The visualization uses D3's `select` and `pointer` functions to implement a custom tooltip that displays the circle's data, containing key-value pairs like "hello: world" and "yo: dog". The tooltip dynamically positions itself near the cursor, flipping to the opposite side of the screen edges based on mouse coordinates, while the circle's fill color resets when the mouse leaves. The code renders to an SVG canvas using the unpacked D3 library.

Dec 16, 2023

T3 Tool Tip Template

This example demonstrates a reusable tooltip system for data visualizations, where hovering over 50 randomly positioned circles displays their x, y, and id properties in a floating HTML div. The tooltip intelligently flips its position near the window edges using mouse coordinates from the d3.pointer API. The implementation uses D3 v6 selection methods like .on mouse events and .join for dynamic content, while custom CSS styling creates the visual tooltip appearance. The SVG-rendered circles change color from gray to magenta when hovered, with tooltip contents generated from each data object's entries.

Dec 15, 2023

Fork of Intersections 3

This interactive visualization explores relationships between socioeconomic indicators—median income, alcohol consumption, and murder rate—across U.S. states using the Iris Dataset-inspired scatter plot. Users switch axes via dropdown menus, toggling between categorical state labels and quantitative measures. The chart animates transitions between scatter plots and bar charts using D3’s selection.join, transitions, and scaleBand/scaleLinear scales. SVG circles and rectangles encode data points, with tooltips providing detailed state information. The code leverages D3 v6, CSV data loading, and custom reusable chart and menu components.

Dec 14, 2023

Intersections 3

This interactive visualization, "Intersections 3," presents the relationships between median income, alcohol consumption, and murder rates across U.S. states. Users can dynamically reassign these quantitative variables to either axis via dropdown menus, which triggers animated transitions that morph the display between scatter plots and categorical bar graphs. Built with D3 v6, the example demonstrates reusable chart components and the `selection.join` API for updating SVG elements. The dataset is loaded from a CSV file, and state names are resolved using a hardcoded lookup table.

Dec 12, 2023

Intersections

This visualization displays the relationship between U.S. state statistics—including median income, alcohol consumption, and murder rate—using a dynamic scatter plot. The plot transitions between categorical bar charts for states and quantitative scatter plots, with animated circles for numeric comparisons. D3's scaleLinear, scaleBand, axisBottom, and axisLeft APIs handle the chart construction, while the `menu` component and `dispatch` enable interactive axis selection. The code uses `transition` for smooth animations and `selection.join` for efficient SVG element updates. The data comes from a CSV file combining income, alcohol, and murder statistics per state.

Dec 11, 2023

Intersections Two

This example presents an interactive scatter plot of U.S. state statistics, including median income, alcohol consumption, and murder rate, using the D3.js library. Users can select which quantitative variable to map to the X and Y axes via dropdown menus, with the chart animating transitions between configurations. The visualization dynamically switches between circular marks for quantitative axes and rectangular bars for categorical axes, such as plotting states alphabetically. Data is loaded from a CSV file, and the code leverages D3's selection joins, scales, and axes for rendering.

Dec 11, 2023

Episode 12

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements and species. The visualization features dropdown menus to select which quantitative or categorical columns map to the x- and y-axes, with the chart dynamically re-rendering when selections change. Built using D3 v6 and the selection.join pattern, it uses d3.scaleLinear for continuous data and d3.scalePoint for categorical species values, with 1000ms transitions animating the circles as scores update. The iris data is loaded from a GitHub Gist, and the SVG rendering includes shared axis transitions.

Dec 10, 2023

AnimatedScatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to switch between measurement axes (sepal/petal length and width) via dropdown menus and toggle the visibility of each species (Setosa, Versicolor, Virginica) with checkboxes. Built with reusable D3.js functions, changes trigger smooth animated transitions of circle positions and axis scales using `transition` with a one-second duration. The code leverages D3’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` for rendering, with SVG output and a selection.join pattern for efficient data-driven updates.

Dec 10, 2023

test Scatter Plot with Menus

This scatter plot displays the Iris dataset, encoded as circles positioned by selected measurements from drop-down menus for the x and y axes. D3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` map values to SVG coordinates, while `transition` animates circle positions and axes when a menu selection changes. The reusable chart pattern uses `selection.join` to handle enter, update, and exit states for the SVG circles.

Dec 9, 2023

Animated Reusable ScatterPlot

The scatter plot visualizes the Iris flower dataset, showing how the relationship between different measurements changes as the x-axis cycles through four attributes every four seconds. Each flower species is color-coded, and circles smoothly transition to new positions. The visualization is built as a reusable D3 component using the `join` API for entering, updating, and exiting elements, with animations driven by D3's `transition` function. It uses linear scales for axes, an ordinal scale for colors, and displays axis labels alongside a legend.

Dec 8, 2023

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization shows a 4x4 scatter plot matrix comparing all numeric fields of the iris dataset, with points colored by species using `d3.scaleOrdinal` and `schemeSet1`. Each cell pairs two variables, with axes drawn via `d3.axisLeft` and `d3.axisBottom`, and diagonal cells display variable titles. The code loads CSV data from a GitHub gist, parses it with `d3.csv`, calculates extents with `d3.extent`, and renders the matrix across the full window using multiple SVGs sized to a quarter of the viewport. It relies solely on D3 v6 in vanilla JavaScript.

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization presents a 4x4 scatter plot matrix comparing all numeric fields of the classic Iris dataset, with points colored by species using the `d3.schemeSet1` color array. Each cell pairs a variable on the x-axis with another on the y-axis, using `d3.scaleLinear` and `d3.extent` for scaling and axes via `d3.axisLeft` and `d3.axisBottom`. The code fetches CSV data with `d3.csv`, manipulates the DOM with `d3.select`, and renders SVG circles with a radius of four pixels. Titles appear only on diagonal cells, where a variable is compared with itself.

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization presents a 4×4 scatter plot matrix comparing all numeric fields of the classic Iris dataset, with each point colored by species using a categorical scale. Written in vanilla JavaScript with d3.v6, it renders SVG charts by leveraging `d3.csv` for parsing, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `schemeSet3` for color encoding. Each off-diagonal cell plots a pairwise comparison, while diagonal cells display field titles, and axes are generated via `d3.axisLeft` and `d3.axisBottom`.

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

A four-by-four scatter plot matrix compares every pair of numeric measurements in the iris dataset, with points colored by species using the `d3.scaleOrdinal` schemeSet1 palette. Each cell renders an SVG with `d3.axisLeft` and `d3.axisBottom` scales, while diagonal panels label their corresponding feature. The code fetches the CSV via `d3.csv`, parses numeric fields, and loops through all combinations to append individual SVGs sized to a quarter of the window. D3 v6 is loaded from a CDN and used as a browser global.

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Reusable Charts

This example demonstrates a reusable D3 chart component that visualizes the Iris dataset as a scatter plot, cycling through different variable pairings every two seconds. The `scatterPlot` function creates a configurable plot with settable properties like width, height, data, x/y value functions, margin, and radius. Using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, it renders SVG circles with animated axes that update as the selected columns change. The plot is applied to the SVG via the `.call()` method, and `setInterval` drives the rotation through the dataset’s four numeric columns.

colored Scatter Reusable Symbols

This example visualizes the Iris Dataset, plotting petal width against sepal length for three species of iris flowers. The scatter plot uses reusable symbols, with each species (setosa, versicolor, virginica) rendered as a distinct geometric shape and colored blue, green, or red. Tooltips reveal the exact x and y coordinates. Built with D3 v6, it leverages `scaleLinear` for axes, `scaleOrdinal` to map species to `symbols`, and `symbol()` to generate reusable paths, all rendered as SVG with custom axis styling.

Reusable Charts + symbol

This example demonstrates a reusable scatter plot built with D3 version 7, visualizing the classic Iris dataset. The chart encodes sepal length against petal width, with each species represented by a distinct symbol (circle, cross, diamond, etc.) and color-coded (blue, green, red) using `d3.scaleOrdinal` and `d3.symbol`. The code uses `d3.csv` to load data and a custom `scatterPlot` function with setters for dimensions, margins, and accessors. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, with the plot updating through `selection.join` for dynamic data binding.

Sol LeWitt-Inspired Shapes

This piece is an abstract generative art piece inspired by Sol LeWitt’s geometric wall drawings, built with D3 v7 and rendered as SVG. It displays a grid of blocks, each containing randomly colored horizontal and vertical slats, which are partially obscured by two alternating masks shaped from D3’s built-in symbol generators. The code uses `d3.symbols`, `d3.range`, and `.join()` to create rectangles and symbol paths, while the masks toggle visibility via an inverted fill pattern for varied visual depth. The page automatically reloads every 2.8 seconds to generate a new composition.

ScatII

This scatterplot visualizes the relationship between GDP (x-axis) and population (y-axis) for various countries. Each circle represents a country, with tooltips revealing the country name, GDP, population, and calculated GDP per capita. Built with React and D3 v7, the visualization uses `d3.csv` to load data from a GitHub repository, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` for tick labels. It is rendered as an SVG, with data formatted using a custom `numMaker` utility that abbreviates large numbers into billions and millions.

Scatter Plot with D3

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for individual flowers. The visualization uses D3.js to load CSV data via `d3.csv`, create linear scales with `scaleLinear`, and render SVG circles as data points. Axes are generated using `axisBottom` and `axisLeft` and positioned within a margin-based layout. The chart fills the browser window through dynamically computed width and height, with the rendered SVG scaling to the viewport.

Fork of Fork of Sol LeWitt-Inspired Shapes

An abstract SVG composition fills the browser window with randomly colored bars and rectangles, arranged in a grid of six columns. It uses D3's `d3.symbol` to generate six distinct mask shapes that alternately reveal or conceal overlapping layers. The code creates a dynamic pattern through `d3.range` loops, applying SVG `<rect>` elements and `mask` filters. Each column cycles through randomized RGB colors, producing a chaotic, generative artwork inspired by Sol LeWitt, rendered entirely client-side with D3 v7.

2Fork of Fork of Fork of Sol LeWitt-Inspired Shapes

This piece generates an abstract, colorful composition of rectangular blocks that repeat across a grid. Each block is subdivided into smaller vertical and horizontal strips with randomized RGB colors. D3 masks, defined by large scaled path symbols, selectively reveal and hide portions of the strips, creating a complex interlocking pattern. The code uses D3’s `select`, `range`, `symbols`, and custom mask rendering to build the SVG.

Fork of Fork of Fork of Sol LeWitt-Inspired Shapes

This visualization generates a grid of Sol LeWitt-inspired abstract compositions using randomized geometric shapes and colors. Each block combines horizontal slats, vertical stripes, and filled rectangles that are partially hidden by SVG masks shaped like D3 symbols (circles, crosses, diamonds, and other glyphs). The rendering approach uses D3 selections with `join` to bind data to SVG `rect` elements, while masks alternate between inverted and non-inverted states across rows. The page fills the viewport and redraws randomly on each load, producing a dynamic, colorful mosaic that echoes the artist’s rule-based aesthetic.

Fullsies Out of Control Molly Alt LeWitt Shapes

This piece generates a grid-based abstract composition of colored rectangles on an SVG canvas. It uses D3.js functions like `select`, `range`, and `symbol` to lay out the shapes, and defines two SVG masks to create geometric patterns from text symbols. Each rectangle is assigned a random RGB color, and the code loops to place multiple alternating column groupings across the width, resulting in a vibrant, generative art piece. The rendering is purely procedural, with no external data source.

Dec 4, 2023

Sol LeWitt-Inspired Shapes

A generative art piece inspired by Sol LeWitt’s geometric wall drawings, this visualization fills the browser window with an SVG grid of randomly colored rectangles and vertical slats. The code uses D3 v7’s symbol generators and masks to alternately reveal or hide each shape within alternating columns, producing a woven, layered composition. The rendering logic relies on SVG `<mask>` elements, `d3.range`, and `d3.selectAll().join()` to construct both horizontal and vertical bands, with the mask patterns cycling through D3’s built-in symbol types. The result is a dynamic, self-contained pattern generated from deterministic geometry and random color values.

Dec 4, 2023

wuzTsoid

This example generates a dynamic, animated scatter of circles and rectangles that pulse and drift across the screen. The visualization uses D3's `selectAll` and `join` to bind data produced by a custom `makeData` function, which calculates positions and radii based on a time variable `t`. The shapes are rendered as SVG elements, with randomly colored circles and fixed red rectangles, and the animation loop updates them at irregular intervals using `setInterval` and JavaScript timing. The data changes continuously, creating an evolving abstract composition.

Dec 1, 2023

Partial Scatter Plot with D3

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v7. The code loads CSV data via `d3.csv`, applies linear scales with `scaleLinear` based on `extent` of the data, and renders circles as SVG elements. It computes pixel coordinates for each data point and joins them to the DOM using `selectAll` and `join`. The visualization fills the entire browser window, with the SVG sized to `window.innerWidth` and `window.innerHeight`.

Nov 30, 2023

SynWurm

SynWurm generates an animated, colorful visual composition using D3.js. It displays a dynamic set of interconnected circles, lines, and rectangles that move and change size over time. The animation is driven by a timer that updates a continuously changing dataset. The SVG rendering uses `selectAll` and `join` to efficiently update the positions, sizes, and colors of these geometric elements, creating a fluid, evolving pattern. The code generates new data points using a sinusoidal function and D3's `range` utility, with color assigned via a random color generator.

Nov 30, 2023

E7

This simple example demonstrates how to display a text message using D3.js within the VizHub environment. It imports the `select` function from D3, loads the library via UNPKG, and uses a local ES6 module to provide a greeting string. The message is rendered into a `<div>` element with CSS styling that centers the text at a very large font size. The example primarily showcases the basic workflow of combining external D3 dependencies, local modules, and stylesheets in a single-page HTML setup.

Nov 29, 2023

ZenWurm 2.0

ZenWurm 2.0 presents an abstract, animated composition of circles and rectangles that continuously morph in position, size, and color. The piece uses D3.js to bind data to SVG elements, updating their attributes in a recursive loop that simulates organic, wandering motion. The data generation, handled by a custom function, produces varying counts of shapes whose coordinates and radii are driven by sine waves. Element colors change independently at different intervals, creating a dynamic, multi-hued visual experience.

Nov 29, 2023

ZenWurm

ZenWurm is an animated abstract visualization featuring a flowing chain of green circles and red squares that undulate across the screen. The shapes move and resize continuously, driven by a time-based sine wave pattern that creates a mesmerizing, organic rhythm. The animation is built with D3's data join method (`join`) to update SVG elements at 60 frames per second, while a `setInterval` loop increments a time variable used in the `makeData` function to generate new positions and radii for each shape, all rendered with SVG styling.

Nov 29, 2023

Untitled

This example visualizes U.S. Gross Domestic Product data from 1947 to 2015 as a bar chart, with each bar representing a quarterly GDP value. The code fetches JSON data from a freeCodeCamp repository and uses D3 v7 scales, axes, and selection methods to render an SVG directly to the page. Bars are colored navy, with tooltips showing the date and value, while the x-axis displays dates and the y-axis shows GDP amounts. The visualization fills the entire browser window and dynamically scales based on viewport dimensions.

Nov 28, 2023

Out of Control Molly Alt LeWitt Shapes

This visualization presents an animated generative composition of colored, symbol-shaped forms that continuously regenerate every three seconds. It uses D3.js selection methods and data joins to create overlapping rectangles and D3 symbols, including circles, crosses, diamonds, squares, stars, triangles, and wye shapes, masked by two complementary patterns. The SVG elements are rendered against a full-screen viewport with randomly generated RGB colors, while the mask system alternates between normal and inverted symbol cutouts to produce dynamic, layered visual effects.

Nov 28, 2023

D3 Selection Exploration

Fifteen circles animate in a wave-like pattern across an SVG canvas, their vertical positions oscillating sinusoidally over time. The visualization demonstrates D3's data-join pattern using `selectAll`, `data`, and `join` to bind an array of generated objects to circle elements, updating their `cx` and `cy` attributes every 100 milliseconds via `setInterval`. The example uses `d3.range` to create the dataset and the `select` function from the D3 v7 library, rendering purely with SVG and a React-compatible setup.

Nov 27, 2023

JS Arrays

This example demonstrates sorting an array of JavaScript objects using the D3.js library. The code defines an array, `thing`, containing two objects with `key` and `value` properties, then sorts it using the `descending` function from `d3` within the `Array.sort()` method. The sorted array is logged to the console, showcasing how D3's comparison helpers can be used to order data. The visualization simply relies on a console output to display the result.

Nov 27, 2023

FULL LeWitt Circle

This example generates a visual grid of thin horizontal and vertical lines that form a woven pattern across the full screen. A circular arrangement of seven distinct D3 symbols, created with `d3.symbol` and `d3.symbols`, is applied as two complementary masks—one inverted and one not—to reveal the line intersections through the shapes. The SVG is built directly with D3 selections, dynamically sized to the browser window, and uses `range(n)` to generate 100 lines in each direction.

Nov 27, 2023

LeWitt Circle

This example creates a circular pattern of alternating horizontal and vertical black and white stripes by layering two sets of SVG rectangles. Using D3.js `select`, `append`, and `join` methods with a `range` of 100, the rectangles are masked to reveal the circle. The first mask `circle-mask` applies a black background with a white circle, while `circle-mask-2` inverts this, producing the final geometric design. The SVG viewport spans the full browser window.

Nov 26, 2023

Fork of Fork sol assignment

This example uses raw SVG and JavaScript to create an animated, mask-based optical illusion. It shows a single, complex blob-shaped path that is duplicated and used as a mask to alternately reveal and hide a grid of horizontal and vertical lines. The two mask layers, defined with inline CSS `@keyframes` animations, rotate the blob path in opposite directions, creating a dynamic interplay of shapes and lines. The visualization is rendered entirely in the browser using the Document Object Model (DOM) to construct SVG elements, with no external data sources or libraries.

Nov 25, 2023

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart uses SVG rectangles and text elements to display four labeled bars (A–D) with varying widths. The bars are drawn as black rectangles, with the first bar styled in blue and outlined with a white fill and black stroke. The chart is rendered via SVG directly in HTML, using the Share Tech font for labels, and approximates a bar chart without relying on external plotting libraries.

Nov 25, 2023

Fork of Fill & Stroke

This example demonstrates a set of SVG shapes drawn inside a red-bordered container, with a focus on how fill and stroke styles affect their appearance. The rendering uses raw SVG path elements within an HTML document, applying filters and coordinate transformations to produce the visual effects. The shapes are constructed programmatically with precise path data, showcasing the manipulation of SVG attributes in a static, non-interactive visualization. The code relies on native SVG APIs and inline styling rather than external JavaScript libraries.

Nov 25, 2023