C

Caroline Ghisolfi

@carolineghisolfi·19 public vizzes

Loading thumbnail…

Data with flourish

A timeline of events is presented as a scrollytelling story, where text steps on the left trigger an embedded Flourish story on the right. The example uses the Scrollama library and D3.js to manage the scroll-driven navigation. The Flourish iframe is advanced through its embed API based on the active step, while D3 handles element selection for Scrollama's configuration. The data source is the embedded Flourish story, with the timeline's specifics not defined in this code.

Loading thumbnail…

Scrolling Sections

Scrolling Sections links a set of text annotations to a fixed visualization panel using a custom scroller built on D3's event dispatcher and `d3.bisect`. As the user scrolls, the scroller calculates the current section index and emits `active` and `progress` events, which the visualization uses to update its display. The page layers scrolling text over a fixed SVG area via CSS `position: fixed`, with each section providing narrative context for the animated visualization.

Loading thumbnail…

JS Array Basics

This example demonstrates fundamental JavaScript array operations through console-logged examples. It shows how to generate a numeric range and apply array methods including filter, forEach, map, sort, and reduce. The code also illustrates how reduce can transform an array into an object by accumulating key-value pairs. All operations are performed in plain JavaScript with no external libraries or data sources, using a hardcoded array of numbers and sample entries.

Loading thumbnail…

D3 Random Abstract Art

This example generates a grid of 100 colored rectangles whose fills use randomized pairs from the d3 `schemeCategory10` palette via `d3.scaleLinear`. As the mouse hovers over a square, that rectangle and its entire row are re-appended to the SVG to bring them to the foreground, while the square’s width and height are scaled up or down by a factor of three or four. Clicking anywhere reloads the page to generate a fresh random composition. The visualization is built with D3 v6 selections and SVG rendering, and includes a small instruction bar.

Loading thumbnail…

LeWitt Repr with D3

This example uses D3 v3 to recreate Sol LeWitt’s geometric wall drawings as an interactive SVG. Two alternating stripe patterns—horizontal and vertical—are clipped by two masks, each divided into alternating black-and-white bands. Within each band, a different D3 symbol (from `d3.symbols`) appears in the inverted color, creating a shifting mosaic of shapes and lines. The SVG scales to the full window, and a CSS `:hover` rule slowly transitions the page background to green over three seconds.

Loading thumbnail…

LeWitt Repr - Custom

This visualization reproduces a Sol LeWitt-inspired drawing by dividing the screen into five rectangular quadrants, each containing dense sets of thin, angled line strokes. The composition shows a systematic pattern of repeated ruled lines that appear to radiate from or rotate around each quadrant’s center. The code uses D3 v6 selections with `join()` to append groups and rectangles, applying SVG masks to clip line patterns within each quadrant. Lines are generated from a range of 1000 values, positioned horizontally and rotated via `transform`, with the canvas sized to the full window dimensions.

Loading thumbnail…

LeWitt Repr

This interactive SVG reproduction of Sol LeWitt’s wall drawing uses masked striped rectangles to create a checkerboard pattern overlaid with a central circular window. The page renders 100 horizontal and 100 vertical stripes, each 10 pixels thick, layered across the full viewport. Two SVG masks—one with a white circle on black, the other inverted—selectively reveal stripes inside or outside the circle, mimicking the artist’s geometric style. A CSS hover transition on the circular area changes its fill to green over three seconds, adding subtle interactivity.

Loading thumbnail…

Javascript A6

This example demonstrates a blank interactive SVG canvas where a single rectangle with the ID `change-hover` transitions its fill color to green over three seconds when hovered, using CSS transitions. The page sets up basic JavaScript syntax—variables, objects, loops, and functions—commented out for educational reference, but no active D3 or data visualization code executes. The rendering is plain SVG embedded directly in HTML, with no external data sources or libraries beyond standard CSS and JavaScript.

Loading thumbnail…

Pseudo Bar Chart

