Skip to main content
SimilarExport ZIP
100%

Re-create Marks & Channels Graphic!

✓ Published0🌍 Public
Ssrrajendran
Last edited Nov 7, 2018
Created on Sep 12, 2018

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.

AI-generated description

Re-create Marks & Channels Graphic

MIT Licensed

Similar vizzes

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

Re-create Marks and Channels Graphic

This example reproduces a marks and channels graphic as a static SVG. It displays three scatterplots that demonstrate how visual encodings, such as position, color, and size, map to data values. The plots use grey axes and reference lines, with blue circles as the primary marks. The SVG is constructed with nested `<g>` groups and `transform` attributes to create the layout. The code uses standard SVG elements like `circle`, `line`, and grouping, with styling defined in the CSS file. The rendering is purely SVG, without any JavaScript libraries or data processing.

NNTCHANG1289
84% 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
83% match
Loading thumbnail…

Re-create Marks and Channels Graphic

This visualization recreates a 2D marks and size channels graphic, demonstrating the encoding of quantitative values through the area of basic shapes. The SVG canvas displays two horizontal sequences of geometric marks: squares and circles, each arranged in four steps of increasing size. The example uses raw SVG elements—specifically `rect` and `circle`—to show how area encodes data, with the entire group scaled by an SVG `transform` attribute. No JavaScript libraries are involved; the rendering relies entirely on static SVG markup and external CSS for styling.

Vveagy
82% 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
81% match
Loading thumbnail…

D3 Marks & Channels

This example demonstrates five fundamental D3 marks and encoding channels using a small array of numbers. It shows circles positioned along the x-axis and y-axis, circles scaled by area, rectangles representing length, and symbols displaying different shapes. The visualization uses D3 v7 with the `select`, `symbol`, and `symbolsFill` APIs to bind data and generate SVG elements. The data is a simple fixed set of integers, rendered as multiple separate SVG canvases, each focusing on a distinct mark and channel combination.

SSubhendu Karmakar
80% 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
80% match
Loading thumbnail…

Marks and Channels

This example illustrates the fundamental concept of encoding data through different visual channels—position, length, size, shape, and color—using D3.js. Five distinct marks, each with a static array of five data points, are rendered in separate panels to demonstrate how changing a single channel alters the representation of the same data. The code uses the D3 `select`, `join`, and `attr` API to build SVG circles, rectangles, and paths, applying `schemeCategory10` for categorical colors and custom functions for scaling and positioning.

Kkratikashetty1102@gmail.com
80% match