d3 test

100%

✓ Published0🌍 Public

Last edited Mar 28, 2020

Created on Mar 28, 2020

A small SVG canvas displays three abstract shapes: a darkblue circle, an orange square, and a crimson star, each positioned at different vertical offsets. The code defines a custom `shapemaker` function that appends the appropriate SVG element based on a `shape` property from a data array. It uses d3.v5’s selection and data binding, with `d3.symbol` and `d3.symbolStar` for the star path, and hardcoded fallback attributes for position and size when data values are missing.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3 test

This example demonstrates how to create and place basic geometric shapes—a circle, a square, and a star—on an SVG canvas using D3 v5’s data-join and custom append function. The code defines an array of shape objects, binds it with `svg.selectAll().data().enter()`, and then appends each element via a `shapemaker` function that returns the appropriate SVG node. The function uses D3 selections and the `d3.symbol` API with `d3.symbolStar` to generate the star’s path, while styling defaults like `steelblue`, `orange`, and `crimson` are applied conditionally. Rendering is static SVG, with no interaction or transitions.

Aadelaide01

93% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

81% 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…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2

80% match

Loading thumbnail…

Lab 3 SVG and D3

This example demonstrates basic SVG shape rendering and D3 selection manipulation. It displays multiple rectangles, an ellipse, a red teardrop-like path, and a yellow star-like polygon on a blank canvas. The code uses d3.v4 to select all rectangle elements via `d3.selectAll('rect')`, applies a red fill style, and iterates through each with `.each()` to set an `r` attribute. The SVG layout uses explicit coordinates and a transform translation for the grouped central shapes, with CSS styling linked from an external stylesheet.

AArthur Kozhevnik

79% match

Loading thumbnail…

d3.bayview walkthru

This example demonstrates a decorative, static composition of orange and red geometric shapes—a large rotated rectangle and multiple circles—rendered within an SVG canvas. The code applies a shared CSS style to both `rect` and `circle` elements, giving them a blue stroke with dashes and transparency. It uses D3.js version 3.5.5, referencing the `d3.select` API, though the primary drawing is hand-coded in markup. The gist includes a minimal HTML file and README, with the shape placement and attributes defined directly.

GGordyD

78% match

Loading thumbnail…

D3 Testing

A hand-drawn-style face constructed from three SVG circles, rendered via static HTML and CSS within a D3-less page title. The code directly specifies circle positions, radii, and styling attributes—a yellow head with a thick black stroke, plus two black eyes—without using any D3 APIs or JavaScript logic. The example serves as a minimal visual test of SVG shape rendering and basic geometry layout, with the viewport set to 960 by 500 pixels and overflow hidden.

AArne Bab

78% match

Loading thumbnail…

D3 testing1

This example draws a single SVG circle and text element using D3 v5, displaying the number "3" in blue. The code defines a reusable `createNumIcon` function that appends a stroked circle and a text label to an SVG canvas via `d3.select` and the `append` and `attr` methods. The circle has a fixed radius of 20 pixels and a blue stroke, while the text uses Arial font at 35 pixels. No data is loaded; the visualization is purely static and demonstrates basic SVG shape creation with D3.

PPere Ginebra Solanellas

78% match