chord.html

<!DOCTYPE html>
<html>
<head>
	<title>Chord</title>
	<meta name="description" content="VizArt Chord">
	<meta name="keywords" content="VizArt Chord">
	<meta charset="utf-8">
	<meta name="author" content="Yun Xing">
	<!--[if IE]>
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

	<!-- Favicons -->
	<link rel="shortcut icon" href="images/favicon.png">

	<!-- CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/custom.css">
	<link rel="stylesheet" href="css/style-responsive.css">
	<link rel="stylesheet" href="css/animate.min.css">
	<link rel="stylesheet" href="css/vertical-rhythm.min.css">
	<link rel="stylesheet" href="css/atelier-lakeside-light.css">
	<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
	<link rel="stylesheet" href="vizart-path.css">

	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default"></script>
</head>
<body class="appear-animate">

<!-- Page Wrap -->
<div class="page" id="top">

	<!-- Navigation panel -->
	<nav class="main-nav dark transparent stick-fixed">
		<div class="full-wrapper relative clearfix">
			<!-- Logo ( * your text or image into link tag *) -->
			<div class="nav-logo-wrap local-scroll">
				<a href="./index.html" class="logo">
					<img src="img/logo-white.png" alt="" />
				</a>
			</div>
			<div class="mobile-nav">
				<i class="fa fa-bars"></i>
			</div>
			<!-- Main Menu -->
			<div class="inner-nav desktop-nav">
				<ul class="clearlist scroll-nav local-scroll">
					<li><a href="./index.html">Home</a></li>
					<li><a href="./demo.html">Demo</a>  </li>
					<li><a href="https://github.com/VizArtJS/vizart/wiki" target="_blank">Documentation</a></li>
					<li><a href="./showcase.html">Showcase</a></li>
					<!-- Item With Sub -->
					<li>
						<a href="#" class="mn-has-sub">Specials <i class="fa fa-angle-down"></i></a>

						<!-- Sub -->
						<ul class="mn-sub to-left">
							<li>
								<a href="./keiko_inokuma.html">Keiko Inokuma／猪熊 佳子</a>
							</li>
						</ul>
						<!-- End Sub -->

					</li>
					<!-- End Item With Sub -->
					<li><a href="https://github.com/VizArtJS/vizart" target="_blank">Github</a></li>
				</ul>
			</div>
			<!-- End Main Menu -->
		</div>
	</nav>
	<!-- End Navigation panel -->

	<!-- Head Section -->
	<section class="small-section bg-dark bg-linear-blue parallax-2">
		<div class="relative container align-left">

			<div class="row">

				<div class="col-md-8">
					<h1 class="hs-line-11 font-alt mb-20 mb-xs-0">Chord</h1>
					<div class="hs-line-4 font-alt">
						Chord shows directed relationships among entities. This work is based on
						delimited.io's <a href="http://projects.delimited.io/experiments/chord-transitions/demos/trade.html">Chord Transition</a>
					</div>
				</div>

				<div class="col-md-4 mt-30">
					<div class="mod-breadcrumbs font-alt align-right">
						<a href="./index.html">Home</a>&nbsp;/&nbsp;<a href="./demo.html">Demo</a> / Chord
					</div>

				</div>
			</div>

		</div>
	</section>
	<!-- End Head Section -->

	<section class="page-section">
		<div class="container relative">

			<div class="work-full-media mb-80 mb-xs-40">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<ul id="year-list" class="list-group" style="overflow-y: auto; height:500px;">
						</ul>
					</div>
					<div class="col-lg-9 col-md-9 col-sm-9 col-xs-6">
						<div id="chart" style="height: 500px;">
						</div>
					</div>
				</div>
			</div>


			<div class="section-text mb-60 mb-sm-40">
				<div class="row">

					<div class="col-md-4 mb-sm-50 mb-xs-30">

						<!-- Project Detail -->
						<div class="work-detail">
							<h5 class="font-alt mt-0 mb-20">Chord</h5>
							<div class="work-full-detail">
								<p>
									<strong>Renderer:</strong>
									SVG
								</p>
								<p>
									<strong>Doc:</strong>
									<a href="https://github.com/VizArtJS/vizart-path/wiki/chord">API</a>
								</p>
								<p>
									<strong>Data:</strong>
									International Trade Flows (1870 - 2005) from <a href="http://www.correlatesofwar.org/">Correlates of War</a>
								</p>
							</div>
						</div>
						<!-- End Project Detail -->

					</div>

					<div class="col-md-8 col-sm-8 col-xs-8 mb-sm-50 mb-xs-30">
            <pre class="prettyprint lang-js">
import { chord } from 'vizart-path';
import 'vizart-path/dist/vizart-path.css';

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},
 data: {
		source: { accessor: 'importer1', },
		target: { accessor: 'importer2', },
		links: [
			{ accessor: 'flow1', },
			{ accessor: 'flow2', },
		]
	}
};

const _data = [
	{ importer1: 'U.S.', importer2: 'China', flow1: 132, flow2: 32 }
]

const _chart = chord('#chart', options);
_chart.render(_data);
						</pre>
					</div>


				</div>
			</div>
		</div>
	</section>

</div>

<!-- End Page Wrap -->

<!-- JS -->

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/jquery.localScroll.min.js"></script>
<script type="text/javascript" src="js/jquery.viewport.mini.js"></script>
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="vizart-path.standalone.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.simple-text-rotator.min.js"></script>
<script type="text/javascript" src="js/all.js"></script>
<script type="text/javascript" src="js/d3.v4.min.js"></script>
<script type="text/javascript" src="js/lodash.min.js"></script>


<script>
	$(document).ready(() => {
		PR.prettyPrint();


		d3.csv('./data/trade.csv', function (err, data) {
			data.forEach(function (d) {
				d.year = +d.year;
				d.flow1 = +d.flow1;
				d.flow2 = +d.flow2;
			});
			let years = d3.range(2005, 1865, -5);

			let scheme1 = [
				"#F44336",
				"#E91E63",
				"#9C27B0",
				"#673AB7",
				"#3F51B5",
				"#2196F3",
				"#03A9F4",
				"#00BCD4",
				"#009688",
				"#4CAF50",
				"#8BC34A",
				"#CDDC39",
				"#FFEB3B",
				"#FFC107",
				"#FF9800",
				"#FF5722"
			];


			let chord = VizArtPath.chord('#chart', {
				chart: {
					margin: {
						top: 90,
						bottom: 90,
						left: 0,
						right: 0
					},
				},
				data: {
					source: {
						accessor: 'importer1',
					},
					target: {
						accessor: 'importer2',
					},

					links: [
						{
							accessor: 'flow1',
						},
						{
							accessor: 'flow2',
						},

					]
				},

				color: {

					scheme: scheme1,
					scaleType: 'categorical'
				}
			});


			let master = {};

			_.each(data, function (d, i) {
				if (!_.has(master, d.year)) {
					master[d.year] = [];
				} else {
					master[d.year].push(d);
				}
			})

			d3.select('#year-list').selectAll('.list-group-item ')
				.data(years)
				.enter()
				.append('div')
				.attr('class', 'list-group-item')
				.text(function (d) {
					return d;
				})
				.on('click', function (d) {
					let yearData = master[d];

					chord.data(yearData);
					chord.update();
				});

			$('#year-list').mCustomScrollbar({
				theme: 'dark'
			});
			chord.render(master['2005']);


		});


	});
</script>


</body>
</html>