Lines

100%

✓ Published0🌍 Public

Last edited Sep 9, 2018

Created on Sep 9, 2018

Forked from Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

AI-generated description

Inspired by a figure from chapter 5 of Tamara Munzner's excellent book "Visualization Analysis and Design".

MIT Licensed

Similar vizzes

Loading thumbnail…

Lines

Jjons288

100% match

Loading thumbnail…

Lines

Jjons288

100% match

Loading thumbnail…

Untitled

Two SVG canvases demonstrate basic line drawing with D3 v5. The first shows a single fixed red line, while the second uses `d3.select` and `.enter().append('line')` to map an array of seven numeric values to multiple blue and green lines with varying coordinates. The blue lines position themselves horizontally based on array index, while green lines stagger vertically. Both use SVG attributes like `x1`, `y1`, `x2`, and `y2` with inline stroke styles, rendered against light and dark gray backgrounds. The page loads D3 from a CDN and renders purely as vector SVG without animation or interaction.

JJimMaltby

81% match

Loading thumbnail…

Learning D3

This example demonstrates a minimal SVG visualization composed of three horizontal lines, each drawn as a black path across a 960-by-500 viewport. The code uses static path elements with explicit coordinates, showing how basic shapes can be rendered without additional data or interaction. It incorporates an inline SVG in HTML with CSS and JavaScript, serving as a starting point for learning D3. The visualization relies solely on predefined path data, not on D3’s data-binding or scale APIs.

Bbetemaujkardi

76% match

Loading thumbnail…

Lines

A React application renders an SVG scene of red and black lines, with three diagonal black lines crossing vertical red strokes against a plain background. The example demonstrates basic SVG shapes within a React component, using `<line>` elements positioned via coordinate arrays. The SVG canvas is 960 by 500 pixels, and the styling applies thick stroke widths to both line types and paths. The code maps over hardcoded x-coordinates to generate the line elements, though the current implementation contains an undefined variable reference that would prevent successful rendering. The visualization highlights simple geometric composition using React’s declarative rendering approach with SVG.

NNita

76% match

Loading thumbnail…

Shape with SVG and CSS

This example displays a minimalist SVG canvas filled with overlapping black lines shaped into rounded, green-edged polygonal forms. The visualization leverages D3 v5 strictly for logging the library to the console, while the visual output is driven entirely by SVG and CSS. The `styles.css` file defines stroke colors, widths, and line joins for elements grouped under the class `.lines`, creating a simple geometric composition with no dynamic data or interactions.

CCassie-Xiao-Yu

76% match

Loading thumbnail…

SVG Path

This example demonstrates SVG path drawing primitives by rendering a grid of vertical and horizontal lines using D3 v5. It creates a 10x5 lattice of green strokes on an SVG canvas with a viewBox of 100x50 units. The code uses `d3.select` to append the SVG element and `d3.range` to generate data arrays, then appends path elements whose `d` attribute strings are constructed with template literals for `M` (moveto), `V` (vertical line), and `H` (horizontal line) commands. The rendering relies entirely on SVG path syntax without additional geometry libraries.

RRubens

76% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates fundamental SVG and CSS shapes, including circles, rectangles, lines, and a path, organized within a scaled group. It shows how CSS classes like `.lines` apply stroke styling to the SVG elements, while inline `fill` and `stroke` attributes override defaults for specific shapes. The visualization uses D3.js’s `select` function to update a text message in the DOM. Rendering occurs through SVG elements with transforms, such as `scale` and `translate`, to reposition groups and illustrate basic vector graphics composition.

JJSR2000

76% match