Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub 3

✓ Published0🌍 Public
NNita
Last edited Jan 2, 2024
Created on Jan 1, 2024
Forked from Hello VizHub 3

A fork example demonstrates VizHub 3's live-editing capabilities: circles representing CSV data (x, y, radius, color) animate into place with staggered delays, while blue squares form a static row above. D3 7.6.1 handles the SVG rendering; `select`, `transition`, and `easeLinear` drive the enter/update/exit animations, and `mix-blend-mode` in CSS multiplies overlapping shapes.

AI-generated description

An example showing the capabilities of VizHub 3:

  • There is no index.html here!
  • The entry point is the named export main from index.js
  • The first argument to main is container, a DOM node
  • The container DOM node is a <div> with measurable dimensions
  • You can import './styles.css' to load CSS
  • You can import data from './data.csv' to load CSV data
  • Dependencies such as D3 are configured in package.json
  • Alt+Click on a color to get a color picker
  • Alt+Drag on a number for to change it
  • All changes are hot reloaded
  • Works with remote collaborators!
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This fork of the Hello VizHub example combines static SVG shapes and paths to create a playful geometric composition. It renders a red rectangle with a thick black stroke that transitions to green on hover, alongside a series of cubic Bézier curves forming abstract patterns and a yellow filled path. The code imports D3’s `select` API from `d3` v5 to set text content from a local ES6 module, while styling is handled through embedded CSS and an external stylesheet. No external data is used; the visualization relies entirely on hardcoded SVG markup.

JJeppeOEM
85% match
Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek
83% match
Loading thumbnail…

Fork of Hello VizHub

The example displays a simple, animated face made of SVG shapes: a yellow circle for the head, two eyes, and a mouth drawn with an arc path. The eyebrows animate by smoothly translating up and down over a few seconds. It demonstrates how to load D3 v5 from a CDN and use its `select` and `arc` API functions, alongside importing a local ES6 module. The text "Hello VizHub!" appears below the graphic, styled via an external CSS file.

HHalvorte
83% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates interactive draggable circles on an SVG canvas using D3.js v5. Seven data points are rendered as translucent green circles with purple strokes, and users can drag them around the 500x500 pixel space. The code imports D3 modules via ES6 syntax, uses `d3.drag()` for interaction, and `d3.pointer()` to track mouse coordinates. It also showcases local module imports and DOM selection through `select()`.

Ccindy203cc
82% match
Loading thumbnail…

Fork of Hello VizHub

This example displays two large SVG circles and a text message reading "Hello VizHub!" It demonstrates how to set up a VizHub project using D3 v5, loaded from UNPKG. The code imports the `select` function from D3 to update the text of an HTML div, and also imports a local ES6 module to supply the message string. It shows a basic SVG rendering approach with static shapes.

Ggaryz1997
82% match
Loading thumbnail…

Fork of Fork of Hello VizHub : Making circles 1

This example displays a scattered field of semi-transparent, randomly colored circles over a dark background, with each circle’s position and radius derived from random numbers. The visualization uses D3 v5 to generate the SVG elements, employing `scaleLinear` for the x and y axes, `scaleOrdinal` with `schemeCategory10` for potential color mapping, and manually computed `rgb()` strings for fill and stroke. The code also includes a large embedded SVG path, though it is not rendered in the visible output.

NNita
82% match
Loading thumbnail…

Fork of Hello VizHub

This example showcases a minimal SVG scene composed of circles and rectangles in both black and red, rendered within an 960x500 viewport. The page demonstrates VizHub’s module system by importing D3 v5 via UNPKG for DOM selection, specifically using `select` to set the text of a message div. A local ES6 module supplies the greeting text, while CSS styles the message with large, centered typography.

AadbSalam
81% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects combine D3.js with local ES6 modules and external CDN resources. The page renders an SVG container with a single static circle element, while D3’s `select` function from the `d3` package is imported to manipulate the DOM. The code loads D3 v5 via UNPKG, links a local stylesheet, and references a custom `myMessage.js` module, illustrating modular project structure. The visualization itself is minimal, showing only the circle shape without data mapping or interactive behavior.

Kkishan-97
81% match