d3 exercise figma

100%

d3 exercise figma

✓ Published1🌍 Public

Last edited Nov 26, 2022

Created on Nov 26, 2022

Forked from Fork of Fork of Fork of Fork of HTML Starter

A single blue, irregularly shaped blob sits centered on a white canvas within an SVG, its outline drawn with a thick black stroke. The shape is defined by a fixed path of cubic Bezier curves, rendered directly in the markup. This React example uses raw SVG elements with no D3.js or JavaScript functions, demonstrating how to create a static vector illustration using the `path` node. The code includes an empty viewBox and inline CSS styling for the text and body elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3 path-I

This example showcases a single, closed curved shape rendered as a stroked SVG path, creating a geometric knot-like form that stands alone on a blank white canvas. The path’s coordinates are provided as a static string in the `d` attribute, defining the outline with a smooth cubic Bézier curve that draws the shape twice to connect its interior and exterior contours. Built with D3 v6 inside a React-free HTML page, the code selects the `body` element, appends an SVG container of 960 by 500 pixels, and uses `d3.select` and `append` to add the path. The stroke is colored blue with a width of 2 pixels, and the fill is explicitly set to none, leaving only the outline visible.

NNita

80% match

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

80% match

Loading thumbnail…

d3 prac

This example shows a simple static composition of two basic shapes within an SVG: a red circle and a blue outlined rectangle. The code uses raw SVG elements directly in the HTML, placing the circle at coordinates (50, 50) with a radius of 50, and a 200x200 rectangle with a 20-pixel blue stroke starting at (10, 10). Nothing is interactive or animated; it demonstrates the fundamental syntax of SVG drawing within a React context.

Mmaryong2

79% 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

79% match

Loading thumbnail…

d3

This example demonstrates a single red circle with a green stroke, centered inside a 500-by-500 SVG canvas. The code uses D3 v6 to select the SVG element, append a circle, and set its radius, position, and fill and stroke colors via attribute methods. The visualization anchors the circle using fixed pixel coordinates, while the body text is styled with a 13-em font size for a bold, minimal layout.

Ggyanendra verma

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes on a blank canvas, displaying a circle, rectangle, line, and path with varied colors and stroke styles. The static visualization uses raw SVG markup within an HTML page, with no external data sources or JavaScript libraries. Elements are positioned via explicit coordinates, including a green rectangle with a red border and a navy path drawn using the `d` attribute. The code relies solely on native SVG APIs and inline attributes to render the geometric primitives.

DDobrin Stoilov

78% match

Loading thumbnail…

D3-SVG Basics

This example demonstrates the fundamental building blocks of SVG graphics within a minimal HTML page, showing a simple text message alongside basic shapes including two circles, a thick navy line, and a green path. The code uses raw SVG elements—namely circle, line, and path tags—directly in the document markup, with CSS styling applied to the message text. The line element contains a duplicated x2 attribute and placeholder text, while the path illustrates a simple coordinate-based drawing command sequence. The page relies on no JavaScript libraries, serving purely as a static demonstration of HTML, CSS, and SVG syntax.

NNhat Nguyen

78% 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

78% match