L

LudovicGouverneur

@LudovicGouverneur·21 public vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map colored by economic classification, with an ordinal color legend displayed in the corner. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country outlines from TopoJSON data loaded via the `world-atlas` package. Countries are colored using `d3.scaleOrdinal` with `schemeSpectral`, and a custom `colorLegend` component draws circles and text labels. The map supports zooming through `d3.zoom`, and hover states change country fills to red via CSS.

Loading thumbnail…

ColorScale and building a module

This example demonstrates a modular approach to building animated data visualizations with D3 v5. It constructs a grid of 16 tiles, each containing a layered composition of circles with varying radii and colors, creating a bubble-like pattern. The visualization uses ES6 modules, with a custom `BuildTiles` function handling tile creation through SVG rectangles and text elements. Circle elements are animated using D3's `.transition().duration()` method to move from the center to their grid positions. The composition also includes a zoom interaction via D3's `zoom` event handler.

Loading thumbnail…

Color And Size Legend Ludo

This example demonstrates two distinct legend designs for mapping data to visual encodings in D3 v5: a qualitative color legend and a combined size and color legend. The qualitative legend assigns categorical colors to fruit names using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii, with a corresponding `scaleOrdinal` color scale. The code implements reusable legend components (`colorLegend.js` and `sizeLegend.js`) that update via D3's select-merge-append pattern. The size legend animates its circle positions and text labels over 1000 milliseconds using `.transition().duration(1000)`, while both legends render as SVG elements with `<circle>` and `<text>` marks.

Loading thumbnail…

refactorBubble

A bubble game renders concentric, ray-defined circles within a grid of animated tiles. The D3 v5 code uses `select`, `range`, and `transition` to grow rectangles and multiple colored circles with differing radii, creating a layered effect. The SVG background is dark, and circles change fill color on hover via CSS. The visualization is driven by specified data arrays for levels, columns, and ball counts, with zoom support via `d3.zoom`.

Loading thumbnail…

Color Legend

This example demonstrates how to create color and size legends in D3 v5 using reusable functions. It shows ordinal color scaling mapping fruit names to pastel colors, and a square-root size scale with transitioning circles. The SVG rendering includes animated transitions on the size legend, while text labels accompany each legend entry. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3's selection join pattern with `.enter()` and `.merge()`.

Loading thumbnail…

Buble game

Eight colored bubbles animate from a central point onto a grid of four by two light grey tiles, with each tile labeled by its card ID. Nested circles in shades of blue, white, yellow, and green reveal a concentric layered design, and a zoom interaction is attached to the root group. The example uses D3 v5 selections, `transition` for the entrance animations, and the `zoom` API to enable pan and zoom on the entire SVG scene.

Loading thumbnail…

add Menus

Animated D3 scenes show a grid of multi-layered circular targets made from nested circles in shades of blue, green, and yellow. Each component moves from the screen center to its final grid position via D3 transitions. The example builds menus with the custom `dropdownMenu` function, while circle radii are calculated algorithmically per level. Rendering uses SVG elements and includes a zoom feature that applies a transform to the graphics group.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates key special cases in D3's general update pattern: appending a new element, modifying an existing one, and removing one. Five apples initially render as circles with labels; after one second an apple is removed, two seconds later one apple becomes a lemon, and after three seconds another apple disappears from the middle. The code uses d3.scaleOrdinal for color and radius mapping, selection.enter, merge, and exit methods within a custom fruitBowl function, rendering to SVG.

Loading thumbnail…

181202_02_ Put some balls in

This example demonstrates how SVG viewport and viewbox scaling affect the rendering of graphical elements by dividing a single `<svg>` into a grid of paths, circles, and rectangles. The visualization shows a 7-by-30 grid of green and red grid lines, overlaid with blue circles and yellow squares, which can be interactively zoomed and panned using d3.zoom. The code uses D3 v5 selections (`select`, `selectAll`, `data`, `enter`) to generate the SVG elements dynamically, with all styling defined in CSS. The zoom functionality applies a transform to the entire SVG, illustrating how the viewport interacts with coordinate systems.

Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

Loading thumbnail…

181202_04_ Nice hoevering effect

