HW Re-create Marks & Channels Graphic

100%

HW Re-create Marks & Channels Graphic

✓ Published0🌍 Public

Last edited Oct 30, 2018

Created on Sep 11, 2018

This visualization recreates four basic symbol marks—cross, circle, square, and triangle—arranged horizontally across the center of an SVG canvas. The marks are generated using d3.symbol with a fixed size of 1000, while a d3.scaleLinear maps the array index to x-coordinates spaced 200 pixels apart. Each symbol is rendered as a purple-filled SVG path element, selected and bound to data via d3.select and data joins. The code uses d3 v5 and relies on importing select, scaleLinear, and symbol from the d3 module.

AI-generated description

Recreate 4 shapes using d3.symbol.

MIT Licensed

Similar vizzes

Loading thumbnail…

Re-create Marks & Channels Graphic

Four simple SVG shapes—a cross, circle, square, and triangle—stand in a diagonal line, each rendered as a symbol from D3's `d3.symbol()` API. The shapes demonstrate distinct mark types using the `d3.symbolCross`, `d3.symbolCircle`, `d3.symbolSquare`, and `d3.symbolTriangle` generators. Each path is positioned via a `transform` attribute that calculates x-coordinates from an array index and adds a slight vertical offset, while a fixed `size` of 50 by 50 keeps them uniform. The code binds the data array with `selectAll` and `enter`, then applies attributes using `attrs` from d3-selection-multi, running entirely with D3 v4 in an SVG container.

RRainismZ

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

80% match

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

80% match

Loading thumbnail…

Marks and Channels

This example demonstrates D3 marks and channels by rendering six small multiples, each using a different visual channel—x position, y position, size, length, shape, and hue—to encode the same array `[0,1,2,3,4]`. Each SVG is generated using D3’s `select`, `selectAll`, and `join` API, with channels implemented via attribute callbacks like `attr("cx", ...)` and `attr("r", ...)`. It also uses `d3.symbol()` for generating SVG path symbols, `d3.schemeCategory10` for color, and the `selection.each()` method to apply each channel’s function. The code uses the `d3` module from a local script, relying on `d3.select`, `d3.selectAll`, and `d3.join` to build and update the SVG elements.

CCurran Kelleher

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

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

This visualization demonstrates the concept of marks and channels in data visualization, showcasing how different visual encodings represent the same dataset. Using D3 version 7.8.5, six separate SVG panels each apply a distinct channel—X position, Y position, size, length, shape, and hue (color)—to encode the data points [0, 1, 2, 3, 4]. The code leverages D3’s `selection.each()` to iterate through these channel modules, `d3.symbol()` for path generation, and `schemeCategory10` from D3 for color mapping. It also utilizes SVG rectangles, circles, and path elements with `transform` and `fill` attributes.

Mmelissastrong89@gmail.com

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

77% match