Fork of Marks and Channels

100%

Fork of Marks and Channels

✓ Published1🌍 Public

Last edited Feb 6, 2023

Created on Feb 6, 2023

This fork of the marks and channels example displays Stanley Cup win totals for the original six NHL teams in a donut chart. The visualization uses color as a channel to distinguish teams, with a legend absent. The code employs d3-shape’s `pie` and `arc` generators to compute the arcs, drawing them as SVG paths with fills from a hardcoded color array. Data is embedded directly in `viz.js`, and the chart renders centered in an SVG that fills the viewport.

AI-generated description

Number of Stanley Cup wins for each of the original 6 NHL teams. Uses d3-shape pie and arc generators.

MIT Licensed

Similar vizzes

Loading thumbnail…

Project

This visualization displays the cumulative number of Stanley Cup playoff wins for each of the original six NHL teams across a sliding timescale from 1918 to 2018. A donut chart updates dynamically as a slider adjusts the year cutoff, with each team’s slice colored distinctly via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.pie()` to generate arc data and `d3.arc()` to render paths, filtering and grouping the CSV data by team and year with `d3.groups`.

Sstchiang

81% match

Loading thumbnail…

Fork of Marks and Channels

This fork of Marks and Channels demonstrates how different visual encodings—position, length, size, shape, and hue—can represent data, alongside a pie chart showing cuisine order counts. The example uses D3 v7 (`d3.select`, `d3.pie`, `d3.arc`, `d3.symbol`) to render circles, rectangles, and paths for each mark, with data for American, Japanese, Chinese, Indian, and Mexican cuisines. The pie chart applies a categorical color scale with labels positioned via `arcGenerator.centroid`, while the other marks use fixed or data-driven attributes to show alternative encodings.

Jjjlaber

80% match

Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B

77% match

Loading thumbnail…

Fork of Marks and Channels

This example visualizes the fundamental concept of marks and channels in data visualization, using six small multiples to demonstrate how the same dataset can be encoded through position, size, length, shape, and color. Each SVG panel uses a distinct D3 encoding, such as circles scaled by radius or symbols generated via `d3.symbol()`. The code relies on D3's selection API with `.join()` and `.each()` to create and update the graphics, along with color schemes like `schemeCategory10` and JavaScript modules to organize the distinct channel implementations.

NNICHAPA

77% match

Loading thumbnail…

Fork of Marks and Channels

Fork of Marks and Channels demonstrates five distinct visual encodings for a dataset of indices 0 through 4: x-position, y-position, size, length, and shape, plus a final panel showing hue with `schemeCategory10`. Each panel renders as a separate SVG using `d3.select` and data joins via `.join()`. The code imports specific D3 APIs such as `symbol()` and `symbolsFill` for shape encoding, alongside basic `attr` assignments for positioning and scaling.

Mmavercikalvin

76% match

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

MMar-99

76% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of a D3.js v4 zoomable sunburst chart displays a donut (or pie) diagram built from a static, hard-coded dataset containing five named values. The visualization encodes each categorical value as an arc segment, using a custom ordinal color scale for distinct fills and black strokes with partial opacity for clarity. The implementation relies on the `d3.select`, `d3.pie`, `d3.entries`, `d3.scaleOrdinal`, and `d3.arc` APIs from the D3 v4 library to compute and render the paths inside an SVG container, with a fixed width and height of 450 pixels.

KKian Fay

75% match

Loading thumbnail…

Fork of Marks and Channels

A scatterplot maps four data points along x and y axes, each representing paired win rates between two categories. The visualization uses d3.axisBottom and d3.axisLeft to render scales, while d3.scaleLinear maps the 0–100 data range to pixel coordinates within a fixed 400x150 SVG canvas. The chart demonstrates basic mark placement with spatial position channels, though it does not encode additional visual variables like shape or color.

QQingyang Wang Profolio

75% match