Ed Smale

@edwardsmale·16 public vizzes

Backup of Fork of D3 Selection Exploration

An animated, generative visualization displays hundreds of shifting lines and rainbow-colored circles on a black background. The composition evolves continuously as the data’s coordinates, radii, and colors are recalculated each frame using a sine-based function. Rendered with D3 v7, the code uses `selectAll` and data joins to update SVG `line` and `circle` elements, while `interpolateRainbow` assigns hues. The entire SVG is also rotated by a complex trigonometric expression, producing an organic, swirling motion.

Aug 1, 2023

Loading thumbnail…

Fork of D3 Selection Exploration

This example renders an animated, abstract visualization of thousands of lines and circles generated procedurally from trigonometric functions. The scene continuously updates every 10 milliseconds, with shapes shifting position, radius, and color via the interpolateRainbow scale. Built with D3 v7, the code uses selections such as `.selectAll()` and `.join()` to bind new data to SVG elements, while the entire SVG rotates dramatically based on nested sine calculations. The fork explores D3’s data-join and update patterns, set against a black background.

Aug 1, 2023

Loading thumbnail…

Report Generation Logo

This example renders a transparent SVG logo composed of concentric circles. It shows a central blue circle surrounded by a series of larger, overlapping cyan rings that create a radiating burst effect. The code uses D3 selections and the `join` method to bind an array of values from `range(56, 72)` to circle elements, calculating each radius from the bound data. Multiple additional circles are appended with varying stroke widths and colors, all drawn using D3 v7's selection API.

Jul 26, 2023

Loading thumbnail…

Fork of Fork of D3 Selection Exploration

An animated SVG visualization of swirling geometric patterns, demonstrating dynamic data binding with D3 selections. Hundreds of teal lines and rainbow-colored circles continuously update their positions and radii in a dark viewport, creating a rhythmic, organic motion. The code uses D3 version 7’s `select` and `selectAll` APIs with a `join` method to handle enter, update, and exit states for both line and circle elements. Data is generated procedurally via custom `makeData` and `vizData` functions, using trigonometric calculations and `interpolateRainbow` for color mapping, with updates triggered by a JavaScript `setInterval` loop.

Jul 22, 2023

Loading thumbnail…

Fork of Fork of D3 Selection Exploration

This animation uses D3.js v7 to render millions of moving lines and colored circles over a black background, creating a dense, shifting geometric pattern. Data is generated procedurally with trigonometric functions and the `interpolateRainbow` scale, updated every 10 milliseconds in a `setInterval`. The visualization leverages D3 selections, the `join` method, and SVG attributes like `cx`, `cy`, and `r` to redraw elements, with circle size and position varying dynamically over time.

Jul 22, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between first order spend and total spend for individual customers, using D3.js v7 to render a collection of data points. The visualization maps numeric spend values from a static dataset onto x and y axes, calculating both dimensions from the data. The code imports data from a separate module and prepares it for rendering through functions that extract the spend values and calculate circle positions, though the complete drawing logic is implemented in a bundled JavaScript file that initializes the D3 rendering pipeline.

Jul 21, 2023

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript code can be integrated directly into an HTML page using D3 v7. It defines three modules—`index.js`, `something.js`, and `thing.js`—that import from each other using ES6 syntax. The `index.html` file loads the D3 library from a CDN and displays a simple “Hello HTML” message styled with CSS. The JavaScript modules log text and the D3 `select` function to the console, showcasing modular code organization alongside standard HTML rendering.

Jul 20, 2023

Loading thumbnail…

Fork of Stacked Bar Chart

This forked stacked bar chart visualizes the distribution of religious populations across 21 countries. The code uses D3 v3 to create an SVG-based visualization with nested data, d3.layout.stack for bar stacking, and d3.legend for the color scale. Interactive hover states filter and highlight individual religious groups.

Jul 19, 2023

Loading thumbnail…

D3 Selection Exploration

