ViniD3

100%

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 12, 2021

This example displays static geometric shapes and imported car data in an SVG scene. It renders circles, rectangles, lines, and paths directly in markup, with some shapes grouped and transformed. The code imports a local `cars` module containing JSON-parsed data, then accesses the first year value to update a message element. D3 is loaded via UNPKG, though this version relies on plain JavaScript DOM methods rather than D3-specific APIs.

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…

Cars Report

A simple SVG sketch demonstrates basic shape rendering with three hardcoded elements: two circles and one rectangle. The page loads D3 v5 from a CDN and uses an ES6 module import to call the `select` function, though no dynamic data binding or interaction occurs. Static SVG markup defines the shapes directly in `index.html`, with basic CSS styling applied globally. The example serves as a minimal template for importing D3 and local modules in a VizHub project, showing foundational rendering without any data-driven visualization.

Aariefb315

80% match

Loading thumbnail…

Practic03 | SVG

This example demonstrates static SVG shapes and primitives, including circles, rectangles, lines, and paths, drawn directly on a 960x500 canvas. It uses D3 v5 only to load the library, while the visualization itself is composed entirely of hand-coded SVG elements with inline styles and CSS classes for grouping and theming. A JavaScript snippet parses a hardcoded JSON array of car data, filters it by price, and formats a text report, though this output is not visibly integrated into the SVG graphic. The page also imports a `bundle.js` file, suggesting additional external code.

Hhimanshucse2012

80% match

Loading thumbnail…

Hello VizHub

A static SVG scene demonstrates basic shapes and styling with D3 v5. The visualization renders circles, rectangles, lines, and a path inside a scaled group, using CSS classes to apply stroke properties. The HTML file includes D3 from a CDN, while separate JavaScript modules export a text message and select a DOM element to display it. The example highlights fundamental SVG rendering and ES6 module integration through D3’s select function.

Oowenizedd

78% match

Loading thumbnail…

Cars Report

This example demonstrates a basic D3 version 6 setup with a static SVG scene containing a green circle, rectangle, and a polyline path, accompanied by a text report that lists cars priced above $2,000. The visualization shows how D3 can structure SVG elements while also illustrating asynchronous data loading. The code uses the native `fetch`-like pattern through a custom `getCars()` promise, which resolves after a two-second delay, and then applies array filtering and mapping to format the car data into readable strings. The SVG rendering is done directly with hardcoded shapes rather than data-driven joins.

Aalbatross97

77% match

Loading thumbnail…

Fork of C

This example demonstrates a basic D3 version 6 workflow using static SVG shapes and imported data. The visualization renders circles, rectangles, lines, and a path with custom CSS styling, including a grouped transformation and layered transparency. It imports car JSON data from a separate module and assigns a text message to an HTML element, though no dynamic data binding or interaction is shown. The rendering relies on declarative SVG markup and standard DOM manipulation, with no use of D3 scales or layout functions.

Sschorschorama

77% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js v5 and SVG to build a simple face from basic geometric shapes, including circles and rectangles. The code demonstrates how D3’s selection and data-binding capabilities can be applied to SVG elements, although the markup itself is static. The page relies on a stylesheet to color the background and define the appearance of shapes, with additional paths and lines showing stroke styling and coordinate transforms. The initial index file logs the D3 object to the console, confirming the library’s availability, while other included pages show unrelated work with cars and shape exercises.

RRandika87

77% match

Loading thumbnail…

Cars Report

This example displays a static SVG scene containing a red circle and a blue rectangle, rendered on an HTML page. It loads a small dataset of car records from a JSON string defined in `cars.js` and uses React to parse and access the data. The core logic in `index.js` imports the parsed car array and sets the text content of a nonexistent element with the ID `message-element` to the first car’s make, though the page’s HTML does not include that element. The visualization itself is purely declarative SVG markup, with no interactive or data-driven rendering.

VVineel Gannu

77% match

Loading thumbnail…

intro to d3

This example demonstrates basic SVG shape rendering and styling within an HTML page, displaying circles, rectangles, lines, and paths at fixed coordinates. The visualization loads D3.js via UNPKG but primarily relies on raw SVG elements with presentation attributes for colors, strokes, and transforms. A stylesheet defines the SVG path's green stroke and stroke-width through CSS classes. The example serves as a minimal introduction to combining SVG markup with imported JavaScript libraries and external CSS, though it does not yet showcase D3's data-binding or dynamic layout capabilities.

RRITUZZ

77% match