This example shows a simple bar chart made from black rectangular bars labeled A through D, with each bar’s length decreasing from top to bottom. The chart is drawn using raw SVG `<rect>` and `<text>` elements in an inline `index.html` file, with no external data source. Styling relies on CSS for font family and size, and the SVG is set to a fixed 960 by 500 viewBox with white background. The bars are positioned manually via x and y attributes, and the chart demonstrates basic SVG shape rendering without any JavaScript libraries.

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered directly on an SVG canvas. It also shows a hover-triggered CSS transition that gradually changes a rectangle’s fill color to green, alongside a nested SVG with multiple ellipses and an animated circle that moves vertically using the SVG `<animate>` element. The code uses plain SVG markup with inline styling and attributes, such as `fill`, `stroke`, `stroke-width`, and `values` for animation, without relying on external libraries. The composition serves as a raw tutorial of core SVG capabilities.

Loading thumbnail…

SVG Sun Setting

A demonstration of SVG shapes animates a sun setting over layered desert dunes. The scene uses a sky gradient that shifts from aliceblue to indigo and back, while a white circle moves vertically downward and upward. The dunes are drawn as cubic and quadratic Bezier paths with rotating linear gradients. The animation runs via SVG `<animate>` elements, with no external libraries, relying solely on native SVG markup.

Loading thumbnail…

Visualizing data with React and D3

This example uses React and D3 v7 to render a color wheel from a CSV of named CSS colors. The code loads the dataset with `d3.csv`, computes the pie layout with `d3.pie`, and draws arcs with `d3.arc`, mapping each color’s hex value to its slice’s fill. The SVG is generated declaratively inside a React component, using `useState` and `useEffect` to manage asynchronous data fetching, with a loading state displayed before the visualization appears.

Loading thumbnail…

Vega-Lite API Bar Chart

This bar chart visualizes the top five religions by country, with bars color-coded by religion and a tooltip displaying the religion name for each segment. The example demonstrates the Vega-Lite API for declarative chart construction, using `vl.markBar()` and `vl.encode()` to define marks and channels. It loads CSV data via `d3.csv` and renders with Vega-Lite, compiling to Vega for SVG output. The chart is customized through a config object that adjusts axis styling, font sizes, and colors, while the layout adapts to the window size.

Loading thumbnail…

Vega-Lite API Line Chart

This example renders a line chart of San Francisco weekly temperatures using the Vega-Lite API within a D3.js framework. The visualization displays temperature trends over time, with tooltips showing exact temperature values on hover. The code uses `vl.markArea` with encoded x- and y-fields, pulling data from a CSV via D3's `csv` loader. It integrates Vega, Vega-Lite, and the Vega-Lite API for declarative visualization, while customizing axis and label styling through a separate config file.

Loading thumbnail…

Vega-Lite API Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg CSV dataset, showing the relationship between horsepower and origin on x and y axes. Each point represents a car model, with tooltips revealing the car name. Built with Vega-Lite API in conjunction with d3.csv for data loading, the visualization uses vega and vega-lite for chart specification, vega-tooltip for interactive hover details, and applies custom styling through a config object to adjust axis and label appearance.

Loading thumbnail…

Loading data with React and D3

A React and D3 demonstration loads a CSV of CSS named colors and displays a summary of its dimensions—first the row count, then the column count—inside a large <pre> tag. The example uses React's useState and useEffect hooks to manage and trigger the asynchronous data fetch, while D3's csv parser retrieves the remote dataset. The rendered text updates from “loading...” to the final statistics once the data arrives, highlighting a minimal pattern for integrating D3 data loading into a React component.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse remote CSV data using D3 v7, displaying the dataset’s row and column counts in large text. The code fetches a CSV file of CSS named colors from a GitHub gist via `d3.csv()`, which automatically parses the data into JavaScript objects. A secondary approach using the Fetch API with `d3.csvParse()` is also shown as a commented alternative. The parsed data is logged to the console, and the row and column totals are rendered inside a `<pre>` element.

Loading thumbnail…

Mouse Follower

A 960-by-500 SVG circle follows the mouse cursor across the canvas, its center updating in real time to match the pointer’s client coordinates. Built with React and ReactDOM, the example uses the `useState` hook to store the cursor position and a `useCallback`-wrapped `onMouseMove` event handler to update it. The SVG circle is rendered with a fixed radius of 30 pixels, demonstrating state-driven drawing within a minimal React component.

Loading thumbnail…

Smiley Face

A gallery of 18 smiley faces is generated, each with randomized facial features including eye separation, eye radius, stroke width, mouth radius, and mouth width. The faces are rendered as SVG elements within a React application, constructed from modular components like `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses the D3 `arc` API to draw a half-circle path, while the React code creates a grid of faces with varied parameters.