Skip to main content
SimilarExport ZIP
100%

Open Chord Shared Ad Blocks

✓ Published0🌍 Public
TTheShetland
Last edited Jul 19, 2018
Created on Jul 19, 2018

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.

AI-generated description

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

forked from <a href='http://bl.ocks.org/SkiWether/'>SkiWether</a>'s block: <a href='http://bl.ocks.org/SkiWether/f2afd0b8a8bacb4f24c8'>Chord diagram showing co-occurrences.</a>

mit Licensed

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

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.

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

fresh block

A chord diagram visualizes the flows between data nodes, with colored ribbons connecting segments around a circular layout. The example loads a JSON file containing hierarchical data with import relationships, then maps those relationships into a matrix of source-target counts. Using D3 v3's `d3.layout.chord`, it renders SVG arcs for each group and curved paths for chords, with colors assigned by a categorical scale. The visualization is built with an inner and outer radius, showing the structure of interconnections across the dataset.

PPragyagarg
71% 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…

Chord

This visualization uses a chord diagram to display the pairwise relationships in a 10x10 numeric matrix, with each node representing a class from a CSV file. The diagram shows ribbons connecting the nodes, where each ribbon’s color reflects the source or target node based on which has a higher value, and its opacity is fixed at 0.5. The code loads data with `d3.csv` and `d3.json`, then uses `d3.chord` to compute the chord layout, `d3.ribbon` for the connecting paths, and `d3.arc` for the outer arcs, all rendered as SVG within a React-compatible HTML page using D3 v6.

Vvivianaaai@qq.com
70% 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
70% match