WRCIECH

@WRCIECH·46 public vizzes

Animated Reusable D3 Scatter Plot + Menus + Ordinal Scale

This animated scatter plot visualizes the Iris dataset, allowing users to interactively explore relationships between different measurements and species. Through dropdown menus, users can switch which quantitative or categorical attribute is mapped to the x- and y-axes. Built with D3 version 6, the visualization uses an ordinal scale for categorical data and a linear scale for quantitative data, with axes and circles transitioning over a one-second duration. Data is loaded from a CSV file via d3.csv.

May 27, 2023

Loading thumbnail…

Fork of Fork of D3 Hierarchy Component 3

This example shows a hierarchical task tree rendered as an SVG, with nodes displayed as rectangles containing text labels and connected by horizontal links. The visualization uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables panning and scaling of the entire graph. Data is loaded from a JSON file, and both nodes and links respond to hover events by changing their fill or stroke color.

May 27, 2023

Loading thumbnail…

D3 Forces - ZOOM

This example shows an interactive node-link diagram of personal goals, where each node is a symbol and each link represents a connection between topics like health, programming, and Netflix. The graph uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes, while `d3.drag` allows users to move nodes and `d3.zoom` enables panning and scaling with a scale extent from 0.1 to 16. Nodes are rendered as SVG paths using `d3.symbol`, with text labels displayed alongside.

May 23, 2023

Loading thumbnail…

Fork of CSS Flexbox 2

This example demonstrates CSS Flexbox layout behavior using two numbered boxes inside a bordered container. The `style.css` file applies `display: flex` with `justify-content: center`, `align-items: center`, and `flex-flow: row nowrap` to center items both horizontally and vertically, while the second box uses an `order: -1` property to reverse its visual position. Custom flex properties (`flex: 1 1 40%` and `flex: 2 2 40%`) control relative sizing and growth, with `gap: 1rem` adding spacing between items. The HTML structure includes commented-out boxes 3–6, leaving only two visible elements rendered in black with white text.

Feb 3, 2023

Loading thumbnail…

CSS Flexbox

A CSS Flexbox layout demonstrates responsive box arrangement using the Flexbox model. Six numbered black boxes with white text are centered within a bordered container, wrapping onto multiple lines with a one-rem gap between them. The code uses `display: flex`, `justify-content`, `align-items`, `flex-flow`, and `align-content` properties to control alignment and wrapping. It imports the Roboto font from Google Fonts and applies a plain HTML structure with no JavaScript or external data sources.

Feb 3, 2023

Loading thumbnail…

CSS Position Property + Button

This example demonstrates the CSS `position` property through a single-page scrolling layout with three full-screen sections. It shows how `position: sticky` keeps colored headers pinned to the top while scrolling, and `position: fixed` anchors a navigation footer and a social button to the viewport. The page uses only HTML and CSS, with anchor links (`<a href="#one">`) enabling smooth scrolling via `scroll-behavior: smooth`. Color-coded headers (blue, red, green) visually separate the sections, while a fixed navigation bar and button remain persistently visible.

Feb 1, 2023

Loading thumbnail…

CSS Position property

This example demonstrates the CSS Position property by rendering four labeled boxes—Absolute, Relative, Fixed, and Sticky—inside nested container divs. It uses plain HTML and CSS (via the `style.css` file) with the `position` values (`absolute`, `relative`, `fixed`, `sticky`) to control placement relative to viewport and containing blocks. The visualization relies on explicit `top`, `left`, and `z-index` values, plus a tall body height (`min-height: 200vh`) to reveal sticky and fixed behavior during scrolling. No external JavaScript libraries are involved.

Jan 31, 2023

Loading thumbnail…

CSS Columns

This example demonstrates text content arranged in multiple columns using CSS multi-column layout. The page shows a series of paragraphs flowing across four columns defined with the `columns: 4 250px` property, with a three-pixel solid column rule and a three-rem gap separating them. One quote is styled with a larger font, centered text, and a `column-span: all` property to break across all columns, while the author attribution uses `white-space: nowrap` to prevent line breaks. The code relies on the standard CSS Multi-column Layout module and the Roboto font loaded from Google Fonts.

Jan 31, 2023

Loading thumbnail…

CSS Floats

This example demonstrates how CSS floats affect the layout of text and block elements within an HTML document. It uses standard HTML elements and the CSS properties `float`, `margin`, and `display: flow-root` to create left- and right-floating black squares that wrap surrounding paragraph text. The page pulls the Roboto font from Google Fonts via `@import` and applies it to the body, while the `section` element showcases `flow-root` to contain nested floats. No JavaScript or external visualization libraries are used; the effect relies entirely on core CSS.

