Marks & Channels Graphic

100%

Marks & Channels Graphic

✓ Published0🌍 Public

Last edited Nov 7, 2018

Created on Sep 11, 2018

This example reproduces a treemap visualization from the Marks & Channels Graphic in Chapter 5. It uses d3.hierarchy and d3.treemap with a slice-dice tiling to layout nested data from a custom JSON file, coloring each leaf as a simple rectangle. The SVG rendering assigns each leaf a `<g>` group and a `<rect>`, sized proportionally to its data value. The code references D3 v4 and Curran’s treemap example as its basis.

AI-generated description

A simple example of the treemap visualization. The goal was to attempt to reproduce a visualization from the Marks & Channels Graphic from Chapter 5.

This code is based on the example of the treemap in Curran's viz: https://vizhub.com/curran/040aadea1c6740df819f410f2828a552

MIT Licensed

Similar vizzes

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

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

77% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

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

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

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

76% match

Loading thumbnail…

Marks and Channels_NH

This example demonstrates how different visual channels can encode the same quantitative data. Seven circles are horizontally positioned by value, with their size, position, and color all reflecting the data. The visualization cycles through three distinct encoding methods: length, where bars of varying height represent values; size, where circles use square-root scaling for area; and hue, which assigns categorical colors from `d3.schemeCategory10`. Built with D3 v7, it uses data joins and selection methods to render the SVG marks.

NNavak94

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

75% match