100%

d3js Exercice 3 - svg

✓ Published0🌍 Public

Last edited Oct 10, 2017

Created on Oct 10, 2017

This example demonstrates a minimal SVG composition built with D3.js v4, combining geometric shapes without data binding. It shows a blue rectangle and a yellow circle positioned inside an SVG canvas of fixed dimensions, highlighting how basic shapes render and layer in a web document. The code explicitly uses D3’s selection and styling methods, though the main styling is applied directly via SVG attributes such as `width`, `height`, `fill`, and `cx`/`cy` for positioning. The visualization serves as an introductory exercise, with commented-out instructions suggesting color manipulation and transforms like `translate` and `rotate`. No dynamic data is involved; the focus is purely on static SVG rendering and potential interactive styling adjustments.

AI-generated description

d3js Exercice 3 - svg

Similar vizzes

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

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

82% match

Loading thumbnail…

D3 SVG

This example demonstrates basic SVG shapes rendered with D3.js, showing how static geometric elements can be drawn directly in a web page. It displays a blue circle and a rectangular outline with a stroke, positioned at fixed coordinates within an SVG canvas of 500 by 960 pixels. The code uses the D3.js library to construct the SVG container and its child elements, with circle and rect tags defining the visual properties. The rendering approach relies on D3’s SVG manipulation capabilities, though no data binding or dynamic updates occur, as the shapes are hardcoded in the HTML structure.

MMohd Sameer

81% match

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

SSagar Malviya

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

80% match

Loading thumbnail…

SVG Exercise

This example demonstrates basic SVG shape drawing and styling within a static, hard-coded visualization. It shows three concentric circles centered at the same coordinate, with each circle filled in yellow, red, and green respectively to create a layered target-like effect. A large rectangular shape with a navy stroke is positioned beside the circles, while a diagonal line and a path with a squared segment extend across the canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—with attributes for positioning, fill, stroke, and width, all defined directly in the markup without any JavaScript library or data binding.

AAbdishakur Hassan

80% match

Loading thumbnail…

D3.js

This example uses D3.js version 5 to draw a simple yellow face with black outlines on an SVG canvas. It demonstrates basic SVG shape creation by appending a large circle for the face, two smaller circles for eyes, and an arc path for a mouth, all transformed to center within a 960×500 viewport. The code highlights direct manipulation of SVG attributes like `r`, `cx`, `cy`, and `fill`, and constructs the mouth using an arc generator with specified inner and outer radii and angular ranges.

Aalihakan34

80% match

Loading thumbnail…

D3 textbook

This example shows a simple SVG face built from two circles with a black border and eye, rendered on a yellow background. It demonstrates basic D3 v7 selection and attribute-setting methods, using `select` on the existing SVG element and appending circle shapes with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code reads the SVG’s height and width attributes to position the shapes relative to the viewport center. The visualization relies entirely on static SVG markup created programmatically, with no data binding or interactive behavior.

Ppinlin0816157

79% match