Skip to main content
Log in
G

Gabriel Ing

@gabriel-ing·23 public vizzes

Loading thumbnail…

psuedo-bubblechart

This example displays a single red circle with a dashed stroke and the text "AG(50)" beside it. The visualization is constructed using JavaScript with the D3 library, which appends SVG elements to an HTML page. The circle is centered within a 600 by 600 pixel canvas, using a stroke-dasharray to create a pseudo-bubblechart effect. The code directly manipulates SVG attributes like `cx`, `cy`, `r`, and `stroke-width` to define the graphic, with the text element positioned and styled via D3's selection and chaining methods.

Jun 4, 2025
Loading thumbnail…

dragPractice

A playful drag-and-drop exercise presents a teardrop-shaped node that users can move across a bordered playing field. The node responds to pointer events, translating to follow the cursor while also rotating based on its movement. Built with D3 v7, the visualization uses SVG for rendering and custom drag handlers to manage both position and rotation updates. A color scale is generated programmatically, and the interface includes a tooltip for additional interaction.

Feb 20, 2025
Loading thumbnail…

colorPalettes

This interactive visualization showcases color palettes generated by rotating the hue of a base color. The view displays six columns, each containing nine shades that transition from light to dark via a linear scale, alongside a row of original base colors. Users can click any color square to copy its hex value to the clipboard, which triggers a temporary tooltip confirming the action. Built with d3.v7, the SVG graphic uses d3.hsl to manipulate hue, d3.scaleLinear to interpolate lightness and saturation, and d3.select for DOM interactions.

Feb 17, 2025
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between Total Cost and Total Profit from a 100 Sales Records dataset, loaded via `d3.csv` from a GitHub gist. Each circle represents a data point, with an interactive tooltip displaying the country and axis values on hover. The visualization uses D3.js v7 within a React framework, rendering SVG elements with a linear scale for both axes and applying a hover effect that changes point color to orange. The tooltip is implemented by appending an HTML div and manipulating its position and opacity through event handlers.

Feb 14, 2025
Loading thumbnail…

Fork of Tidied Category grouped Bubble Chart

This example shows grouped bubble charts with a categorical color variable that alternates between Item Type and Region every 200 seconds. Built with React and d3.v7, it loads CSV sales data via d3.csv, aggregates units sold with d3.rollup, then applies d3.pack and d3.hierarchy to position bubbles. Interactive tooltips appear on mouseover, and SVG text labels wrap using a custom function. Animation occurs through the setInterval-driven color and data updates.

Feb 14, 2025
Loading thumbnail…

Fork of Fork of Tidied up Bubble Chart

This example creates a bubble chart using D3.js v7's `d3.pack` cluster layout and `d3.rollup` to aggregate total profit by region from a CSV sales dataset. The visualization renders SVG circles with `d3.scaleOrdinal` color mapping based on region, while the bubble radius is determined by the summed profit values. Labels inside each bubble wrap text with a custom `wrap` function, and a tooltip div provides hourly profit details on mouseover. The chart updates hover opacity and tooltip position based on pointer events, with data loaded via `d3.csv` and rendered in a React-free HTML page.

Feb 6, 2025
Loading thumbnail…

Fork of Tidied up Bubble Chart

This example shows the total profit from a sales records dataset, grouped by region and visualized as a bubble chart, where each circle’s area encodes profit and its color encodes region. The chart uses D3’s `pack` layout for hierarchical bubble clustering and `scaleOrdinal` for color mapping. Hovering over a circle triggers a tooltip with the country name and profit value, implemented via D3’s selection and event handling. The visualization renders to an SVG canvas within a React framework, using `d3.csv` to load and parse the external data file.

Feb 4, 2025
Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales records by country, with circle size representing total profit and color encoding country. Each bubble displays its country name as a label. The visualization uses D3 v7's `d3.pack` layout and `d3.hierarchy` to calculate circle positions and sizes from the CSV data. Interactive tooltips appear on mouseover using HTML and D3 event handlers. A save button clones the SVG and downloads it as a file, preserving computed styles. Data is loaded via `d3.csv` from a gist URL, and the chart is rendered as an SVG in a React-based HTML page.

