Skip to main content
Log in
H

hquazza@gmail.com

@hquazza·28 public vizzes

Loading thumbnail…

Bubble Heatmap - Dummy Data

This bubble heatmap visualizes relationships between themes and drivers using color-coded circles, where size indicates importance and color encodes sentiment (positive, mixed, or negative). Built with D3 v7, the SVG chart includes interactive axis labels that filter and highlight related data points on click, while hover tooltips display descriptions. The visualization uses `d3.scalePoint`, `d3.scaleOrdinal`, and transitions for smooth opacity changes.

Feb 28, 2025
Loading thumbnail…

Template Attempt #1 - Clustered Bubble Chart

This clustered bubble chart visualizes total and unit costs and total profit aggregated by region, with bubble size and opacity encoding the selected financial metric. Users can switch metrics via a dropdown menu, triggering a rebuild of the chart using D3 v7’s `d3.pack()` and `d3.hierarchy()` layout. Hovering reveals tooltips with exact values, while labels inside bubbles wrap using a custom text-wrapping function. The SVG renders with D3 selections, and data comes from a CSV of 100 sales records.

Feb 28, 2025
Loading thumbnail…

Sol Lewitt - D3 1 shape

This example reproduces a family tree as an interactive force-directed graph, loading data from a CSV and arranging nodes with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`. Draggable circles represent individuals, with lines showing parent–child links; hovering reveals a tooltip via D3's `title` element. The code builds a hierarchy from flat CSV rows and uses D3 v7's `d3.csv` and `d3.hierarchy` to structure the data before simulation.

Feb 21, 2025
Loading thumbnail…

Category clustered Bubble Chart

This example shows a clustered bubble chart where circles are grouped by color-coded regions, with bubble size representing total cost and labels indicating country. The visualization uses D3.js v7 with a d3.pack layout to position circles within a hierarchical cluster structure, processing data from a CSV file loaded via d3.csv. SVG renders the circles and text labels, while a custom HTML tooltip displays country, region, and cost details on mouseover, with d3.scaleOrdinal mapping region values to a color palette.

Feb 19, 2025
Loading thumbnail…

Scatter Plot

This scatter plot visualizes country data by plotting total cost on the x-axis against total profit on the y-axis, with each point representing a sales record. Hovering a circle changes its fill to orange and displays a tooltip with the country, cost, and profit values, implemented using `d3.select` and event handlers. The chart uses `d3.csv` to load remote data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to render scales. Data points are drawn as SVG circles via the `join` operator, with a legend title styled using a CSS class.

Feb 14, 2025
Loading thumbnail…

Tidied Category grouped Bubble Chart

This chart visualizes sales data grouped by item type, with each bubble’s size representing total units sold and its color indicating the product category. Hovering over a bubble reveals a tooltip with the exact category and unit count. Built with React and D3 v7, the code rolls up the CSV data, applies an ordinal color scale, and uses `d3.pack()` to generate a circular treemap layout. All circles and labels are rendered as SVG elements, and a custom `wrap()` function formats the category names.

Feb 4, 2025
Loading thumbnail…

Category grouped Bubble Chart

This category grouped bubble chart displays total profit by country, with bubbles colored by region. Using D3.js v7, the visualization employs `d3.rollup` to aggregate sales data, `d3.hierarchy` and `d3.pack` to compute bubble positions and sizes, and an ordinal color scale for regional groupings. Hovering reveals a tooltip with profit details, while SVG text labels wrap within each bubble. Data loads from a CSV file containing 100 sales records.

Feb 4, 2025
Loading thumbnail…

Tidied up Bubble Chart - CGPT Add on

This example shows a bubble chart that aggregates total profit by region from a sales records CSV, with each bubble sized by accumulated profit and colored by region. The visualization uses D3 v7’s `d3.csv`, `d3.group`, `d3.pack`, and `d3.hierarchy` to structure and layout the data as packed circles, rendered as SVG. Interactive tooltips display country and profit details via HTML `div` elements, while labels appear inside each bubble. The chart is built in a plain JavaScript environment with a CSS-styled tooltip and hover opacity effects.

Feb 3, 2025
Loading thumbnail…

Tidied up Bubble Chart

This bubble chart visualizes sales records by country, with circle size encoding total profit and color mapping regions. The tidy, evenly spaced layout derives from a D3 hierarchy and pack layout (d3.pack), which positions the data points without overlap. Each circle displays its country name as a label. The visualization loads its data from a CSV file using d3.csv and renders as SVG. Interactive tooltips appear on hover, displaying the country and profit values via D3 event handlers and HTML tooltip elements.

Feb 3, 2025
Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales record data loaded from a CSV file via `d3.csv`, grouping transactions by region and sizing circles by total profit. Each circle is color-coded using `d3.scaleOrdinal` and positioned with the `d3.pack` layout, which applies a hierarchical clustering algorithm to arrange the bubbles. Interactive tooltips appear on mouseover, displaying region and profit details in an HTML div. The visualization renders with SVG, styled through CSS hover effects, and includes region labels inside each circle.

Jan 30, 2025
Loading thumbnail…

Bubble Chart - Clustered with CSV import + Tooltip

This bubble chart displays clustered circles representing sales records, with each bubble’s size corresponding to Total Profit and country labels inside. Built with D3 v7, it loads data via `d3.csv` and uses the `d3.pack` layout to arrange circles hierarchically. A custom HTML tooltip appears on mouseover, showing the country and profit value, with hover styling changing the fill color. The visualization renders as SVG within a React-free HTML page, using `d3.select` and `join` for dynamic circle and text creation.

Jan 30, 2025
Loading thumbnail…

Bubble Chart - Clustered

Four clusters of proportional circles, each labeled with a group letter (A–D), fill the entire SVG canvas without overlapping. The bubble sizes correspond to each group’s `percentResponse` value, while the cluster layout is computed using `d3.pack()` on a `d3.hierarchy()` root. Rendered with `d3.v7` in a React framework, the circles and labels are appended as SVG elements with `d3.select` and `join()`. The data source is hardcoded dummy data, with no axes or tooltips.

Jan 28, 2025
Loading thumbnail…

Bubble charts - bottom y axis alignment

This example displays a bubble chart with four circles representing groups A through D, positioned horizontally with their bottoms aligned along the lower edge of the SVG canvas. Circle size encodes the `total` value using a square root scale, while opacity reflects the same metric. The visualization uses D3 v7’s selection, data join, and scaleSqrt APIs to bind dummy data to SVG circle and text elements, with labels placed at each bubble’s center.

Jan 28, 2025
Loading thumbnail…

Gubs Intro course

This visualization displays dummy survey data for groups A through D, using black circles to represent each group’s total count with area proportional to the value via `d3.scaleSqrt`, while opacity encodes the total relative to 50. Group labels appear centered within each circle as white text. Built with D3 v7 and React, the SVG rendering positions circles horizontally with a fixed spacing, and the code demonstrates basic data binding with `selectAll().data().join()` for both circles and text elements.

Jan 28, 2025
Loading thumbnail…

network charts

This animated network chart lets users explore a hierarchical dataset by clicking circular nodes to zoom between levels, with smooth animated transitions. The visualization uses D3.js version 7.9 and its `d3.pack()` layout algorithm to arrange the hierarchy, with `d3.scaleLinear()` and `d3.interpolateHcl` providing color encoding by depth, while `d3.interpolateZoom` drives the zooming transitions. The data is structured hierarchically, and the code inspects node depth and parent relationships to control label visibility and styling during navigation.

Dec 27, 2024
Loading thumbnail…

Sol Lewitt - D3 multi shapes

This example recreates Sol Lewitt-inspired geometric art using D3.js, rendering a grid of horizontal and vertical rectangles that are selectively masked by overlapping symbols. The visualization displays five distinct shapes—including circles, crosses, and diamonds—positioned at the center of the canvas. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate SVG paths, while SVG masks with inverted black-and-white fills determine which grid lines remain visible. The final pattern emerges from alternating mask states applied to the two perpendicular line sets.

Dec 27, 2024
Loading thumbnail…

Sol Lewitt - D3

A grid of thin horizontal and vertical white strokes overlays the full browser window, but a circular mask reveals the pattern only within a central disc, creating a crisp boundary between the visible striped interior and a blank exterior. Built with D3.js (version 7.9.0) and rendered as SVG, the code uses `select`, `range`, and the `.join('rect')` API to generate 100 rects in each orientation. Two SVG masks—one with a white circle on black, the other inverted—alternately hide and reveal the respective stroke sets, producing the final composed image.

Dec 17, 2024
Loading thumbnail…

Sol Lewitt Alternative - Scale Animation

This example reproduces Sol Lewitt-inspired geometric art using an animated SVG mask. A black rectangle with a white circle masks a grid of horizontal stripes, while a second mask inverts the effect for vertical stripes. The circle’s radius animates between 200 and 0 via CSS `@keyframes` and the `r` property, creating a pulsing circular window. The code dynamically generates 100 horizontal and vertical `<rect>` elements using the DOM API, applying masks with `mask` and `url(#circle-mask)` references.

Dec 10, 2024
Loading thumbnail…

Sol Lewitt Alternative - Rotate Animation

This example reproduces Sol Lewitt’s geometric art using an SVG mask animation. Horizontal and vertical striped rectangles move with a CSS `rotateAnimation` keyframe transform, but their visibility is filtered through two circular masks: one showing white (visible) over a black background, the other showing black (hidden) over a white background. The JavaScript dynamically creates the SVG elements, setting each rect’s mask attribute to `url(#circle-mask)` or `url(#circle-mask-2)`, producing a rotating interplay of revealed and concealed line segments. The animation runs on a 12-second loop with eased timing.

Dec 10, 2024
Loading thumbnail…

Sol Lewitt Alternative - Colour Animation

This example reproduces Sol Lewitt’s geometric art by generating a full-screen SVG with a dynamic color animation. It overlays two sets of thin rectangular strips—one horizontal and one vertical—each masked by a central circle, so the strips are only visible within the circular region. The horizontal strips cycle through blue, green, yellow, orange, and red via CSS `@keyframes` applied to the `fill` property, while the vertical strips use a separate animation class. The masks are built with the SVG `<mask>` element, and all shapes are created programmatically using the DOM API.

Dec 10, 2024
Loading thumbnail…

Pseudo Network Chart

This pseudo network chart displays a set of circles and connecting lines arranged in a branching structure, with node colors distinguishing different levels or groupings. The visualization is rendered as a static SVG composed of explicit `circle` and `line` elements, with node labels added as text paths. The chart appears to be a hand-authored demonstration of network-like layout, using only basic SVG primitives without any JavaScript libraries or simulation logic. It serves as a simple example of creating a graph-style visual in React by directly coding SVG markup, with styling applied via inline attributes.

Dec 9, 2024
Loading thumbnail…

Pseudo Bubble Chart

This pseudo bubble chart demonstrates a scatterplot-style visualization where circles of varying sizes represent data points along x and y axes. The visualization uses React to render an SVG scene containing multiple gray circles and one prominent purple circle, with axis labels and grid lines provided by plain SVG elements. The code utilizes standard SVG primitives such as `<circle>`, `<line>`, and `<rect>` within a fixed viewBox, while CSS styling controls the text appearance for axis tick labels.

Dec 9, 2024
Loading thumbnail…

Pseudo Nested Proportional Area Chart

This example presents a pseudo nested proportional area chart using concentric circles to visualize hierarchical data. The SVG rendering uses overlapping translucent purple circles of varying radii to suggest nested categories, with the largest circle at the center and smaller circles positioned above it. The chart combines hardcoded SVG elements with JavaScript-generated labels, including a "P" icon at the top and alphabetical characters within each circular layer. The visualization demonstrates how proportional area encoding can be simulated through circle sizing and positioning without true hierarchical layout algorithms.

Dec 9, 2024
Loading thumbnail…

Pseudo Proportional Area Chart (half circle)

This pseudo-proportional area chart uses SVG paths to compare seven categories, each represented by a half-circle whose size encodes its value. The chart is built with raw SVG path data in a React component, and `fill-opacity` distinguishes primary values from a secondary series. The font glyphs are drawn as filled paths, and a light gray border outlines the plotting area.

Dec 9, 2024
Loading thumbnail…

Pseudo Bar Chart (Horizontal)

This example displays a horizontal pseudo bar chart with five rounded bars of varying lengths. The bars are drawn as SVG `<rect>` elements within an `<svg>` container, with one bar highlighted in purple and the rest in gray. The chart includes text labels on the left side, rendered as SVG `<path>` elements, which appear to be custom-drawn glyphs rather than standard text nodes. The visualization is implemented using raw SVG markup in a React component, without any additional data visualization libraries.

Dec 9, 2024
Loading thumbnail…

Pseudo Waffle Chart

This pseudo waffle chart displays a grid of rounded rectangular cells, with purple cells in the lower-left portion and gray cells filling the remainder. The visualization mimics the appearance of a waffle chart without using a dedicated charting library, instead rendering directly through SVG elements defined in the HTML. The React framework structures the component, while the SVG markup handles the visual output, positioning each 30x30 pixel rectangle with explicit coordinates and fill colors to create the patterned composition.

Dec 9, 2024
Loading thumbnail…

Camera - Testing Shapes

This example shows a simple camera illustration constructed from basic SVG shapes. It uses raw SVG elements—rectangles for the camera body and flash, a line for the bottom edge, and concentric circles for the lens—all defined directly in the HTML file. The lens features a blue stroke on a white circle over a black disc. The page is rendered using inline CSS for the title and SVG markup, with no external JavaScript or frameworks.

Dec 6, 2024
Loading thumbnail…

HTML hello

This example demonstrates the "Hello World" of the VizHub V3 Runtime Environment, where a single line of text is rendered inside a container div. The code exports a `main` function that sets the container's inner HTML with a font size of 217 pixels, showcasing the simplified entry point that replaces the traditional `index.html`. It highlights the platform's support for interactive widgets and continuous hot reloading, where developers can hold the Alt key and drag the numeric value to see real-time visual updates.

Dec 6, 2024