Skip to main content
Log in
S

scheenmi@gmail.com

@mischeen·17 public vizzes

Loading thumbnail…

Reusable Canvas

An interactive scatterplot displays the Iris dataset, plotting sepal and petal measurements against each other. Users can switch the x- and y-axis variables via dropdown menus created with a custom `menu` function. The visualization uses D3 v7 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while reusable modules like `canvasPlot` and `scatterPlot` structure the layout and rendering. SVG elements and transitions animate point movement when axes change, with tooltips showing details on hover.

Dec 30, 2023
Loading thumbnail…

Component Template

This example demonstrates a component-based template for building D3 visualizations. It establishes a structured SVG canvas with configurable spacing for header, axis, and label regions, using CSS variables for theming via the `branding` and `spacing` modules. The `canvasPlot` function generates a background and optional gridlines, while the main title and subtitle are set through a getter-setter pattern. The code relies on D3 v7 selections and joins, with a `plot` module prepared as a scaffold for future chart types.

Dec 18, 2023
Loading thumbnail…

circle packing

An interactive scatterplot of plants, positioned by their minimum and maximum light needs, visualizes the relationship between these two variables. The plot displays circles sized by average plant height, with a grid of rectangles that animate to highlight selections. Using D3 v7, the visualization employs `scaleLinear`, `scaleBand`, and `d3.axisTop`/`d3.axisLeft` to construct axes, while a dropdown menu filters the plotted circles by their maximum light requirement. The SVG renderer draws all elements, with transitions animating the selection highlights.

Dec 13, 2023
Loading thumbnail…

Gradient Grid

A 3×3 grid of rectangles displays a static gradient of grayscale tones. Users select a column value from a menu, triggering a transition that outlines rectangles in the selected column and those before it with a red stroke. The visualization uses D3 v7’s selection, data join, and transition API to animate the SVG elements. The fixed grid data is hardcoded, and the menu is built with D3’s `dispatch` and standard HTML select elements.

Dec 10, 2023
Loading thumbnail…

Barchart

This example shows a bar chart of example data from the d3-graph-gallery website, displaying one categorical value per country. The bars animate vertically with a staggered delay, and value labels fade in above each bar. The chart is built using D3 v7 with SVG rendering, using `scaleBand` and `scaleLinear` for scales, plus `axisBottom` and `axisLeft` for axes. Data is loaded via `csv` from a GitHub raw source, and the layout is managed by a custom spacing module.

Sep 24, 2023
Loading thumbnail…

hexbinchart

This example visualizes a label matrix from an orthographic image as a hexbin chart, using color to distinguish between eight different categorical labels. The code loads data from a CSV file, maps each cell’s label to a color using `d3.scaleOrdinal`, and partitions the points with the `d3.hexbin` API. The SVG output renders hexagonal bins clipped to the chart area, with each bin’s fill determined by the dominant label value, producing a gridded heatmap-like representation of the underlying image data.

Aug 26, 2023
Loading thumbnail…

ortho_picture

This example uses HTML, CSS, and JavaScript to display the text “Hello HTML!” in the center of the page. The message is styled with a font-size of 13em and centered using text-align. The page is minimal, with no external libraries or data sources, relying solely on core web technologies. The rendering is static, showing a single large message without interaction or dynamic behavior.

Aug 16, 2023
Loading thumbnail…

Reusable Treemap

This visualization displays the annual energy production of Courant d'Air for 2021, broken down by energy source (wind, solar, water), municipality, and enterprise. Users hover over rectangular cells to explore the hierarchical data through tooltips with production values in MWh. The treemap uses D3's `treemap` layout, `hierarchy`, and `scaleOrdinal` functions to compute and color the nested rectangles, with SVG rectangles and text labels rendered on canvas. Interactivity includes hover effects that adjust rectangle stroke and fill, plus tooltip transitions.

Dec 13, 2022
Loading thumbnail…

Logo

The visualization displays the text "vis.my.part" as a logo, with two layered orange shadow copies that animate horizontally to create a depth effect against the dark background. The text is rendered as individual SVG elements using D3 v7's data join, with each character positioned via transform attributes. The animation uses D3's transition system with a 2500-millisecond duration to shift the shadow layers by incremental pixel offsets, while the foreground remains static. The design utilizes custom spacing calculations, branding colors from CSS variables, and the Major Mono Display font.

