L

Louis Astorg

@louis94270·32 public vizzes

Loading thumbnail…

Scatter Plot with categorical data

An interactive scatter plot explores the Iris dataset, letting users choose which quantitative or categorical measurements appear on the x-axis via dropdown menus. The visualization updates smoothly with animated transitions between selections, using D3 v6's `selection.join` to handle entering, updating, and exiting circles. The chart renders as SVG, with axes from `d3.axisLeft` and `d3.axisBottom`, while the menu system is built with a reusable `d3.dispatch` pattern. New points grow from radius zero, and updates stagger with a slight delay.

Loading thumbnail…

Fork of 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. Built with D3 v6, the visualization uses SVG rendering with animated transitions via `selection.join` and `transition()` to smoothly reposition, grow, and shrink circles when parameters change. The species menu toggles between showing all data points or only a selected species, with circles colored blue. Axis labels and scales update dynamically using `axisLeft` and `axisBottom`.

Loading thumbnail…

Animated Scatter Plot with Menus

An animated scatter plot visualizes the Iris dataset, allowing interactive exploration of relationships between four numeric measurements and species. Users select which column drives the x- and y-axes via dropdown menus, triggering a staggered transition of 150 points as they reposition. The D3.js code uses `selection.join` for efficient enter/update/exit handling, `transition` for smooth animations, and scale functions (`d3.scaleLinear`, `d3.scalePoint`) to map data to coordinates. Hovering highlights a point and shows a tooltip. The SVG plot includes axis labels and uses D3's `axisBottom` and `axisLeft` for ticks.

Loading thumbnail…

Animated Reusable D3 scatter plot template with axis labels

This example presents an animated, reusable D3 scatter plot template that cycles through different iris flower measurements every four seconds, transitioning the x-axis, labels, and circle positions. The visualization loads the classic Iris dataset from a GitHub gist via `d3.csv`, then uses D3 v7 scales, axes, and a custom `scatterPlot` function to render the responsive full-screen SVG. The code employs `transition` with a 3000-millisecond duration to smoothly move data points and slide in new x-axis labels, while the y-axis remains fixed on sepal length.

Loading thumbnail…

Animated Reusable D3 scatter plot template

This animated scatter plot template displays the Iris dataset across four feature combinations, cycling through petal width, sepal width, petal length, and sepal length every three seconds. The visualization uses D3 v7 with SVG rendering, featuring smooth transitions via `transition()` and delayed point movement. Reusable chart components are implemented through a custom `scatterPlot` function that handles scales, axes, labels, and legend. The data loads from a CSV file using `d3.csv`, with each axis label sliding and updating dynamically as the selected variables change.

Loading thumbnail…

Reusable D3 scatter plot template

