Skip to main content
SimilarExport ZIP
100%

Book LRND3 v4 Chapter2 - Part2

✓ Published1🌍 Public
Ssakhabutdinov
Last edited Jan 3, 2020
Created on Dec 23, 2019

This example displays a static SVG composition with a French text label, a green semi-transparent circle, two overlapping ellipses, a blue line, and a rounded rectangle. The shapes are drawn using D3 v5 selection methods like `append`, `insert`, and `selectAll`, with attributes set via `.attr`. A single transform chain applies translate, scale, rotate, and skewY operations to all ellipses and the circle. The code follows the chapter’s chart factory pattern, creating an SVG container sized to the window with margin offsets.

AI-generated description

Second Chapter in the book of Rinninsland and Teller

MIT Licensed

Similar vizzes

Loading thumbnail…

Book LRND3 v4 Chapter4

This example demonstrates various D3.js v5 scale and shape techniques using SVG rendering. It creates a chart with ordinal scales mapping 30 data points to point and band positions, displaying symbols and colored rectangles with d3.schemeCategory10 and schemeSet1-3. The visualization also plots the Weierstrass function using linear, identity, power, and log scales with d3.line paths. Additional elements include sine wave paths, areas with curve interpolation, arcs using d3.arc, and custom symbol shapes.

GGeolffrey S Mena
78% match
Loading thumbnail…

Book LRND3 v4 Chapter4

This example demonstrates a variety of D3.js scale types and SVG path generation techniques from a chapter on scales and shapes. It renders ordinal, point, and band scales with colored symbols and rectangles, then plots a Weierstrass function through linear, identity, power, log, quantize, and threshold scales. Additional sections display sine wave lines with step and basis curves, filled areas, arcs, and custom SVG symbols. The code uses d3.scaleOrdinal, d3.scaleLinear, d3.line, d3.area, d3.arc, and d3.symbol, all rendered as SVG elements.

Ssakhabutdinov
77% 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
77% 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
77% match
Loading thumbnail…

Circle and Ellipse

This example shows a collection of blue circles and ellipses arranged on a white canvas inside a rectangular frame. The shapes vary in size and orientation, including large and small circles, plus horizontally and vertically flattened ellipses. The visualization uses D3 v5, importing `select` from the d3 module to manipulate the SVG. All shapes are appended directly to an SVG element with fixed positions and dimensions, using D3’s selection and attribute methods to set coordinates, radii, and fill colors. No data source or interaction is involved; the display is purely static.

CChooo4u
77% match
Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes and dynamic styling interactions. A light blue rectangle serves as a canvas containing a circle, ellipse, text label, and line. Using D3 v6 selection methods, hovering over the circle turns it yellow, clicking the circle turns it red, and clicking the line thickens it. Clicking anywhere on the SVG updates the text element to display the cursor’s coordinates via `d3.pointer`. The page also mixes plain HTML headings and paragraphs with CSS rules for color and font styling.

JJoyce Robbins
77% match
Loading thumbnail…

Circle and Ellipse

This example demonstrates a geometric composition of circles and ellipses within a rectangular frame. The visualization uses D3 v5’s `svg` selection and appending methods to draw shapes, including a large circle, a horizontal ellipse, and several small points, all filled in steel blue. The SVG canvas is 960 by 500 pixels, with a manually defined path outlining the frame. The code directly sets shape attributes like `cx`, `cy`, `rx`, and `ry` to position and size each element.

CChooo4u
77% 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
77% match