A grid of colored shapes on a large SVG canvas demonstrates a hovering effect, with white rectangles and concentric circles in steel blue, blue, dark blue, yellow, and light green arranged across vertical and horizontal green and red lines. The visualization divides the viewport into a parameterized grid using D3 v5's selection API, appending paths and circles via `append`, while styling lines through CSS classes. It uses `d3.zoom` to enable interactive panning and zooming, which updates the group's transform attribute based on the zoom event.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles scaled by linear axes. Two dropdown menus allow users to select which column maps to the x-axis and y-axis, dynamically updating the visualization on change. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while `select` and `transition().duration(2000).delay()` animate points moving between positions. The SVG rendering includes axis labels and tick marks styled via CSS.

Loading thumbnail…

181202_02_ Put some balls in

This example shows how to organize SVG elements within a viewport by dividing a single SVG element into four sub-elements using D3 v5’s selection module. It generates a grid of vertical and horizontal paths, along with steel-blue circles, using `d3.range` and data joins. The viewBox dimensions automatically scale with the number of lines, and the code applies a zoom behavior via `d3.zoom` to transform a group element. Styling for the paths is defined in CSS, while circle positions and radii are computed from the grid parameters.

Loading thumbnail…

181202_02_ Divide window_01

This example demonstrates how SVG viewport and viewBox attributes control the scaling and positioning of graphical elements within a designated area. It displays a grid of vertical and horizontal paths, along with a row of circles, all rendered within a single SVG element. The code uses D3 v5 selection methods to bind data and append elements, while CSS styles define the line colors. The viewBox is not hardcoded but is derived from parameterized dimensions for the grid and shapes.

Loading thumbnail…

181202_02_ Divide window

Two identically sized SVG viewports render grids of vertical and horizontal lines using D3’s data join with `selectAll`, `data`, and `enter`. Each grid’s line count is set by parameters, and the viewBox dimensions are derived from those counts rather than hardcoded. The example demonstrates how varying the SVG `width` and `height` attributes changes the display of the same coordinate system, while CSS classes style the lines separately from the geometry.

Loading thumbnail…

181202_01_Viewport

This example demonstrates how the SVG viewport and viewBox interact to scale a coordinate system. A set of vertical and horizontal path elements, drawn as colored lines, is defined within a viewBox of “0 0 100 50” and rendered inside an SVG element with a blue border. The number of horizontal and vertical lines is parameterized, and their positions are calculated dynamically using D3’s `range` function. The code uses D3 v5 to append paths to the SVG, while line styling is specified in an external CSS file.

Loading thumbnail…

Fun with Balls V00_01

The visualization presents a dynamic scene where colored balls appear and settle into a row. An initial blue circle is drawn directly on the SVG canvas at a position derived from its random identifier. Subsequently, a set of fruit-themed objects, either red apples or teal lemons, are rendered as larger circle and text pairs. These elements use `d3.scaleOrdinal` for consistent color and radius mappings per fruit type. The scene’s layout and styling are managed through a custom `fruitBowl` module that leverages D3’s selection and transition APIs for updates, though the current view focuses on the initial static arrangement.

Loading thumbnail…

Fruit - Update Pattern - Nested

Five fruit icons animate through a sequence of data changes, demonstrating D3's nested update pattern. The visualization shows apples and lemons repositioning, changing color and radius, and being removed from the group over timed intervals. Using d3.scaleOrdinal for color and size mapping, the code applies transitions to enter, update, and exit selections. The example relies on selection.merge, transition.duration, and group elements to synchronize circles with their text labels.

Loading thumbnail…

Fruit - Update Pattern - Nested

Five fruit bowls render as SVG circles and labels, using an update pattern to animate changes to the data array. The example cycles through eating apples and replacing one apple with a lemon, with transitions on position, fill color, radius, and text. The code uses D3 v5 selections with enter, merge, and exit, applying `transition().duration()` for staggered animations. Fruits are generated randomly, and nested selection patterns handle updates to circles and text elements within each group.

Loading thumbnail…

Final Project Week 2

This interactive visualization displays two U.S. maps comparing historical minimum wage data across states, with a line graph showing trends over time. Users click on states to select or deselect them, which updates the color legend and line graph accordingly. The maps use d3.geoPath with a custom geoTransform for projection, while the line graph employs d3.line with curveBasis. Data comes from CSV files and the US Atlas TopoJSON, rendered using D3 v5’s SVG output.

Loading thumbnail…

Auto MPG Summary

This example displays a text-based summary of the Auto MPG dataset from the UCI Machine Learning Repository. It shows the number of rows, columns, and data size in kilobytes, followed by the first ten rows as a JSON string. The visualization uses d3.select to append pre elements to the body, and d3.csv to load the data from a CSV file. The page is styled with a black background and green monospace text, matching a terminal aesthetic.