Jan 31, 2023

Loading thumbnail…

Fork of CSS Display 2 (lists)

This example demonstrates a simple horizontal navigation menu with links to Intro, Portfolio, and Projects sections. It shows how CSS list properties and inline-block positioning create a right-aligned, black-background nav bar where links appear in white and gain an underline on hover or focus. The code uses HTML unordered lists alongside CSS styling with Google Fonts’ Roboto typeface loaded via @import, relying on properties like list-style-type, display, margin-inline, and text-decoration to achieve the visual layout.

Jan 30, 2023

Loading thumbnail…

CSS Display

This example contrasts default block-level paragraph styling with an inline-block span by using the CSS `display` property. The page shows how inline-block elements respect vertical margins and padding, while the surrounding paragraphs remain gray blocks. Rendering relies on HTML structure and the linked Roboto font from Google Fonts, with all visual behavior defined in the included stylesheet. No JavaScript or external visualization libraries are used; the example is purely static.

Jan 30, 2023

Loading thumbnail…

Level Component 1

A bar chart displays a single value as a filled rectangle inside an outlined container, with the fill amount updating every 100 milliseconds. The example uses a custom reusable D3 component (`levelComponent`) with `d3.scaleLinear` to map the data value to pixel width, `d3.transition` for smooth animations, and SVG rendering. A `setInterval` updates the data, and the component re-renders with animated transitions. The chart is interactive-ready through a `d3-dispatch` event system for mouse interactions.

Jan 29, 2023

Loading thumbnail…

CSS Starter

A static HTML page styled with CSS demonstrates a text-heavy layout for learning CSS. The page contains a header and a main paragraph of placeholder text, styled with a custom stylesheet. The CSS applies a universal reset, sets container width to 50%, adds a dashed red border, and adjusts font size, padding, and margin. The example uses no JavaScript or data visualization libraries; it relies solely on the `style.css` file to render basic typographic and box-model properties.

Jan 23, 2023

Loading thumbnail…

Radial Tree