This example demonstrates D3’s selection and data-join mechanics by continuously generating a changing set of circles. A `setInterval` updates the data array, whose length and positions vary with a sine wave, and the `svg.selectAll('circle').data(data).join('circle')` pattern creates or removes circles to match. The code uses D3 v7’s `select` and `range` functions, renders as an SVG animation, and updates element attributes (`cx`, `cy`, `r`) every 10 milliseconds.

Jul 19, 2023

Loading thumbnail…

Full Sol LeWitt with D3

This example renders two interlocking sets of green bars—horizontal and vertical—on a full-window SVG canvas. The bars are masked by two overlapping circular shapes created with D3’s `symbol` API, which generates geometric star-like paths. Using D3’s `select`, `range`, and `join` methods, it draws 50 bars in each direction, with the second mask inverted so that only the region outside its circle reveals the vertical bars. The visualization demonstrates how SVG masks and D3’s declarative data joins can combine to produce layered, patterned compositions.

Jul 19, 2023

Loading thumbnail…

Something

This example demonstrates how to manipulate and filter a simple numeric array using D3’s utility functions, logging the results to the console. It creates an array of ten numbers with `d3.range`, sorts them in descending order using `d3.descending`, and filters for even values with JavaScript’s native `filter` method. The visualization itself is a bare-bones HTML page with no visible rendering, relying solely on `d3.select` (imported but unused) and the array operations. The code runs as a React-based starter project, with D3 version 7.8.5 as its only dependency, showing basic array processing without any graphical output.

Jul 16, 2023

Loading thumbnail…

Fork of Sol LeWitt vertical again

This example generates a grid of horizontal and vertical bars overlaid with two circular masks, creating a circular portal where the bars are visible and a contrasting ring where the orientation flips. Built with D3.js, it uses `select` and `range` to create 35 rectangles for each axis, positioning them with `attr` calls. The SVG rendering applies `mask` elements with `rect` and `circle` shapes to control visibility. The artwork reinterprets Sol LeWitt’s vertical line concept, using the browser’s `innerWidth` and `innerHeight` for a full-screen composition.

Jul 16, 2023

Loading thumbnail…

Sol LeWitt vertical

A vertical grid of fine alternating strokes fills the screen, with a circular region in the center where the pattern's orientation flips from horizontal to vertical. The effect uses two SVG masks with reversed black-and-white circles to hide or reveal layers of rectangles. Written with D3 v7, it generates 100 horizontal and 100 vertical rect elements, each 10 pixels thick, and applies the masks via the `attr('mask', ...)` API. The full-viewport SVG is sized to the window, and no external data is used.

Jul 16, 2023

Loading thumbnail…

test

This example demonstrates how SVG shapes can fill a browser window using D3.js. The code appends a red rectangle covering the entire viewport, then adds 100 horizontal bars stacked vertically with 10-pixel gaps. Each bar spans the full window width, creating a striped overlay effect. The visualization uses D3 selections with the `range()` generator and `.join()` method to bind data to SVG `<rect>` elements. All rendering occurs through SVG, with dimensions dynamically derived from `window.innerWidth` and `window.innerHeight`.

Jul 16, 2023

Loading thumbnail…

Sol LeWitt

This example generates a vertical field of narrow, evenly spaced black rectangles across the full height of the browser window, creating a rhythmic, striped composition reminiscent of Sol LeWitt’s wall drawings. It renders 100 SVG `<rect>` elements directly onto an `<svg>` created with the DOM API `document.createElementNS`. The rectangles are positioned incrementally along the x-axis at 20-pixel intervals, each with a fixed width of 10 pixels, while the height is set to match the window’s inner height. No external libraries are used; the visualization relies solely on native SVG parsing and JavaScript.

Jul 16, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, and lines—rendered directly in a 960×500 viewport. The code uses plain SVG elements (circle, rect, line) with various stroke and fill attributes, including a series of tall black rectangles that form a vertical bar-like composition. The rendering approach is static SVG markup embedded in HTML, with no JavaScript libraries or data-binding logic involved. It serves as a basic illustration of how SVG geometry and styling work without additional abstraction layers.

Jul 16, 2023