Skip to main content
SimilarExport ZIP
100%

Open Chord Shared Ad Blocks

✓ Published0🌍 Public
SSkiWether
Last edited Aug 7, 2015
Created on Aug 6, 2015

This interactive chord diagram visualizes the shared advertising blocks among five soda brands: 7-Up, A&W, Coke, Dr Pepper, and Pepsi. Each ribbon’s thickness and color encode the number of shared ad placements between brand pairs, with tooltips revealing exact counts. Built with D3 v3, the layout uses `d3.layout.chord()` for the matrix-based chord geometry, while SVG paths and arcs render the groups and ribbons with mouseover fading. The diagram supports responsive resizing via a `viewBox` and `preserveAspectRatio` attributes.

AI-generated description

Inspiration from Mike Bostock's chord diagram examples and others. Also the API reference layout for the chord layout.

Similar vizzes

Loading thumbnail…

Open Chord Shared Ad Blocks

This chord diagram visualizes shared ad blocks among five soda brands—7-Up, A&W, Coke, Dr Pepper, and Pepsi—using a matrix of co-occurrence counts. Built with d3.layout.chord, it renders SVG arcs and ribbons with interactive mouseover fading, labels, and tooltips showing exact shared values. The code uses d3.v3, scales, and SVG paths with animated opacity transitions.

KKevinRourke
97% match
Loading thumbnail…

Open Chord Shared Ad Blocks

This D3.js chord diagram visualizes how often five soda brands—7-Up, A&W, Coke, Dr Pepper, and Pepsi—share advertising blocks, with the matrix values encoded as chord width and color. Rendered as an animated SVG, the diagram uses `d3.layout.chord()` to position groups and chords, and `d3.scale.ordinal()` with a custom color palette. Hovering over a group fades the others, and tooltips reveal the exact shared-block counts. The visualization uses a viewBox and `preserveAspectRatio` for automatic resizing.

TTheShetland
96% match
Loading thumbnail…

Open Chord Shared Ad Blocks

The visualization displays shared ad blocks among five soda brands—7-Up, A&W, Coke, Dr Pepper, and Pepsi—using a chord diagram. Hovering over a group fades the other chords to highlight connections, with tooltips showing the count of shared ad blocks between pairs. Built with D3 v3, the SVG layout uses the `d3.layout.chord` API, along with `d3.svg.arc` and `d3.svg.chord`, and includes animated mouseover and mouseout fades. The dataset is a hardcoded co-occurrence matrix.

TTheShetland
95% match
Loading thumbnail…

Chord I

A chord diagram visualizes directed relationships among four entities, with ribbons showing the magnitude of flow between groups and colored arcs representing each group’s total. The layout mirrors Circos and Martin Krzywinski’s design. Built with D3 v4, the code uses `d3.chord` to compute the chord layout, `d3.arc` for the group arcs, and `d3.ribbon` for the connecting bands. Colors come from `d3.scaleOrdinal`, and tick labels are formatted via `d3.formatPrefix`, with matrix data hardcoded in the source.

MMorganhaoyu
75% match
Loading thumbnail…

Chord Diagram

This chord diagram visualizes a 4x4 matrix of directed relationships, with ribbon thickness and arc sizes encoding the numeric values. The static SVG renders using `d3.chord()`, `d3.arc()`, and `d3.ribbon()` layouts, with group ticks and formatted labels generated by `d3.formatPrefix`. Categories are assigned colors via `d3.scaleOrdinal` over a custom palette. The code defines its own `groupTicks` function to position tick marks along each arc, while ribbons are filled by target-group color with a darker stroke.

Mmbostock
73% match
Loading thumbnail…

Untitled

This example shows a chord diagram visualizing flows between four groups, with colored ribbons representing connections and arcs along the outer ring marking each group's total. The code uses d3.chord() to compute group and chord angles from a hardcoded 4×4 matrix, then renders the result as SVG paths. d3.arc() draws the outer segments, while d3.ribbon() generates the linking bands, with fill colors derived from each ribbon's source group. The visualization is built with d3.v4 and embedded in a minimal HTML page.

Mmaviszv
72% match
Loading thumbnail…

Chord Diagram Using D3 (From Graph Gallery)

A chord diagram visualizes the flow of values among four named entities—Allen, Betty, Charlie, and Dennis—using a 4x4 matrix as input. The d3.v4 library renders the diagram in SVG, with colored arcs and ribbons where each ribbon’s color matches its source group. Interactive mouseover events trigger tooltips displaying the source and target names, while a fading transition animates tooltip opacity on mouseout. The chart relies on `d3.chord()` for layout, `d3.arc` and `d3.ribbon` for geometry, and inline event handlers for tooltip display.

Eethanrampersaud@gmail.com
71% match
Loading thumbnail…

D3 - Chord Diagram

This chord diagram uses d3.chord and d3.ribbon to visualize a 3x3 matrix of numeric relationships as interconnected arcs. The chord generator sorts subgroups in ascending order and applies a 0.04 radian pad angle, while the ribbon generator sets a fixed radius of 200. Data is embedded directly in the JavaScript as a three-row array. The resulting SVG paths are rendered with d3.select and the join operation, which binds the chord data to path elements and assigns the ribbon path data. The styling in styles.css fills the paths with a light gray and adds a subtle stroke and opacity, creating a clean, static representation of the matrix.

SSubhendu Karmakar
71% match