This radial tree displays hierarchical data as a branching network of nodes and links radiating from a central root. The visualization uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkRadial` to compute the layout and draw curved edges, with nodes rendered as SVG circles and labels. Interactive links are added via `xlink:href` attributes. The data comes from a `data.json` file containing tasks, health goals, and awards, arranged in a nested children structure. The SVG output is styled with sans-serif fonts and customizable colors, strokes, and node radii.

Jan 22, 2023

Loading thumbnail…

D3 Hierarchy Component 4

A hierarchical tree diagram displays task categories and subgoals, such as Programming under Main Goal and Cardio under Health, using SVG rectangles and text labels connected by curved horizontal links. The D3 v3 component builds the layout with `d3.hierarchy` and `d3.tree`, applies `linkHorizontal` for edge paths, and supports zooming via `d3.zoom`. Node positions derive from the tree layout’s separation function, while styling applies green translucent links and hover effects. Data loads from a local `data.json` file.

Jan 22, 2023

Loading thumbnail…

Fork of D3 Hierarchy Component 2

A static tree diagram visualizes a hierarchical task structure, with nodes labeled by category and sub-goals like “Programming” and “Health.” The layout is generated using D3’s `tree` and `hierarchy` functions, and links are drawn as horizontal curves via `linkHorizontal`. SVG text elements display node names, with font size scaling by depth. The view supports zooming through D3’s `zoom` behavior, and hover effects alter text styling. Data is loaded from a local JSON file.

Jan 16, 2023

Loading thumbnail…

D3 Hierarchy Component 1

This example displays a hierarchical tree of tasks, branching from a root "Tasks" node into categories like "Main Goal," "Health," and "Awards," with sub-goals such as "Programming," "Cardio," and "Pizza." The visualization uses a D3.js horizontal tree layout, rendered as an SVG, with nodes positioned via a tree algorithm and connected by green path links. The code loads data from a JSON file, employs a custom `hierarchy` component, and uses `linkHorizontal` for path generation, with zoom functionality enabled through D3's zoom module. Text labels are styled with the Poppins font, with compound and leaf nodes distinguished by font size and text anchor.

Jan 15, 2023

Loading thumbnail…

D3 Zoom

A D3 zoom interface demonstrates interactive panning and scaling within an SVG coordinate system. A single green circle, positioned through linear scales, responds to mouse wheel and drag gestures that trigger the `d3.zoom` behavior. The example simultaneously updates axis tick marks via `transform.rescaleX` and `rescaleY`, while displaying the current translation values and zoom multiplier in separate HTML divs. The visualization renders with SVG elements, using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to maintain spatial mapping during the zoom transform.

Jan 12, 2023

Loading thumbnail…

Untitled

A live graph renderer displays a DOT language diagram that updates in real time as users type. The example uses d3-graphviz and the @hpcc-js/wasm library to parse and render Graphviz syntax, with d3.transition providing smooth animated updates. A textarea on the left captures input, and every keystroke triggers the graph to re-render via the `renderDot` method, fitting the diagram to the window size.

Jan 11, 2023

Loading thumbnail…

D3 Forces - advanced 4

A force-directed graph maps personal goals like "Tasks," "Health," and "Awards" to subsidiary activities such as "Programming," "Cardio," and "Pizza." Nodes are rendered as SVG symbols using `d3.symbolCircle`, with sizes varied per node. `d3.forceSimulation` applies charge, link, and centering forces, while `drag` and `zoom` interactions allow manipulation. The code defines custom classes for nodes, links, and text via a reusable `forceGraph` factory.

Jan 9, 2023

Loading thumbnail…

D3 Forces - advanced 3

This force-directed graph visualizes personal goals and habits, organizing tasks like "Main Goal Progress," "Health," and "Awards" as central nodes connected to activities such as "Programming," "Cardio," and "Netflix." Using the D3 library, the simulation applies charge, link, and centering forces to arrange nodes dynamically. The example renders as SVG, with circles sized by attributes and labeled with Optima text. It employs `d3.forceSimulation`, `forceManyBody`, and `forceCenter` APIs, while links are drawn as thick black lines, and nodes change stroke on hover for interactivity.

Jan 8, 2023

Loading thumbnail…

D3 Forces - next steps

A force-directed graph maps a personal goal hierarchy, with "Tasks" linking to progress, health, and awards, which branch into daily activities like programming, cardio, and good sleep. Nodes are rendered as SVG symbols (circles) and text via the D3 `symbol` and `forceSimulation` APIs, with `forceCenter`, `forceManyBody`, and `forceLink` driving the layout. Interactions include mouseover styling and a mousedown event dispatch.

Jan 8, 2023

Loading thumbnail…

Reusable ScatterPlot with Symbols & Axis Labels + Idempotent

This interactive scatter plot visualizes the Iris dataset by mapping flower measurements to x/y coordinates and using distinct symbol shapes for each variety. The chart cycles through the dataset’s measurement columns every two seconds, updating the x-axis mapping and axis titles. Built with D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, the reusable `scatterPlot` component supports configurable margins, symbol types, and labels. The code uses an idempotent approach with `selectAll` and `join` to update SVG marks, alongside CSS hover effects that turn points red.

Jan 8, 2023

Loading thumbnail…

D3 Forces

This example demonstrates a basic force-directed graph layout with three labeled nodes and two connecting links. Using the D3.js library version 7.8.0, it applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes. The visualization renders as SVG circles, text labels, and lines, updating their positions on each simulation tick based on computed node coordinates. The code imports methods like `select`, `forceSimulation`, and `forceCenter` directly from D3, with data defined as simple JavaScript objects containing node IDs and link indices.

Jan 6, 2023

Loading thumbnail…

Animated Reusable D3 Scatter Plot + Menus

This interactive visualization displays the Iris Dataset as an animated scatter plot with dropdown menus for selecting which measurements appear on each axis. Built with reusable D3 v6 chart components, the `scatterPlot` module updates circle positions via `selection.join` and smooth SVG transitions, while the `menu` module uses a D3 `dispatch` event system to trigger rebuilds. Data is loaded as CSV and parsed dynamically, with axes animating alongside the transitions.

Jan 4, 2023

Loading thumbnail…

Animated Reusable ScatterPlot with Symbols & Axis Labels + Idempotent 3. Idempotent Axis

This example demonstrates an animated reusable scatter plot of the Iris dataset, cycling through different x-axis dimensions every two seconds while updating axis labels and smoothly transitioning symbol positions. The visualization shows how points remain anchored to their petal length values on the y-axis while exploring correlations across four flower measurements. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` for scales and axes, while `transition` with duration and delay handles the idempotent animations. SVG rendering and CSS hover effects complete the interactive chart.

Jan 3, 2023

Loading thumbnail…

Animated Reusable ScatterPlot with Symbols & Axis Labels + Idempotent 2

This example shows an animated scatter plot of the Iris dataset, cycling through four flower measurements (petal length, petal width, sepal width, sepal length) every two seconds. The plot uses SVG rendering with D3.js, employing scales for axes, ordinal symbols to distinguish the three flower varieties, and a transition system to animate changes. The reusable scatter plot component updates data bindings idempotently, with axis labels and hover interactions that change symbol colors.