This example presents a reusable scatter plot template built with D3.js that visualizes the classic Iris dataset. The plot animates through different variable pairings, cycling between petal width, sepal width, petal length, and sepal length every two seconds, updating the x-axis and circle positions accordingly. The code uses D3’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` function, rendering SVG circles with tooltips. The visualization fills the browser window and employs the Share Tech font for axis tick labels.

Loading thumbnail…

Reusable D3 scatter plot with symboles template

This reusable scatter plot template displays the Iris dataset, mapping petal length against sepal length and encoding species through different D3 symbol shapes. The visualization uses d3.csv for data loading, d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for the labeled axes. All rendering is SVG-based, generated imperatively through a customizable function that accepts margins, label positions, and symbol size parameters.

Loading thumbnail…

D3 scatter plot template with colors

This D3.js scatter plot template visualizes the Iris flower dataset, plotting petal length against sepal length. Each of the 150 data points is colored by species (setosa, versicolor, or virginica), with hover tooltips showing exact coordinates. Using SVG rendering, the code loads the CSV via `d3.csv`, applies `d3.scaleLinear` for both axes, and creates circles with `d3.axisLeft` and `d3.axisBottom` for labeled axes. The `d3.join` pattern binds data, while a custom `fillColor` function assigns species-specific hues.

Loading thumbnail…

D3 scatter plot template

This D3 scatter plot template visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for individual flowers. Each circle encodes one data point, with interactive tooltips revealing the exact coordinates in comma-formatted numbers. The visualization uses `d3.csv` to load the data and `d3.scaleLinear` for both axes, with `d3.axisBottom` and `d3.axisLeft` providing tick marks. The SVG rendering is full-window sized, and axis labels use the Share Tech font. The chart demonstrates a clean, customizable template for exploring quantitative relationships.

Loading thumbnail…

Crab scatter plot

This example shows the relationship between fishing depth and catch per unit effort for horsehair crabs, with each point representing a single haul. It uses a D3.js (v7) scatter plot rendered as SVG, where the x-axis maps bottom depth and the y-axis shows CPUE. The code loads data from a CSV file via `d3.csv`, then builds the plot using `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.format` for comma-separated numeric labels. Tooltips display each point's exact coordinates.

Loading thumbnail…

Zoomable Sunburst

A zoomable sunburst chart visualizes hierarchical data from the Flare dataset, which is loaded asynchronously via the Observable standard library. The chart initially displays the full hierarchy, and clicking on any node smoothly animates it to the center while zooming into its descendants. Implemented with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the arcs, with click transitions driven by `transition.attrTween` for geometry and opacity interpolation. The color scale uses `d3.scaleOrdinal` with an interpolated rainbow range, rendered as SVG.

Loading thumbnail…

JS in HTML

This example demonstrates that D3 v7 functions can be used directly within an HTML page, where the body displays the static text "Hello HTML". The page imports D3 from a CDN and logs the `select` function to the console, while separate ES modules (`index.js`, `something.js`, `thing.js`) chain together to form and log the string "Hello A Planet Earth." The visualization highlights modular JavaScript composition and D3’s importability in a plain HTML context.

Loading thumbnail…

D3 selections exploration

Animated line and circle charts explore D3 selections with smoothly varying data. The visualization uses `setInterval` to update at 60 frames per second, generating new points from trigonometric functions via `makeData`. The `vizData` function employs `selectAll` with a data join, while `d3.line` draws a path connecting the circles. Both SVG elements transition as the sine-based positions and radii change over time.

Loading thumbnail…

Java Script Arrays

This example demonstrates JavaScript array manipulation using D3's `ascending` method to sort an array of objects by their `key` property. The code includes commented-out demonstrations of `forEach`, `filter`, `map`, and `reduce` operations, alongside an uncommented `sort` call that orders entries alphabetically. It uses a custom `range` function to generate a numeric array and imports `ascending` from D3 7.6.1, showcasing basic functional programming techniques in a minimal HTML page with no visual output.

Loading thumbnail…

Full Sol LeWitt reproduction with D3 exercice

This example uses D3.js (v7) and SVG to reproduce Sol LeWitt's wall drawing 370. A series of 100 horizontal and 100 vertical lines create a grid, while two custom SVG masks—one inverted—are applied to these line groups. Each mask contains a set of symbols drawn with the D3 `symbol` API, positioned along a central row. The masks define where the grid lines are visible, resulting in the lines appearing only within the symbol shapes, while the separate masks show complementary regions of the pattern.

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This visualization reproduces Sol LeWitt’s Wall Drawing #370 by creating a grid of horizontal and vertical lines whose visibility is altered by two distinct mask patterns. The first mask reveals a row of filled symbols—circles, crosses, and other shapes—while the second, inverted mask hides them, producing a complementary effect across the canvas. The code uses D3 v7 selections, `range()`, `symbols`, and `symbol()` to generate the vector shapes, and SVG `mask` elements to layer the line patterns. The rendering is fully SVG-based, with the artwork sized dynamically to the browser window.

Loading thumbnail…

Sol LeWitt reproduction with D3 method 2

This visualization reproduces a Sol LeWitt wall drawing using two sets of alternating horizontal and vertical striped rectangles, with circular masks applied to create a cross-like pattern at the center. The SVG rendering uses D3 v7’s `select`, `range`, and data joins to generate 100 rects in each group, while custom `mask` elements with black and white fills define the visibility of the overlapping grid.

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js (v7) reproduction of Sol LeWitt’s Wall Drawing #370 uses SVG masks to create a circular viewing window. The code generates 100 horizontal and 100 vertical striped rectangles across the full canvas, with each set masked to reveal either a white circle on black or a black circle on white. The two masks are defined as `mask` and `mask2`, each containing a full-canvas rect and a 200-pixel-radius circle positioned at the center. The `select` and `range` APIs are used to construct the repeating rect elements via joins.

Loading thumbnail…

Fork of D3 v5 Circle-Packing

This D3 v5 circle-packing visualization displays the hierarchical structure of the Flare software system, using circle size to represent the number of metrics for each module. The graph is built from a CSV file using `d3.stratify()` and `d3.pack()`, with node depth encoded through the `d3.scaleSequential(d3.interpolateMagma)` color scale. Circles are rendered as SVG elements, with clip paths and tspan text for leaf labels, while hovering highlights the ancestor chain via the `node--hover` class.

Loading thumbnail…

Sol LeWitt reproduction square inverted

This piece reproduces Sol LeWitt’s Wall Drawing #370 in inverted form, displaying a grid of thin colored rectangles over a central square void. The code builds the scene using SVG, creating two masks: the first hides a horizontal set of 100 bars inside a square, the second reveals vertical bars outside it. Both mask patterns are generated procedurally via JavaScript and the DOM API, with each rectangle sized relative to the browser window, producing the final inverted checkerboard effect.

Loading thumbnail…

Sol LeWitt reproduction square

This example reproduces a Sol LeWitt wall drawing as an interactive web page. It shows a grid of horizontal and vertical stripes that are visible only within a centered square, creating a stark black-and-white geometric pattern. The rendering is achieved with dynamically generated SVG elements, using two SVG `mask` definitions to clip the striped rectangles to the square’s boundaries. The code constructs the masks and stripes procedurally with JavaScript, sizing everything to the full browser window.

Loading thumbnail…

Sol LeWitt reproduction circle inverted

This example reproduces Sol LeWitt’s wall drawing as an inverted, gridded composition: a central circular area shows horizontal stripes, while the surrounding field displays vertical stripes, flipping the visual emphasis of the original artwork. The rendering uses raw SVG created via the DOM API, with two `<mask>` elements (one white-rectangle with a black circle, the other black-rectangle with a white circle) to define which stripes appear inside versus outside the circle. Both horizontal and vertical stripe groups are generated in plain JavaScript loops, each applying one of the masks to alternate the visible orientation.

Loading thumbnail…

Sol LeWitt reproduction circle

This piece reproduces a Sol LeWitt wall drawing by layering horizontal and vertical stripes that are visible only within a circular region at the center of the canvas. The code builds an SVG scene using the `createElementNS` API to construct rectangles grouped into two sets, each masked by a dedicated SVG `mask`. One mask reveals a filled circle over a black background, while the other inverts the mask, producing a negative-space effect where the stripes appear both inside and outside the circle.

Loading thumbnail…

Java Script basics

This example provides a hands-on introduction to JavaScript syntax and core programming concepts using a series of commented code snippets within an SVG element. It demonstrates variable declaration with `const` and `let`, arithmetic operations, incrementing, comparison operators, `for` loops, and different arrow function syntaxes, including implicit returns and the use of parentheses to return objects. The code also illustrates how to create and access object properties and how to define functions that return objects. The examples are executed directly in the browser with `console.log` output, serving as a practical tutorial embedded in an HTML page.

Loading thumbnail…

Pseudo donut plot

This pseudo donut plot presents five labeled segments (A–E) arranged radially around a central hole, approximating a donut chart without using a dedicated charting library. The visualization is built with static SVG elements—circles, lines, and text—rendered in an HTML document, with black and white fills creating the ring illusion. Labels are positioned using precomputed coordinates, while the Share Tech font from Google Fonts styles the text. The example demonstrates a hand-coded SVG approach for a donut-like display, relying on manual geometry rather than data-driven generation.

Loading thumbnail…

Pseudo line chart

A pseudo line chart renders a jagged polyline as a decorative approximation of a data series, using a single SVG `<path>` element with rounded stroke caps and joins. The path connects seven points across a 960-by-500 canvas, alternating between descending and ascending segments to suggest fluctuating values. The visualization is hand-coded in raw SVG, with no JavaScript libraries, and relies on explicit coordinate data in the `d` attribute to define the line’s shape. A white background rectangle provides contrast for the thick black stroke.

Loading thumbnail…

SVG Fundamentals Dynamic landscape

A dynamic SVG landscape cycles through a sunrise-to-sunset color scheme using animated gradients and moving elements. The visualization embeds `radialGradient` and `linearGradient` definitions with SMIL `<animate>` elements to transition the sky and terrain colors over 15-second intervals, while a circle representing the sun shifts vertically. Three layered mountain paths, constructed from raw coordinate data, use these gradients to create depth as they fill with shifting hues, all rendered directly in SVG without external libraries.

Loading thumbnail…

Pseudo bar chart

This pseudo bar chart displays five categories (A through E) as horizontal dark bars of decreasing length on a white background, with each category label placed to the left of its bar. The bars are static rectangles created with inline SVG elements, while the category names are rendered as text elements using the Share Tech font. The chart uses absolute pixel coordinates within a 960×500 viewBox, with bar widths ranging from 570 to 111 pixels. No dynamic data binding or JavaScript libraries are involved; the visualization is purely declarative SVG markup.

Loading thumbnail…

Pseudo bar chart

A pseudo bar chart displays four rectangular bars of varying heights against a white background, using a pale mint fill with black outlines to mimic a categorical comparison. The SVG markup directly defines each bar’s position and size, with no axes or data labels. Rendering relies on plain SVG `rect` elements, laying out the bars at fixed coordinates without any charting library or data-binding logic. This static representation approximates a bar chart’s visual structure while omitting interactivity, scales, or computed layouts.

Loading thumbnail…

Pseudo scatter plot

This pseudo scatter plot uses static SVG circles to approximate the look of a scatterplot without any underlying data or axes. Nine mint-green circles with black borders are positioned at various coordinates across a 960x500 canvas, creating a sparse, organic cluster pattern. The visualization relies on raw SVG elements—specifically `<circle>` with fixed `cx`, `cy`, and `r` attributes—rather than a plotting library or dataset. It demonstrates a minimal, hand-coded approach to simulating a scatterplot's visual form, with no interactivity or dynamic generation.

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shape elements—circles, lines, paths, and rectangles—composed into a static abstract composition. The drawing layers a large teal circle and an orange circle with diagonal and polyline strokes in contrasting colors, all enclosed by a thick rectangular border. The visualization is rendered directly in the browser using inline SVG markup within an HTML page, with styling controlled by SVG presentation attributes for `fill`, `stroke`, and `stroke-width`. No external libraries are used; the code relies solely on the native SVG API.

Loading thumbnail…

Smiley Face CrazyCopepod

A cartoon smiley face is rendered as an SVG graphic, with a large yellow circular head, black outline, white eyes with inner pupils, and an open mouth formed by a curved arc. The visualization is built using React components and D3’s `arc` generator to define the mouth’s shape, while the rest of the face is composed of simple SVG `circle` elements. All positioning is based on fixed pixel constants, and the rendering is handled by React DOM without any additional data input or interaction.