Recidivism Transitions Chord Diagram

Chord Diagram to show the transitions of recidivists in the SCC Homeless System.

Chords connect one type of assistance to the next that those who appear in the system multiple times. Mouseover on a chord shows the "direction" indicated by that chord.

This visual is troublesome because chord-diagrams don't show well the order of transitions.

forked from nbremer's block: Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>Collaborations between MCU Avengers</title>
	
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		
		
		<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
		
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	
		
		<script src="bootstrap.tooltip.js"></script>
		<script src="bootstrap.popover.js"></script>
		
		<script src="d3.layout.chord.sort.js"></script>
		
		<style>
			body {
			  font-size: 14px;
			  font-family: 'Lato', sans-serif;
			  text-align: left;
			  color: #757575;
			  cursor: default;
			}
			
			.title {
				margin-top: 20px;
				margin-bottom: 10px;
				margin-left: 20px;
				font-size:32px;
				font-family: 'Oswald', sans-serif;
				color: #2B2B2B;
			}
			
			.texts {
				margin-left: 20px;
				margin-right: 20px;
				line-height: 140%;
			}
			
			.credit {
				color: #9E9E9E;
				font-size: 10px;
				margin-bottom: 0.5em;
			}
			
			.notes {
				color: #9E9E9E;
				font-size: 10px;
			}
			
			.popover {
				pointer-events: none;
			}
			
			#chart{
			  font-size: 10px;
			  font-family: 'Bangers', sans-serif;
			  text-align: center;
			  fill: #2B2B2B;
			}
			
			@media (min-width: 600px) {
				#chart{
					font-size: 16px;
				}
			}
		</style>
	</head>
	<body>
	
		<div class = "title">Transitions for Recitivists</div>
		<div class = "explanation texts">
			<p style="margin-bottom: 0em;">The Chord Diagram below shows the behavior of recivists as they move from one service to another.</p>
			<p style="margin-top: 0.5em;">Note that transitions are not symmetric, so the flow matters. We also don't show people who return to the same kind of service.</p></div>
		<div id = "chart"></div>
		<div class="credit texts">Modified from the example by Nadieh Bremer | Modified by Bryan Bischof</div>
		<div class = "notes texts">
			Part of the DataKind Summer 2016 datadive in conjunction with Santa Clara County Homelessness Effort</div>
 
		<script src="script.js"></script>

</body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js