D3.js Basic Shapes

100%

D3.js Basic Shapes

✓ Published0🌍 Public

Last edited Feb 17, 2018

Created on Feb 16, 2018

This example demonstrates fundamental SVG shape creation and geometric transformations using D3.js v4. It draws circles, lines, and rectangles with various colors and stroke widths, then shows how to apply translation, scaling, and rotation operations to these shapes. The code appends SVG elements directly to the body and uses D3's selection methods to set attributes like `cx`, `cy`, `r`, and `transform`, and includes text labels to annotate each operation.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e19eecca526f9301dc057d23aa6f915d'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how D3 version 7 renders basic SVG shapes—circles, rectangles, and a line—within an HTML page. The SVG markup shows explicit styling through inline attributes (like `fill="red"` or `stroke-width="5"`) and group elements using `transform` for positioning and scaling. A separate `styles.css` file resets body margins and hides overflow, while D3 is loaded from a CDN but not used for drawing. The code also references a `bundle.js` file, indicating a potential bundling step, though the visible shapes are static and rely solely on SVG and CSS rather than dynamic D3 data binding.

Aash301

84% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jjakenachlas

84% match

Loading thumbnail…

Basic shapes

This example demonstrates a collection of fundamental D3.js shapes, including circles, rectangles, arcs, lines, and paths, all rendered as SVG elements on a canvas. It showcases various ways to construct these shapes, such as using the `d3.arc` function for annular sectors, `d3.line` for splines, and data-driven bindings with `.datum()` and `.data()`. The scene also includes programmatically generated rectangles with a purple fill, a pink circle, and a custom path created via `d3.path`. A small CSV dataset is linked but not directly used. The code relies on D3 v6 for shape creation and SVG manipulation.

Hhanulik.ondrej@gmail.com

84% match

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—using SVG elements embedded directly in an HTML page, with styling controlled through CSS. The code uses D3.js v5 to select the SVG container and relies on standard SVG attributes like `cx`, `r`, `x`, `y`, and `d` to define geometry. A simple transform group shifts and scales the shapes, while stroke and fill properties, including a blue fill with black stroke on a subgroup, show how visual appearance is set.

DDaniel Weston

83% match

Loading thumbnail…

SVG Basics

This example demonstrates fundamental SVG drawing primitives in D3 v5, including circles, rectangles, lines, and paths. The code shows how to position shapes using coordinates, apply fills and strokes, and leverage SVG groups with transform attributes for translation and scaling. It also illustrates path commands like M and L for creating connected lines. Styling is applied through both inline attributes and a CSS class defined in styles.css, highlighting basic SVG composition techniques.

Ssploitfun

83% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000

82% match

Loading thumbnail…

Let's make a face d3.js

This example demonstrates basic SVG shape construction and styling within a D3.js context. It displays circles, rectangles, lines, and a path using various colors, fill properties, and stroke attributes, with groups applying transformations like scaling and translation. The code uses raw SVG elements inside an HTML document, leveraging D3 v5 only for loading the library, while all rendering is handled through static SVG markup and CSS for page overflow control.

DDanielOX

82% match