Storytelling with a Chord Diagram - Switching between Phone Brands

100%

Storytelling with a Chord Diagram - Switching between Phone Brands

✓ Published0🌍 Public

Last edited Feb 1, 2018

Created on Feb 1, 2018

This interactive chord diagram visualizes the flow of Dutch respondents switching between phone brands, based on Deloitte’s 2014 Global Mobile Consumer Survey. It uses a D3 v3 layout with SVG, animating arcs, chords, and labels via transitions. A guided storytelling sequence reveals brand shares and migration patterns, with tick marks and percentage labels. The matrix data is hardcoded, and interaction relies on jQuery for click-driven progress.

AI-generated description

The "Storytelling with Data" version of a Chord Diagram about the Switching Behavior between Phone Brands as used in my blog on Using Data Storytelling with a Chord Diagram. It aims to explain how to understand the visualization to someone who has never seen a Chord Diagram before

It shows the flows of people between the phone brand of their previous phone and the current phone, based on data from the Dutch respondents of the Global Mobile Consumer Survey held in 2014 by Deloitte

forked from <a href='http://bl.ocks.org/bumbeishvili/'>bumbeishvili</a>'s block: <a href='http://bl.ocks.org/bumbeishvili/1d2baf77e9a099c72fd27cad224925a8'>Storytelling with Chord Diagram</a>

Similar vizzes

Loading thumbnail…

Chord Diagram - Phone Brand Switching Behavior

This example uses a chord diagram to visualize phone brand switching behavior among Dutch consumers, based on the Deloitte Mobile Consumer Survey. It shows the flow of respondents between their previous and current phone brands, with arc lengths encoding each brand’s market share and directed chords revealing asymmetries in switching patterns, such as Nokia losing 12% of its users to Samsung while only gaining 2% in return. The chart is built with D3.js v3, using the `d3.layout.chord` API to compute and render the chord paths and arcs, with mouseover interactions highlighting a selected brand. The rendering is animated, and the side text explains how thicker chords indicate higher percentages of switching.

MMorganhaoyu

89% match

Loading thumbnail…

Chord Diagram - ICTS globaal 2018

This chord diagram visualizes the flows of people between their previous and current phone brands, based on survey data. The interactive animation shows the movement of users across 31 service groups as interconnected arcs around a circular layout. Built with d3.v3, the visualization uses the chord diagram API to render the matrix of transition values, with colored ribbons representing directional flow magnitude between categories. The animation highlights changes over time, and the data is presented as raw numerical values in the source code, reflecting the 2018 ICTS global survey.

MMisunoKitara

78% match

Loading thumbnail…

Main.js

This line chart shows mobile phone sales by brand from 2010 to 2020, with each brand represented by a distinct colored line. The visualization uses d3.csv to load the dataset, d3.scaleBand and d3.scaleLinear for the x and y axes, and d3.line to draw the paths. SVG rendering is used, with the chart including axis labels and a title, while the color scale employs d3.schemeCategory10 to differentiate brands.

Ttelkapallyrekha@gmail.com

68% match

Loading thumbnail…

Chord Diagram - ICTS globaal

This interactive chord diagram visualizes the flow of staff between 27 IT service domains, based on the 2014 Deloitte Global Mobile Consumer Survey data. It shows the proportional relationships and transitions between departments, with each chord representing the volume of movement. The visualization, built with D3 v3 and JavaScript, uses a matrix of values to generate the chord paths and labels around the circular layout. It includes a tooltip functionality and a title overlay, providing a clear view of the interconnections within the organizational structure.

MMisunoKitara

68% match

Loading thumbnail…

Chord Diagram - ICTS globaal

This interactive chord diagram visualizes the flow of interactions between ICT service domains and organizational units, based on data from a Global Mobile Consumer Survey. The circular layout encodes directed relationships through colored ribbons, with each arc segment representing a specific domain. Built with D3.js v3, the visualization uses matrix-based data to control ribbon thickness and relies on jQuery and Bootstrap for the surrounding interface. Animated transitions and hover interactions allow users to explore the connections between categories, highlighting the relative strength of various cross-departmental relationships.

MMisunoKitara

67% match

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares eight attributes—such as battery life, brand, and price—across three smartphone categories. The SVG visualization uses filled, semi-transparent polygons with rounded strokes and animated glow filters, layered over circular grid lines labeled with percentage values. Built with D3 v3, it employs ordinal color scales, linear radius scaling, and cardinal-closed path interpolation to create smooth shapes. Interactive hover reveals tooltips with precise data, while a legend distinguishes each phone brand.

KKuerzibe

67% match

Loading thumbnail…

Activity-7.1_Q1

This D3.js visualization displays global smartphone market share as a pie chart, showing the proportion of users for each brand. The chart uses a custom color palette to distinguish brands and includes a legend listing each brand alongside its corresponding color. The code aggregates user counts by brand using `d3.rollup` and `d3.sum`, then renders the pie with `d3.pie` and `d3.arc` within an SVG. A custom `pieChart` function provides a fluent API for setting dimensions, data, and labels, making the chart configurable. The data is loaded from a remote CSV file containing smartphone usage statistics.

SSrihith Reddy Gaddam

67% match

Loading thumbnail…

Smoothed D3.js Radar Chart

This example presents a smoothed radar chart that compares three smartphone brands—iPhone, Samsung, and Nokia—across eight attributes such as battery life, brand, and price. The visualization uses a circular grid with five concentric levels, where each brand’s data forms a rounded, semi-transparent polygon with colored strokes and dots. Built with D3.js (version 3.5.6), it renders via SVG and includes a glow filter for aesthetic effect. The chart animates using smooth cardinal-closed paths, with tooltips and percentage labels marking each level.

MMilliners-Son

67% match