Feb 4, 2025
Loading thumbnail…

Fork of Stacked-bar-example

This example fetches a CSV dataset of categorical, numeric, and ordered data from an external GitHub repository, then groups the parsed rows by the `name` column using `d3.group`. The code sets up an SVG canvas with fixed margins and dimensions but currently only logs the grouped statistics to the console; it does not yet render any bars or visual elements. The visualization relies on D3 v7’s `d3.csv` for asynchronous data loading and standard SVG manipulation via the D3 selection API.

Feb 3, 2025
Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This visualization presents a clustered bubble chart where each circle represents a sales record, with the circle’s area encoding the total profit and its cluster determined by the country of sale. Built with D3 v7 and React, it loads a CSV dataset from a GitHub gist, then uses `d3.pack()` with a hierarchy and sum operation to arrange the circles into a packed layout. Interactive tooltips appear on hover, displaying the country and profit via the `mouseover` event, updating an HTML `#tooltip` element with absolute positioning. The circles and country labels are rendered as SVG elements, with circle size scaled by profit to reveal regional sales patterns.

Jan 30, 2025
Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This example demonstrates a clustered bubble chart with interactive tooltips, using sales data from a CSV file. It visualizes two facets of the data side-by-side: one chart sizes bubbles by "Total Profit" and another by "Total Cost", with each bubble labeled by country. The visualization uses D3 v7's `d3.pack()` layout algorithm to create the cluster arrangement, and implements custom tooltips via HTML elements that display country and profit or cost details on mouseover. The code employs D3's `d3.csv()` to import data from a remote gist, and renders resulting SVG circles and text labels within a React framework, with styling applied through CSS.

Jan 30, 2025
Loading thumbnail…

Stacked-bar with own data

A stacked bar chart visualizes the total distance of physical activities per year, with bars segmented by sport type (Run, Ride, Walk, and Hike combined). The chart uses an SVG rendering pipeline with D3 v7’s `d3.csv` for data loading, `d3.group` and `reduce` for aggregation, and `d3.stack` to compute stack offsets. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a categorical `d3.scaleOrdinal` assigns colors to the four activity categories. The data originates from a personal fitness tracking CSV, with distances converted from meters to kilometers.

Jan 30, 2025
Loading thumbnail…

Stacked-bar-example

This stacked bar chart displays the distribution of three subgroups across multiple categorical groups, with each bar segment colored distinctly to show proportional composition. The visualization uses D3 v7 to load CSV data via `d3.csv` from a GitHub-hosted dataset, then applies `d3.stack()` and `d3.scaleBand()` to structure and position the bars. Colored segments are rendered as SVG rectangles using `d3.scaleOrdinal` for color mapping, with axes generated through `d3.axisBottom` and `d3.axisLeft`.

Jan 30, 2025
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment, a blank slate that renders the text “Hello World!” inside a dynamically sized container. The code exports a `main` function that uses the container’s dimensions, and features interactive widgets enabling real-time hot reloading—such as alt-dragging a numeric value to adjust font size. It highlights the simplified entry point without an `index.html` file, using immutable state updates via `setState`. The visualization is built with plain HTML and CSS within a JavaScript function, showcasing the tool’s interactive coding capabilities.

Jan 29, 2025
Loading thumbnail…

Bubble Chart - Clustered with Saving

A clustered bubble chart displays the price of Big Macs in US dollars across various countries, using the d3.pack() layout to group the data points. Each circle represents a country, with its area proportional to the price, and labels overlaid in white text. Hovering over a circle triggers a tooltip showing the country name. The visualization loads data from a CSV file using d3.csv and renders as an SVG with basic animation, and a button allows downloading the chart as an SVG file.

Jan 29, 2025
Loading thumbnail…

Fork of Gubs Intro course

