Skip to main content
SimilarExport ZIP
100%

My Custom Shapes

✓ Published0🌍 Public
RRobertDelgado
Last edited Oct 14, 2017
Created on Oct 14, 2017

This example demonstrates how to render custom geometric shapes—squares and triangles—in an SVG scene using D3.js v4. It defines a `shapeDefs` object with functions that construct SVG path strings via the `d3.path` API, and then uses a data join to draw the shapes. The code showcases the enter, update, and exit pattern by first rendering a dataset of three nodes, then re-rendering with a second dataset, which removes the red square. Each shape’s position and color are stored as data properties and applied through `transform` and `fill` attributes.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. Circles and rectangles are drawn with static positions, colors, and stroke properties, while a line and path are grouped together to showcase shared stroke attributes. The visualization uses D3 v5 imported via UNPKG and leverages the `select` function from D3, though the code primarily relies on raw SVG markup within the HTML. Local ES6 modules and CSS from external files are also imported to structure the project.

MMuiruriscode
80% 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
80% match
Loading thumbnail…

Make Shapes

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with varied colors, strokes, and transforms. It demonstrates fundamental SVG rendering in a static scene without interaction. The code loads D3 via UNPKG, but primarily uses native SVG elements and CSS styling. It also showcases local ES6 module imports through `myMessage.js` and applies group-level attributes like `fill` and `stroke` for visual organization.

Yyejichun@naver.com
80% match
Loading thumbnail…

SVG Shapes

This example demonstrates fundamental SVG shape elements—circle, rect, and line—positioned within a fixed 960 by 960 coordinate system. The visualization compares shapes with default styling against those customized with explicit `fill` and `stroke` attributes, while a `<g>` group applies shared `fill="teal"` and `stroke="black"` to its children. Beyond these static SVG primitives, the code also showcases basic D3 integration by importing `select` from `d3` and using it to set the text content of a div element, along with a separate ES6 module export. The rendering relies entirely on SVG markup.

YYogesh Joshi
79% match
Loading thumbnail…

Shapes SVG

This example demonstrates the basic SVG shapes—circles, rectangles, lines, and paths—rendered with both default and explicit fill and stroke styling. A nested group transforms shapes by translating them and applying a blue fill with a black stroke, while a separate group uses no fill and a thick stroke for line and path elements. The visualization is built with D3.js v5 and relies on static SVG markup, with a scale transform applied to enlarge the entire graphic.

SShirley Guo
79% 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
79% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling. A single SVG canvas is rendered, and D3 is loaded to manipulate it, referencing CSS classes for line properties. The visualization uses the SVG rendering approach and D3 v5 framework, with styles defining stroke colors and widths for path elements. The code sets up the SVG element with a fixed width and height, but the specific shape-drawing logic is incomplete in the provided file.

Ssourcebox-bug
79% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes in an SVG canvas, displaying circles and a rectangle with default black fills except for one red circle. The scene is rendered entirely through SVG markup, with external styling handled by a CSS stylesheet. The code uses the D3.js `select` function to update a message element’s text content, while also showcasing an ES6 module import from a local file. The page layout is set with CSS to remove margins and hide overflow.

Rrmaldonadosnz
79% match