Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Face with d3.js!

✓ Published0🌍 Public
Mmukundakrishna.r@gmail.com
Last edited Feb 28, 2024
Created on Feb 28, 2024

This example creates a playful SVG scene of a panda-filled landscape, including pandas, bamboo, a sun, clouds, a butterfly, and flowers, all rendered with basic shapes. The visualization uses static SVG elements defined directly in the HTML, with D3.js loaded via UNPKG but not actively driving the scene. The code demonstrates how to structure a self-contained visualization with inline styling, showing the capabilities of VizHub for creating simple graphics without data-driven transformations. The rendering is entirely SVG-based, relying on primitive shapes like circles, rectangles, and paths.

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 Fork of Face with d3.js!

This example draws a panda face beside a small tree using SVG shapes, including paths for the ears and smile, circles for the eyes, nose, cheeks, and leaves, plus a rectangle for the trunk. The visualization is built entirely with JavaScript and D3.js, which is loaded via UNPKG, and rendered directly into an HTML page. The code uses the D3 library to construct and assemble the SVG elements, and demonstrates importing from local ES6 modules as well as from the D3 package.

Rrohithannadurai@my.unt.edu
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
81% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a static pond scene composed of SVG primitives. The visualization depicts a house, tree, ducks, lily pads, clouds, a sun, and water, each created using D3’s `select` and `append` methods to construct and style shapes like rectangles, circles, ellipses, and polygons. Positioning and visual properties such as fill colors are set via chained `.attr()` calls, while an external CSS file defines class-based styling. The scene is drawn entirely through SVG elements, with no interactivity or animation, showcasing how D3’s core API can be used for basic graphics composition.

Mms744311@gmail.com
80% 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
79% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a hand-coded collection of SVG shapes, including circles, rectangles, lines, and paths, arranged in groups with transforms and styling. It shows both static elements and a grouping of shapes with explicit fill and stroke attributes, as well as a second group using a CSS class to apply stroke styling. The code uses plain SVG within an HTML document, applying D3 only via the page title and structure; actual visualization is achieved through direct SVG markup and CSS, with no JavaScript-driven data binding or D3 API calls in the visible source.

YYanxxx447
79% match
Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js! by Shailu

This example builds a natural scene using only HTML and CSS, without any JavaScript libraries. It shows a static landscape with a blue sky, green grass, a radiant sun, stylized trees with brown trunks and circular green canopies, pink flowers, and a cat and bird silhouette. The scene is constructed entirely from positioned `<div>` elements with class-based CSS styling, using gradients and border-radius to create the sun and shapes. No data or dynamic rendering is involved; the visualization relies solely on layered, absolute positioning within a full-viewport container to compose the final image.

Rreddysushma994@gmail.com
79% 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
79% match
Loading thumbnail…

Fork of Fork of Face with d3.js!

This example builds a stylized cartoon face in SVG using D3 v7, rendering a yellow circular head, elliptical eyes, curved eyebrows, and a smiling mouth. The face is centered by translating a group element to the middle of the viewport, with shapes positioned using absolute pixel offsets. The code imports `select` from D3 and uses the `arc()` generator to create the eyebrow and mouth paths, while eye spacing and radii are defined as constants. All visual elements are drawn directly into an SVG canvas without external data.

Mmukundakrishna.r@gmail.com
79% match