Skip to main content
Log in
W

winner106

@winner106·6 public vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes rendered directly in a web browser, including overlapping circles, a rectangle with a stroke, a line, and two distinct path elements. It shows how primitive geometric forms combine to create a static composition, with no data binding or interactivity. The code uses plain SVG markup with inline presentation attributes such as `fill`, `stroke`, and `stroke-width` to style each shape. The rendering approach is declarative: the browser’s SVG engine draws the specified coordinates and path commands, as seen in the `d` attribute of the path nodes. The page is self-contained and does not rely on any external JavaScript libraries.

May 7, 2022
Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the enter, update, and exit phases of D3’s general update pattern using a bowl of fruit. It shows apples and lemons as SVG circles with labels, transitioning through five sequential state changes: adding apples, removing one, mutating a fruit type, and filtering out a specific index. The code uses `selection.merge()`, `selection.exit()`, and `selection.remove()` to handle dynamic data, with ordinal scales for color and radius. Rendering is SVG-based, and data mutations are driven by `setTimeout` callbacks.

Apr 11, 2022
Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" centered on a plain white page, styled with a 13em font size. It demonstrates a minimal setup using HTML and CSS within a single `index.html` file, alongside a separate `index.js` that remains empty. The page loads directly in a browser without external libraries or frameworks, highlighting the fundamental structure of a web document. No interactive behavior or data processing is included.

Feb 14, 2022
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Mar 18, 2020
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Mar 18, 2020
Loading thumbnail…

Racing Bar Chart Animation Test

A racing bar chart animation demonstrates changing quantitative values over time. Six named categories (alpha through foxtrot) increment their values by ten at random intervals, with each update triggering a smooth 750-millisecond transition of bar widths and labels using D3’s `select`, `scaleBand`, `scaleLinear`, and the `.join()` operation. Bars and text labels are rendered as SVG elements within a React component, driven by a custom `useInterval` hook that calls `setInterval` to update state. The chart uses D3 v5 and React, with data initially hardcoded in the app’s state.

Mar 18, 2020