Skip to main content
SimilarExport ZIP
100%

Fork of C

✓ Published0🌍 Public
Sschorschorama
Last edited Jan 28, 2022
Created on Jan 28, 2022
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and dynamically manipulate SVG shapes using D3.js. It builds an SVG element sized to its container and renders a collection of circles, each positioned and styled through data-bound attributes like `cx`, `cy`, `r`, and `fill`. The code leverages core D3 APIs including `select`, `selectAll`, and `join` to implement the General Update Pattern for creating and updating elements. A static JavaScript array of objects supplies the circle properties, showcasing method chaining for concise attribute assignment.

DDouglas Devine
83% match
Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates basic SVG shape rendering and grouping with D3 v7, using static geometric primitives rather than data-driven binds. It shows circles, rectangles, lines, and paths inside nested `<g>` elements, with `transform` attributes for translation and scaling applied to layers. Inline `fill` and `stroke` properties override inherited group styles, while CSS rules in `styles.css` further style path joins and stroke widths. The visualization relies solely on declarative SVG markup within an HTML document, with no JavaScript logic beyond importing the D3 library.

Zzakirkhan11
83% match
Loading thumbnail…

Fork of Cars Report

This example demonstrates a hand-coded SVG composition within an HTML page, presenting a static arrangement of primitive shapes, including circles, rectangles, lines, and a path. The visualization is rendered directly in the browser using SVG markup, with a parent group applying a scale transform and a nested group showcasing a translation. The page imports D3 via UNPKG in the README, though the visible code does not use it for data processing or drawing. Styling is applied through a linked stylesheet, which defines classes for highlighting and line attributes, showing the use of CSS selectors on SVG elements.

Ccornshoots
83% match
Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com
83% match
Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render a static collection of seven colored circles on an SVG canvas. The code employs the D3 General Update Pattern with `selectAll`, `data`, and `join` to bind an array of objects containing x, y, radius, and fill properties to circle elements. A light green background is applied via inline styles, and each circle uses a semi-transparent opacity value. The visualization demonstrates dynamic attribute assignment through arrow functions and method chaining within a `main` export function.

Bbharathavulapati@gmail.com
83% match
Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell
82% match
Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

KKal
82% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and update SVG circles with D3.js, using a data-driven approach where each circle’s position, radius, and fill color are bound to an array of objects. The code employs D3’s `select`, `selectAll`, `data`, and `join` methods to manage DOM elements, while method chaining sets circle attributes like `cx`, `cy`, `r`, and `fill`. It also shows how to set the SVG container’s dimensions from the parent element’s client size. The visualization serves as a tutorial illustration of D3’s general update pattern, with data defined inline rather than loaded externally.

RRohithNaiduDevareddy@my.unt.edu
82% match