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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Storytelling with a Chord Diagram - Switching between Phone Brands</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="body">
<div id="chart"></div>
<div id="clickerWrapper">
<div id="progress"></div>
<div id="clicker">Let's Start</div>
</div>
<div id="buttonWrapper">
<div id="buttonWrapperInner">
<div id="skip" class="sideButton">SKIP INTRO</div>
<div id="reset" class="sideButton">RESET</div>
<div id="link" class="sideButton"><a href="//bl.ocks.org/nbremer/raw/94db779237655907b907/" target="_blank">GO TO SOURCE</a></div>
</div>
</div>
</div>
<script src="chords.js"></script>
</body>
</html>
body {
overflow: hidden;
margin: 0;
font-size: 14px;
font-family: 'Raleway', sans-serif;
text-align: center;
/*font-family: Oswald;*/
/*font-family: "Helvetica Neue", Helvetica;*/
}
#clickerWrapper {
top: 0;
z-index: 1;
display: block;
position: relative;
width: 640px;
/*padding-top: 5px;*/
visibility: auto;
text-align: center;
margin: 0 auto;
}
#clicker {
z-index: 1;
display: block;
font-family: Oswald;
font-size: 36px;
font-weight: 300;
color: #363636;
position: relative;
/*width: 80px;*/
text-align: center;
width: 30%;
margin: 0 auto;
border: 1px solid;
border-color: #363636;
cursor: pointer;
}
#progress {
z-index: 1;
display: block;
position: relative;
width: 40%;
height: 6px;
margin: 10px auto;
visibility: hidden;
}
#buttonWrapper{
z-index: 1;
display: block;
font-family: Oswald;
font-size: 14px;
font-weight: 300;
color: #6B6B6B;
position: relative;
width: 640px;
text-align: center;
overflow: hidden;
text-align: center;
margin: 0 auto;
margin-top: 30px;
}
#buttonWrapperInner{
position: relative;
width: 300px;
height: 30px;
margin: 0 auto;
}
#skip{
width: 90px;
cursor: pointer;
float: left;
text-align: left;
}
#reset{
width: 110px;
cursor: pointer;
float: left;
}
#link{
width: 100px;
cursor: pointer;
float: left;
text-align: right;
}
line {
stroke: #000;
stroke-width: 1.px;
}
text {
font-size: 10px;
}
.titles{
font-size: 14px;
}
.explanation{
font-size: 20px;
font-weight: 300;
text-align: center;
}
path.chord {
fill-opacity: .80;
}
a {
text-decoration: none;
color: #6B6B6B;
}