Jan 2, 2023

Loading thumbnail…

Animated Reusable ScatterPlot with Symbols & Axis Labels + Idempotent

This example demonstrates an animated scatter plot that cycles through different Iris dataset columns, updating the x-axis values every two seconds. The visualization uses D3.js version 7.8.0 with a reusable `scatterPlot` function that employs SVG rendering. It uses `scaleLinear`, `scaleOrdinal`, `symbols`, and `transition` to animate the movement of data points, while `axisLeft` and `axisBottom` generate the labeled axes. The plot displays different Iris varieties with distinct symbols, and hovering over a point changes its color from black to red.

Jan 2, 2023

Loading thumbnail…

Reusable ScatterPlot with Symbols & Axis Labels

This reusable scatter plot visualizes the Iris dataset, mapping petal length against sepal width and encoding the flower variety with different D3 symbols. Built with React and rendered as SVG, the chart uses d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.axisLeft/axisBottom for ticks. It displays labeled axes and highlights points in red on hover via CSS, with the main chart logic encapsulated in a configurable scatterPlot function.

Dec 31, 2022

Loading thumbnail…

Reusable ScatterPlot with Symbols

This example shows a reusable scatterplot of the Iris dataset, where each point is drawn as a distinct symbol based on flower variety. It uses D3’s `scaleOrdinal` to map varieties to D3 symbols, and `symbol` to generate the SVG paths. The chart axes are created with `axisLeft` and `axisBottom`, while a `scaleLinear` maps petal length and sepal width. The chart is packaged as a configurable function, allowing the data, accessors, margins, and symbol size to be set by the caller.

Dec 31, 2022

Loading thumbnail…

Fork of Scatter Plot - Different Dataset

This example displays the classic Iris flower dataset as an interactive scatter plot, mapping petal length against sepal width for individual data points. It uses D3 v7 to load the CSV data, construct linear scales, and render circles within an SVG container sized to the full viewport. The scatterPlot function is implemented as a reusable closure, configuring axes, margins, and point radius via method chaining. Hovering over any black circle changes its fill to red, providing simple visual feedback.

Dec 30, 2022

Loading thumbnail…

Scatter Plot - Different Dataset

This example displays a scatter plot of the Iris dataset, plotting sepal length against sepal width and highlighting individual points in red on hover. The visualization uses D3 v7 APIs including `csv` for data loading, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circles are rendered as SVG elements via `selectAll().data().join()`, with a fixed radius and black fill. The chart fills the entire browser window, and axes are positioned using margins derived from `innerWidth` and `innerHeight`.

Dec 30, 2022

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length and sepal width for individual flowers. It uses D3 v7’s `csv` loader to parse the data, `scaleLinear` for x and y axes, and SVG `circle` elements for points. Axes are drawn with `axisLeft` and `axisBottom`, while hover effects change circle color to red via CSS.

Dec 29, 2022

Loading thumbnail…

Joins

A set of circles animates across the screen, smoothly changing size and vertical position as the data updates every 100 milliseconds. The visualization demonstrates D3's data join pattern using `selection.data()` and `.join()` to bind an array of generated objects to SVG circle elements. The data is created by `makeData`, which uses `d3.range` and trigonometric functions to compute radius and coordinates based on a time variable. The code relies on `d3.select` and SVG attributes like `cx`, `cy`, and `r`, all rendered in the browser window.

Dec 26, 2022

Loading thumbnail…

[D3] Le Witt - Collection

This example renders a grid of vertical and horizontal stripes whose visibility is selectively masked by two overlapping D3 symbol arrays. Using the D3 `symbol` and `symbols` APIs, it generates circle, cross, diamond, square, star, triangle, and wye glyphs as SVG paths, which define alternating black-and-white masks via `scaleBand` and `mask` elements. The result is a layered, generative composition inspired by Sol LeWitt’s wall drawings, with React managing the SVG canvas and D3 v6 handling data binding and coordinate transforms.

Dec 25, 2022

Loading thumbnail…

[D3] Le Witt - Masks with Symbols

This example generates a dynamic geometric composition inspired by Sol LeWitt, where alternating vertical and horizontal stripes are clipped by two overlapping circular masks. Using D3.js version 6 in a React-free SVG environment, the code defines two masks with inverted fills, then applies them to striped rectangles created via `d3.range` and `d3.join`. The result is a clean, monochrome interplay of lines and shapes, rendered purely with SVG elements on a full-window canvas.

Dec 24, 2022

Loading thumbnail…

[D3] Le Witt - Masks

