row.html

<!DOCTYPE html>
<html>
<head>
	<title>Bar</title>
	<meta name="description" content="VizArt Row">
	<meta name="keywords" content="VizArt Row">
	<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="vizart-basic.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">Row</h1>
					<div class="hs-line-4 font-alt">
					</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> / Row
					</div>

				</div>
			</div>

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

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

			<div class="row" style="text-align: center; width: 100%;margin-top:10px">
				<a id="red" href="#" class="btn btn-mod  btn-gray btn-round mb-10 mr-5">Red Yellow Blue</a>
				<a id="green" href="#" class="btn btn-mod btn-gray btn-round mb-10 mr-5">Red Yellow Green</a>
				<a id="warm" href="#" class="btn btn-mod btn-gray btn-round mb-10 mr-5">BrBG</a>
				<a id="cool" href="#" class="btn btn-mod btn-gray btn-round mb-10 mr-5">PiYG</a>
			</div>
			<div class="work-full-media mb-80 mb-xs-40">
				<div id="chart" class="chart">

				</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">Bar</h5>
							<div class="work-full-detail">
								<p>
									<strong>Renderer:</strong>
									Canvas
								</p>
								<p>
									<strong>Module:</strong>
									vizart-basic
								</p>
								<p>
									<strong>Data:</strong>
									Movies.
								</p>
								<p>
									<strong>Doc:</strong>
									<a href="https://github.com/VizArtJS/vizart-basic/wiki/row">API</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 { row } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},

	data: {
			x: { name: 'Director', type: 'string', accessor: 'Director'},
			y: [{ name: 'Total', type: 'number', accessor: 'Total', yAxis: 0}],
	},
};

const chart = row('#chart', options);
d3.csv('./data/movies.csv', function(err, res){
   chart.render(res);
});
						</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/prettify.js"></script>
<script type="text/javascript" src="vizart-basic.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();
		const options = {
			data: {
				x:   { name: 'Director', type: 'string', accessor: 'Director'},
				y: [
					{ name: 'Total', type: 'number', accessor: 'Total', yAxis: 0}
				],
			},
			chart: {
				margin: {
					left: 50,
					right: 50,
					bottom: 10
				}
			},

			ordering: {
				direction: 'desc',
				accessor: 'Total'
			},

			yAxis: [
				{
					title: {
						text: 'total'
					}
				}
			],

			xAxis: {
				ticks: 160,
				labelAngle: 30,
				title: {
					text: 'Director',
					offset: 65
				}
			},

			plots: {
				barLabel: {
					enabled: false,
					color: 'black'
				},
				metricLabel: {
					enabled: true,
					color: 'black',
					offset: 10
				},

				miniBarWidth: 50,
			},

			color: {
				scheme: 'RdYlGn',
				type: 'divergent'
			}
		};

		const chart = VizArtBasic.row('#chart', options);

		d3.csv('./data/movies.csv', function(err, res){
			const data = _.uniqWith(res, function(a, b) {
				return a.Director === b.Director;
			});


			for (var i = 0; i < data.length; i++) {
				if (i < 30) {
					data[i].Total = 0 - +data[i].Total;
				} else {
					data[i].Total = +data[i].Total;

				}
			}

			chart.render(data);
		});

		// change color
		$('#red').click(function(){
			chart.color({ scheme: 'RdYlBu'});
		});

		$('#green').click(function(){
			chart.color({scheme: 'RdYlGn'});
		});

		$('#warm').click(function(){
			chart.color({scheme: 'BrBG'});
		});

		$('#cool').click(function(){
			chart.color({scheme: 'PiYG'});
		});
	});
</script>


</body>
</html>