Skip to main content
Log in
A

Albert

@imbrikis·12 public vizzes

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas, changing its fill color randomly with each click. Built with React hooks `useState` and `useCallback`, the component tracks pointer coordinates via the `onMouseMove` event and updates the circle's `cx` and `cy` attributes. Mouse clicks trigger a `setColor` update that generates a random HSL hue value, demonstrating reactive SVG rendering within a React framework.

Nov 24, 2021
Loading thumbnail…

D3 Force Directed Graph (Starter)

Three circles connected by black lines form a small force-directed graph. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to gradually push the linked nodes apart; each tick increments the link distance until it reaches 100. Node positions update directly as SVG `circle` and `line` attributes via the tick handler.

Apr 7, 2021
Loading thumbnail…

Shapes with SVG and CSS

This example creates a simple animated face using SVG shapes and CSS styling. The face consists of a yellow circle with black stroke, two eyes, eyebrows, and a mouth path drawn with the `arc` function. The eyebrows animate up and down using D3’s `transition` method over two-second intervals. The code uses D3 v6 selections and SVG attributes to position elements relative to the center of the 960x500 canvas, with a standalone HTML page linking to a stylesheet and bundled JavaScript.

Apr 4, 2021
Loading thumbnail…

Cars Report

This example displays a list of cars filtered by price, showing each car's year, make, model, and price. The page initially shows a loading message, then presents the report after a simulated two-second delay. The code uses JavaScript with JSON parsing for inline car data, a Promise-based `getCars()` function to mimic asynchronous data retrieval, and `filter` and `map` operations to generate the formatted text output. The interface is styled with the Poppins font from Google Fonts.

Apr 4, 2021
Loading thumbnail…

D3-izzle

This example maps country-level mortality statistics into a vertical text listing, grouping rows by nation via `d3.group` and appending SVG `<g>` elements for each entity. The visualization currently logs each row’s values to the console, with placeholder text intended to display yearly terrorism-related deaths from the CSV. It uses D3 v6 for data loading (`d3.csv`) and selection/joining, rendering to an SVG container with fixed dimensions. The data source is an Amnesty International and Global Burden of Disease dataset covering multiple causes of death across years.

Mar 28, 2021
Loading thumbnail…

D3.js in action - Section 1 - Ch 3

This example visualizes World Cup team statistics across multiple metrics, with each team represented as a circle positioned along a horizontal axis. Clicking a button adjusts the circle radii and fill colors to reflect the selected attribute, while hovering highlights teams from the same confederation. The visualization uses D3.js v6 with SVG transitions to animate changes, and employs scales such as `d3.scaleQuantize` and `d3.scaleLinear` to map data values to colors and sizes, with color interpolation via `d3.interpolateHsl`. Data comes from a CSV file containing team performance records.

Mar 26, 2021
Loading thumbnail…

D3.js in action - Section 1 - Ch 1 and 2

This example visualizes Twitter engagement by plotting tweets as circles on an SVG canvas, with x-position determined by tweet time using `d3.scaleTime`, y-position by impact score (favorites plus retweets) via `d3.scaleLinear`, and circle radius and fill color mapped from the same metric with additional scales. It loads data from a local `tweets.json` file using `d3.json`, demonstrates data joins with `enter()` and `exit()` selections to update circles based on filtered data, and uses `d3.group` for data manipulation alongside CSV parsing of `cities.csv` that is fetched but unused.

Mar 26, 2021
Loading thumbnail…

D3 Starter

This example displays a blank 960-by-500-pixel SVG canvas with a light blue border. The visualization uses the D3.js v6 library, specifically the `d3.select` API, to target the SVG element by its `id` attribute and apply a CSS border style. The page loads D3 from a remote CDN and renders the output as an SVG graphic, though no data or marks are drawn beyond the styled container.

Mar 25, 2021
Loading thumbnail…

D3 Force Directed Graph

This force-directed network visualization uses D3’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes in an SVG canvas. It displays a hierarchical dataset from `data.js`, where main nodes (e.g., Gemini, Leo) link to colored child and leaf nodes, with link distances defined per relationship (e.g., `MAIN_NODE_DISTANCE`). Nodes are draggable via D3’s `drag` interaction, and the simulation updates circle, text, and line positions on each tick. Colors come from a Paletton-generated palette in `colors.js`.

Mar 20, 2021
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart displays the hierarchical structure of the Flare software system, using segment size to encode file sizes and color to distinguish top-level categories. Built with D3 v5, it renders as SVG and responds to user clicks on segments to zoom in and out of the hierarchy. The visualization uses D3’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs to compute the layout, with animated transitions handled through `d3.transition` and `transition.attrTween` for smooth rescaling of arcs and labels. The data originates from the Flare dataset’s JSON representation, sourced from Observable.

Mar 19, 2021
Loading thumbnail…

Fork of GraphLayout (zoom)

This fork of the GraphLayout example displays a zoomable, force-directed graph using D3.js v5. Node positions come from a CSV file and are drawn as colored circles on an SVG canvas, while edges are rendered as lines. The node color encodes a categorical `k` value via `d3.scaleOrdinal` with a `schemeRdYlGn` color scale. Users can interact with the graph using the `d3.zoom` function to pan and scale the layout.

Mar 18, 2021
Loading thumbnail…

D3 Force Directed Graph - Music Artists

A force-directed graph maps music artists like Korn and TR/ST to colored nodes, with child nodes representing individual albums and smaller leaf nodes for tracks. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while links are colored per artist. Nodes are draggable via `d3.drag`, with SVG circles, lines, and labels rendered from `data.js` and styled in `index.html`. Palette colors come from a generated `colors.js` module.

Mar 18, 2021