Dec 12, 2022
Loading thumbnail…

Belgian Map

This animated map of Belgium visualizes the number of emergency calls per municipality over time using D3 v7. Fake CSV data is filtered by timestamp and displayed as expanding and contracting bubbles on an SVG map rendered with `d3.geoMercator` and `d3.geoPath`, using a TopoJSON topology. A retro-style digital clock, built with animated text and a clipping mask, indicates the current time step, while a legend shows the bubble scale.

Dec 8, 2022
Loading thumbnail…

Retro Clock

A retro-styled animated clock displays a series of date-time strings, each formatted as "08h15 01.07.2022". The visualization cycles through these markers every second, showing how characters rotate in and out of a rectangular frame using a D3 mask. Built with D3 v7, the SVG text elements transition vertically via `transition.attr()` to simulate a mechanical flip-clock effect. The string data is hardcoded in the script, and the clock aligns to the right within the canvas layout.

Nov 20, 2022
Loading thumbnail…

mask experiments

This example demonstrates the interplay of two complementary SVG masks. It first shows a set of horizontal stripes visible only within a circular window, then displays vertical stripes that are hidden inside the circle while remaining visible outside it. The piece creates a stark geometric contrast between the two masked regions. The visualization is generated entirely with the SVG `mask` element and basic `rect` and `circle` primitives, using white and black fills to define luminosity. The code dynamically constructs one hundred stripes for each orientation, with the masks applied via URL references to `#circle-mask` and `#circle-mask-2`.

Nov 19, 2022
Loading thumbnail…

Dynamic Linechart

This dynamic line chart visualizes U.S. electricity consumption over time, with a growing path and data points that reveal the trend as the animation progresses. The graphic is rendered as an SVG, with the chart updating by increasing a counter that shifts the visible data window. The implementation uses the `d3` library for data parsing, time formatting, and chart construction, including `scaleTime`, `scaleLinear`, and axis functions. Data is fetched from a CSV file hosted on GitHub, and the animation is driven by a `setInterval` callback.

Nov 4, 2022
Loading thumbnail…

Fork of D3 Scatterplot (Dynamic)

This interactive scatterplot displays the Iris dataset, plotting petal length against sepal length for individual flowers. The visualization is rendered as SVG and constructed with D3 version 7, using `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a reusable `scatterPlot()` function following the getter-setter pattern. Data is loaded via `d3.csv` from a remote GitHub gist, with parsing converting string values to numbers. Circles are drawn with configurable radius, fill color, and opacity, accompanied by rotated axis labels for clarity.

Nov 1, 2022
Loading thumbnail…

D3 Dotplot (Reusable)

This dotplot displays the Iris dataset, showing sepal length measurements across three species. Each species is positioned along the x-axis, with individual data points jittered horizontally using `randomUniform` to reduce overplotting while their vertical positions reflect sepal length via a `scaleLinear` mapping. The visualization is built as a reusable D3 module using the getter-setter pattern, rendering SVG circles with axes generated by `axisLeft` and `axisBottom`. Data is loaded as CSV and parsed with d3.csv.

Oct 31, 2022
Loading thumbnail…

join example

This example demonstrates a dynamic visualization of random letter sequences rendered as SVG text elements, with each new sequence replacing the previous one. The code uses the D3 v7 library and creates an SVG canvas, then repeatedly generates shuffled letter arrays using `d3.shuffle` and `Math.random`. It applies the `selectAll("text").data().join()` API to handle enter and update states, coloring new letters green and existing ones gray, while positioning them horizontally with the `attr` method.

Oct 18, 2022
Loading thumbnail…

D3 Starter

This example builds a full-screen SVG visualization of 50 horizontal rectangles arranged in a vertical sequence, with their heights and spacing varying incrementally by index. A circular mask reveals only the central portion of the layered bars, creating a lens-like effect against a white background. The code uses D3 v7 selections and the `range()` generator to bind data, then appends rectangles via `join()`. A dedicated `<mask>` element contains a single white circle positioned at the center, demonstrating basic D3 masking and data-binding techniques.

Oct 15, 2022