Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Mar 7, 2024

Created on Feb 28, 2024

This example shows a simple cat face drawn with D3 shapes, including a head, eyes, nose, mouth, ears, and whiskers, all assembled using SVG elements such as `circle`, `ellipse`, `path`, `polygon`, and `line`. The visualization demonstrates D3’s `select` and append methods to build the graphic in a React component. It also fetches a CSV file of car data from a GitHub gist, reporting the file size, row count, and column count in a message. The code loads D3 v7 via UNPKG and renders entirely as SVG.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of cat

This React and D3.js visualization displays a cartoon cat face rendered as an SVG, with a separate text section showing metadata about a CSV file it fetches. The graphic uses primitive shapes like circles and ellipses to form the cat’s hair, ears, eyes, glasses, cheeks, and a mustache, with a mouth generated by the `d3.arc()` path generator. The page opens by loading car data from a GitHub Gist, computing the row and column counts, and displaying the file size, row count, and column count in plain text above the animated SVG drawing.

AAkhil Charugulla

87% match

Loading thumbnail…

Fork of Hello VizHub

This example shows a simple smiling face rendered as SVG, demonstrating basic D3 shape generation and element manipulation. The code uses D3 v5 via UNPKG, importing `select` and `arc` from the local module system. It constructs a yellow circle for the face, black circles for eyes, and a mouth path built with the `arc` generator on a 960×500 SVG canvas. The visualization also includes a background color style and serves as a minimal illustration of importing both D3 and local ES6 modules.

ZZeeshan

86% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a D3.js visualization that combines a static SVG illustration with dynamic data loading. It displays a decorative smiley face with ears, a nose, and a hat, rendered using SVG shapes like circles, ellipses, polygons, and paths. The visualization also fetches a CSV file from a remote URL using D3’s `d3.csv` method, then computes and displays basic dataset statistics—such as file size in kilobytes, row count, and column count—in a styled text element. The page uses custom CSS for typography and layout, while the SVG is centered and responsive. The visualization is built with React and D3 v7, rendering entirely via SVG.

SSai Hemanth Babu Sunkari

84% match

Loading thumbnail…

Fork of Hello VizHub

This example combines React with SVG shapes and D3.js to demonstrate a basic visualization setup. It renders a static yellow circle with a black border and two smaller circles using inline SVG markup. The React component logs a message to the console and renders a simple heading, while the D3 `select` API is imported but not actively used. The page also includes a CSS rule targeting a message element that is not present in the markup.

VVishal Kumar

84% 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

84% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

SsunilthkGmail

84% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple animated SVG face built with D3.js v5 and the VizHub framework. The code uses `d3.select`, `d3.arc`, and SVG shape elements like `circle`, `rect`, and `path` to construct a yellow face with red eyes, eyebrows, and a mouth. The `transition().duration(2000)` chain animates the right eyebrow's vertical position over two seconds. The visualization renders entirely in SVG, using a local ES6 module for a message and loading D3 from UNPKG.

YYanxxx447

83% match

Loading thumbnail…

Fork of Hello VizHub

This example visualizes a smiley face rendered as an SVG, composed of a yellow circular background and a mouth arc drawn with D3’s `arc` generator. The React app uses `d3.select` to set a message and imports local modules, including `BackgroundCircle`, demonstrating ES6 module usage. D3 v5 and React are loaded via UNPKG, with the SVG centered using a `translate` transform.

TToonysg

83% match