This example creates a geometric composition of thin vertical and horizontal stripes that cross to form a mask-like circular pattern. Two SVG masks—one revealing a filled circle and another showing a circle cut out of a full rectangle—control the visibility of the stripes, which are generated as rectangles using D3's `range` and `join`. The visualization uses `d3.select`, `.append`, and `.attr` within a React framework, rendering entirely as SVG with D3 v6.

Dec 23, 2022

Loading thumbnail…

Le Witt - Masks

This piece generates an abstract composition inspired by Sol Le Witt, using overlapping black grid lines and circular forms defined entirely by SVG masks. It renders a full-screen canvas of vertical and horizontal bars spaced at 20-pixel intervals, with the intersections selectively revealed through two mask definitions that combine white and black shapes. The visualization is built with vanilla JavaScript and SVG DOM manipulation, creating masks via `createElementNS` and applying them through the `mask` attribute on each rectangle, resulting in a dynamic interplay of line and void.

Dec 23, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using raw SVG and JavaScript, creating a geometric composition of overlapping horizontal and vertical bands. The artwork shows a grid of alternating colored stripes confined to a circular mask, with a second inverted mask revealing a contrasting ring pattern. The code builds SVG elements dynamically, using two SVG masks—one with a white circle on black and another with a black circle on white—to control which stripes appear in the center and edges. It relies on standard DOM APIs like `createElementNS` and `setAttribute` to generate 100 rectangles in each orientation, without any external libraries.

Dec 23, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals. Sunset

This fork of an SVG fundamentals exercise depicts an animated sunset. A radial gradient sky transitions through colors while a circle, representing the sun, moves downward and upward. Two landscape layers use cubic and quadratic Bezier paths with linear gradients, also cycling through hues. The animation relies on native SVG `<animate>` elements and CSS styling, with no external libraries required.

Dec 22, 2022

Loading thumbnail…

Hovering Line Chart

Two hovering line charts are displayed in an SVG. The first line is red, and the second is green. When the mouse hovers over the first line, its stroke color changes to light gray. When hovering over the second line, its color shifts, and the cursor changes to a grab icon. The code uses CSS `:hover` pseudo-classes to alter the `stroke` property and cursor style of the SVG `path` elements. The paths are defined using SVG path data, with no data source specified.

Dec 22, 2022

Loading thumbnail…

Using Figma

This example shows how VizHub projects can combine static SVG markup with D3.js and local ES6 modules. It displays three overlapping ellipses and a rounded rectangle rendered in gray, alongside a large text message. The code loads D3 via UNPKG, references a local stylesheet, and demonstrates basic SVG shape primitives like ellipse and rect. While it imports D3, it does not use any D3-specific functions for drawing, relying instead on manual SVG elements in the HTML file.

Dec 21, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering in a web browser, showing two basic geometric shapes drawn on a 960 by 500 canvas: a green-outlined ellipse and a red vertical line segment. The code uses raw SVG markup inside an HTML document, with inline attributes controlling position, dimensions, stroke color, and stroke width. It relies on the native SVG API and standard HTML structure, requiring no external JavaScript libraries or data sources. The visualization highlights how static vector graphics are declared directly in markup, contrasting with more complex frameworks like React.

Dec 21, 2022

Loading thumbnail…

Making a Bar Chart with D3

This example shows a horizontal bar chart of population counts for the ten most populous countries, derived from a CSV file where values are normalized by dividing by 1000. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population to bar width and country names to vertical bands, rendering SVG rectangles with a steelblue fill. Margins offset the chart within an SVG sized 960 by 500, with axes labeled using D3’s axis generators.

Feb 23, 2020

Loading thumbnail…

Let's make a face!

This example draws a simple cartoon face using D3 v5 within a React application, rendering to SVG. The code uses `d3.select` and `d3.arc` to construct a yellow circle for the head, two circles for eyes, and a path for the mouth. The face is centered by translating a group element to the middle of an SVG sized 960 by 495 pixels. Eye positions are fixed offsets from the center, and the mouth uses an arc with specified inner and outer radii. The visualization demonstrates basic SVG shape creation and transformation without external data.

Feb 22, 2020

Loading thumbnail…

Cars Report

This example displays a hardcoded message, “aaa,” in a large preformatted text element on an otherwise blank page. The visualization is static, showing no data, chart, or interactive behavior. The code imports an unused string from `test.js` and references a commented-out JSON array in `cars.js`, but none of that data is rendered. It uses plain DOM manipulation via `document.getElementById` and `textContent` to set the message. No visualization libraries such as D3 or Canvas APIs appear in the code.

Feb 20, 2020