A fork of an introductory course example renders dummy categorical data as a bubble chart using the d3 v7 `pack` layout on an SVG canvas. Each of four groups (A–D) maps to a circle with area proportional to its `total` value, while the `percentResponse` field is logged but not visualized. The code selects the `#chart` div, appends an SVG, and applies the hierarchical circular packing algorithm to position and size the leaves.

Jan 28, 2025
Loading thumbnail…

Fork of practice_with_h

This example demonstrates a circular packing visualization that animates between two views of multi-group data, switching every two seconds between total counts and percentage responses. Circle radii and positions smoothly transition using D3's transition API with a 200-millisecond duration and linear easing, while group labels remain centered within each circle. The visualization is built with D3 v7, using the d3.pack layout algorithm to arrange nodes as non-overlapping circles, and SVG rendering with CSS hover effects. A JavaScript timer toggles the data metric, causing the packing to recalculate and animate the updated positions and sizes.

Jan 20, 2025
Loading thumbnail…

practice_with_h

This example shows a circle-packing visualization of eight data groups labeled A through H, where each circle’s area is proportional to a numeric value. Every two seconds, the visualization toggles between displaying the group’s total and its percentResponse metric. Using D3 v7’s `d3.pack` and `d3.hierarchy`, the circles animate smoothly to new positions and sizes via a `d3.transition` with a linear ease. The code renders to SVG, updating circle radii and text labels for the current value on each cycle.

Jan 20, 2025
Loading thumbnail…

Fork

A continuous, animated line traces a winding path across the screen, its shape evolving as new points are added. The line is drawn from a series of circles, whose y-coordinates are calculated from a combination of sine and cosine functions that change over time. Built with D3 v7, the visualization uses `d3.select`, `d3.range`, and `d3.curveBumpX` to generate the path. The rendering updates at 60 frames per second via `setInterval`, incrementally growing the line's length before resetting the animation cycle.

Dec 13, 2024
Loading thumbnail…

Fork of Fork

A fork of a fork of a fork animates a branching tree structure that continuously splits and grows across the screen. Using D3 v7’s `d3.forceSimulation`, the code computes node and link positions for a dynamically expanding network, with each branch spawning new child nodes over time. The SVG rendering updates via D3’s data join and transition methods, while `d3.zoom` and `d3.drag` handle pan, zoom, and node interaction. The example is fully self-contained, generating its data procedurally from a random walk rather than loading external datasets.

Dec 13, 2024
Loading thumbnail…

Fun-animation

This example shows a screen-filling SVG animation of thin vertical lines that pulse outward into thicker bars over time. A circular mask reveals the animation at the center, with the mask radius itself expanding and contracting rhythmically. The code generates lines with a gradient color scheme based on their horizontal position, skipping every third line, and animates a subset of lines using SVG’s native `<animate>` element. The visualization uses raw JavaScript and the SVG DOM API, with no external libraries.

Dec 13, 2024
Loading thumbnail…

D3_one

A vertical gradient of colored rectangles fills the screen, with hues shifting from dark to light across the horizontal axis. The visualization uses D3.js (`d3.select`, `d3.range`) to generate and position the rectangles, each with a fixed width and a computed RGB fill. A circular mask, created with `d3.symbol` and applied via SVG `mask`, reveals only the central area of the gradient, leaving the rest dimmed. The code sets up an SVG canvas sized to the browser window and animates a smooth transition on the body element over 10 seconds.

Dec 12, 2024
Loading thumbnail…

Fork of HTML Starter

An animated SVG scene presents two rectangles against a gradient-filled background, demonstrating interactive styling and motion. The larger rectangle uses a dynamically shifting linearGradient that cycles through orange, green, and purple via SVG `<animate>` elements. A smaller rectangle employs a continuously changing gradient offset, while hovering over any rectangle triggers a CSS `transform: scale(2)` effect, and a red stroke outlines the first shape. The plain HTML page relies on inline CSS and native SVG animation, with no external libraries.

Dec 12, 2024