Skip to main content
100%

Recreate Marks and Channels

✓ Published0🌍 Public
YYouthBread
Last edited Sep 26, 2017
Created on Sep 26, 2017

This example recreates a visualization of marks and channels using a grid of eight circles mapped to categorical positions. A black line connects two circles, and clicking the “New Line” button draws a randomly selected red line between two different points, with previous red lines removed. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for positioning, and includes hover tooltips that display circle names via a styled div. Interaction is driven by button-triggered `draw_line` functions and mouse events.

AI-generated description

This is the recreate a example of Marks and Channels with a button to create new line.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Re-create Marks & Channels Graphic!

This example recreates a static graphic illustrating marks and channels using D3 v5 with SVG rendering. It shows a rectangular frame containing a series of red circles connected by black line segments, forming a simple network diagram. The code uses D3 selections to append SVG elements, including `rect`, `circle`, and `path` primitives, with hard-coded coordinates and attributes like `cx`, `cy`, `r`, and `d` to position and style each mark. No data binding or interactive behavior is present; the visualization is purely illustrative.

Ssrrajendran
84% match
Loading thumbnail…

Re-create Marks & Channels Graphic

This example recreates a marks-and-channels graphic by drawing a curved line through a set of six predefined points. The path uses D3’s `line` generator with `curveCardinal` interpolation to produce a smooth spline, while small circles mark each data point. The code selects the SVG `path` and appends `circle` elements for every point, using raw coordinate arrays from the dataset. Rendering is done with D3 v5 and SVG, with the line styled via CSS as a gray, unfilled stroke.

Wwangjonathan
83% match
Loading thumbnail…

plot

This visualization demonstrates the foundational concept of Marks and Channels through a series of simple, generated datasets. It renders points, lines, and rectangles using D3’s `select` and `join` API, with each channel—x-position, y-position, size, length, and color—varied independently to show how data attributes map to visual encodings. The bar chart uses horizontal line lengths, while scattered circles and a color scheme from `d3.schemeCategory10` illustrate categorical hue. The code is modular, with separate JavaScript files for each mark and channel, and relies on D3 modules for the SVG rendering.

Aalexwd019@gmail.com
79% match
Loading thumbnail…

Marks and Channels

This example demonstrates the core visualization concept of marks and channels by rendering five separate SVG panels. Each panel uses the same dataset of five values to illustrate different visual encodings: X position, Y position, circle size, bar length, shape variety, and color hue. The code leverages the D3.js library, specifically using `selection.each()` to iterate over the panel generator functions. It applies D3’s `schemeCategory10` for categorical colors, custom `symbol()` paths for varied shapes, and sets positions and dimensions via `attr()` calls. The visualization serves as a clear, side-by-side comparison of how different channels encode identical data.

Aabell@wpi.edu
79% match
Loading thumbnail…

Marks and Channels

This visualization demonstrates the concept of marks and channels, showing how position (x and y), size, length, shape, and hue encode data in separate SVG panels. Each panel uses D3 joins to bind the array [0, 1, 2, 3, 4] to circle, rect, and path elements, with attributes like `cx`, `cy`, `r`, `height`, and `fill` set via scale-like functions. The code imports from the `d3` module, using `schemeCategory10` for color, `symbol()` and `symbolsFill` for shapes, and `selection.each()` to dispatch each mark function.

CCurran Kelleher
78% match
Loading thumbnail…

Marks and Channels Shape using D3

This example uses D3 to draw a square outline with a set of lines and circles within it, arranged to explore the marks-and-channels concept of shape. The code leverages D3’s SVG manipulators—appending a `<rect>`, `<line>`s, and `<circle>`s via `select`, `append`, and `attr`—with fixed coordinates to create a geometric composition. Rendered as SVG on a white background, the square’s stroke and fill, the gray lines, and the dark circles demonstrate varied visual channels.

KKCachel
78% match
Loading thumbnail…

Labeled Marks and Channels

This visualization demonstrates the variety of visual channels available for encoding data, presenting eight separate SVG panels—each labeled with a mark type (position, size, shape, color, texture) displayed as a row of five circles, rects, or paths. The example uses D3.js to construct the charts, with each mark’s properties (e.g., x-coordinate, radius, fill color via `hcl()`, or pattern fill) tied to the data index. The code provides a hands-on reference for how to implement different channels, from positional and size variations to color hue, luminance, saturation, and geometric or texture-based marks.

CCurran Kelleher
78% match
Loading thumbnail…

Recreate Marks with ellipse

This example recreates a small graphic from Chapter 5 of *Visualization Analysis & Design* using D3.js v4, rendering six distinct marks—four ellipses and two circles—in light blue on an SVG canvas. The visualization highlights how different mark shapes encode data points, with varied radii and positions suggesting categorical or quantitative distinctions. The code uses static SVG `<ellipse>` and `<circle>` elements directly in the HTML, with no data binding or interactive behavior. It demonstrates a simple, hard-coded approach to reproducing a published chart, relying on D3’s minimal role for element creation and styling. The rendering is purely SVG-based, with no axes or scales, focusing solely on mark geometry.

FFanYang715
78% match