Skip to main content
SimilarExport ZIP
100%

d3 project fork

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

This example shows a colorful SVG scene of a rabbit in a grassy field with a sky, sun, and clouds, built entirely with D3.js version 7 selections. It demonstrates how to use `d3.select` to append and style primitive shapes like `ellipse`, `circle`, and `rect` directly to an SVG canvas. The code uses local ES6 module imports from the `d3` package loaded via UNPKG, and relies on D3’s attribute-chaining API to position and style each element. The static scene is rendered without data binding or transitions, focusing purely on manual drawing with 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…

Scene with d3.js!

This example showcases a simple animated scene built with D3.js, depicting a sunny landscape with a tree, a dog, and two butterflies. It demonstrates how D3’s selection and attribute methods—such as `select`, `append`, and `.attr`—construct static SVG shapes like rectangles, circles, and ellipses to form each element. The visualization renders entirely in SVG, with a sky-blue background and clearly defined shapes for each object. While no data is involved, the code highlights D3’s ability to manipulate the DOM directly, using hardcoded coordinates and dimensions to compose a cohesive scene.

Ppriyankajammigumpula@my.unt.edu
80% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a colorful landscape scene with a house, sun, clouds, palm trees, and fence rendered as SVG shapes using D3 v7. The code demonstrates basic selection and append operations via `d3.select`, along with data binding through `d3.line()` and `curveBasisClosed` to draw the cloud path. Each element, from the house's rects and polygons to the tree trunks and fronds represented as lines, is positioned with explicit coordinates and filled with named colors. The visualization shows how D3 can be used for static, non-data-driven illustrations.

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

Fork of D3 Starter

This example demonstrates a minimal D3.js version 7 setup by rendering a single, full-width SVG element. It colors the entire 960-by-500-pixel canvas blue by using `d3.select` to target the SVG element and the `svg.style` method to apply the background color. The code imports only the `select` function from the D3 module, and the visualization is a static, empty scene with no data or interactive elements. The HTML page loads D3 from a CDN and includes a separate JavaScript bundle, highlighting the basic structure of a D3 project.

Ccodingtywu
78% match
Loading thumbnail…

Fork of d3

This example shows a bold, minimal visualization: a 500-pixel SVG square with a solid red background, rendered inside an HTML page. The page loads the D3.js v6 library from a CDN and uses a simple script to select the SVG element and apply the background color via the `style` method. The code relies on D3’s selection API to target the SVG and set its CSS property, resulting in a static, full-color graphic with no data or interaction. It demonstrates basic D3 usage with an SVG canvas and a plain JavaScript script.

Ggyanendra verma
77% match
Loading thumbnail…

Fork this for D3 Setup

This example demonstrates a minimal D3.js setup within an HTML page, where circles, groups, and rectangles respond to interactions and data binding. It shows how to use D3 v7 selections to manipulate SVG attributes, such as toggling circle fill colors on click and generating random radii. The code uses `d3.selectAll`, `attr`, `style`, and the data join pattern with `join('rect')` to render pink rectangles from a static array. Text labels are appended to group elements, and the page relies on the d3-selection-multi plugin for the `attrs` method.

Llupica.matthew@gmail.com
77% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup, displaying a single small circle in an SVG. The page renders the circle directly in the SVG markup, while the accompanying JavaScript uses the `select` function from D3 to replace the body’s text with a greeting. The code imports `select`, a core D3 API, and renders SVG output. The example serves as a basic starting point, though most of the D3 functionality is commented out.

Mmjavanmardi
77% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example uses D3.js version 7 to draw a simple still-life scene composed of a house, mountains, a bike, and a television. The code imports `select` and `arc` from the d3 module, though only `select` is used to append SVG shapes like rectangles, polygons, and circles. Each object is placed inside its own `<g>` group element with a translation transform, and shapes are styled with static fill and stroke attributes. The visualization demonstrates basic SVG rendering with D3 without any interactive or data-driven behavior.

Rreddysushma994@gmail.com
76% match