index.html

<!DOCTYPE html>
<html>
<head>
	<title>VizArt: Artistic Data Visualization Javascript Library</title>
	<meta name="description" content="VizArt: Artistic Data Visualization Javascript Library">
	<meta name="keywords" content="Data Visualization D3 Chart VizArt opensource">
	<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/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/owl.carousel.css">
	<link rel="stylesheet" href="css/magnific-popup.css">
	<link rel="stylesheet" href="css/custom.css">
</head>
<body class="appear-animate">

<!-- Page Loader -->
<div class="page-loader">
	<div class="loader">Loading...</div>
</div>
<!-- End Page Loader -->

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


	<!-- Home Section -->
	<section class="home-section bg-dark-alfa-50" data-background="./img/intro/all.jpg" id="home">
		<div class="js-height-full container">

			<!-- Video BG Init -->
			<div class="player" data-property="{videoURL:'https://youtu.be/d9Tzp3MzVgo',containment:'#home',autoPlay:true, showControls:false, showYTLogo: false, mute:true, startAt:0, opacity:1}">
			</div>
			<!-- End Video BG Init -->

			<!-- Hero Content -->
			<div class="home-content">
				<div class="home-text">

					<h1 class="hs-line-8 no-transp font-alt mb-50 mb-xs-30">

					</h1>

					<h2 class="hs-line-12 font-alt mb-50 mb-xs-30">
						VizArt
					</h2>

				</div>
			</div>
			<!-- End Hero Content -->

			<!-- Scroll Down -->
			<div class="local-scroll">
				<a href="#intro" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i></a>
			</div>
			<!-- End Scroll Down -->

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


	<!-- 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://bigfatdog.github.io/" target="_blank">About me</a></li>
					<li><a href="https://github.com/VizArtJS/" target="_blank">Github</a></li>
				</ul>
			</div>
			<!-- End Main Menu -->
		</div>
	</nav>
	<!-- End Navigation panel -->

	<!-- Section -->
	<section class="page-section" id="intro">
		<div class="container relative">

			<h2 class="section-title font-alt">
				Introduction
			</h2>


			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<div class="section-text align-center black">
						VizArt is an open source Javascript library for data visualization. VizArt is written in ES6 and built on top of D3 V4.
					</div>
				</div>
			</div>

			<!-- Features Grid -->
			<div class="row multi-columns-row alt-features-grid">

				<!-- Features Item -->
				<div class="col-sm-6 col-md-4 col-lg-4">
					<div class="alt-features-item align-center">
						<div class="alt-features-icon">
							<span class="icon-genius blue"></span>
						</div>
						<h3 class="alt-features-title font-alt black">Manifest</h3>
						<div class="alt-features-descr align-left black">
							It’s not just about an efficient technology tool. What we’re looking for in data visualization is artistic expression and beauty.
						</div>
					</div>
				</div>
				<!-- End Features Item -->

				<!-- Features Item -->
				<div class="col-sm-6 col-md-4 col-lg-4">
					<div class="alt-features-item align-center">
						<div class="alt-features-icon">
							<span class="icon-tools blue"></span>
						</div>
						<h3 class="alt-features-title font-alt black">Coloring</h3>
						<div class="alt-features-descr align-left black">
							With high-performance color tools such as D3, ColorBrewer, I WantHue and ChromaJS, VizArt takes precise and brilliant coloring as its aim.
						</div>
					</div>
				</div>
				<!-- End Features Item -->

				<!-- Features Item -->
				<div class="col-sm-6 col-md-4 col-lg-4">
					<div class="alt-features-item align-center">
						<div class="alt-features-icon">
							<span class="icon-happy blue"></span>
						</div>
						<h3 class="alt-features-title font-alt black">Minimal API</h3>
						<div class="alt-features-descr align-left black">
							The components of VizArt are independent from each other, making it possible to use only one or all of them.
						</div>
					</div>
				</div>
				<!-- End Features Item -->


				<!-- Features Item -->
				<div class="col-sm-6 col-md-4 col-lg-4">
					<div class="alt-features-item align-center">
						<div class="alt-features-icon">
							<span class="icon-layers blue"></span>
						</div>
						<h3 class="alt-features-title font-alt black">Modularity</h3>
						<div class="alt-features-descr align-left black">
							The components of VizArt are independent from each other, making it possible to use only one or all of them.						</div>
					</div>
				</div>
				<!-- End Features Item -->

				<!-- Features Item -->
				<div class="col-sm-6 col-md-4 col-lg-4">
					<div class="alt-features-item align-center">
						<div class="alt-features-icon">
							<span class="icon-beaker blue"></span>
						</div>
						<h3 class="alt-features-title font-alt black">Technology</h3>
						<div class="alt-features-descr align-left black">
							SVG and Canvas come together into high-performance visualizations in a web browser.
						</div>
					</div>
				</div>
				<!-- End Features Item -->

				<!-- Features Item -->
				<div class="col-sm-6 col-md-4 col-lg-4">
					<div class="alt-features-item align-center">
						<div class="alt-features-icon">
							<span class="icon-lightbulb blue"></span>
						</div>
						<h3 class="alt-features-title font-alt black">ES6</h3>
						<div class="alt-features-descr align-left black">
							Written in ES6 and built with Rollup, VizArt enables the use of a single chart without the hassle of loading an entire library.						</div>
					</div>
				</div>
				<!-- End Features Item -->

			</div>
			<!-- End Features Grid -->

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


	<!-- Call Action Section -->
	<section class="page-section pt-0 pb-0 banner-section" style="background: #00c0ff">
		<div class="container relative">

			<div class="row">
				<div class="col-sm-6">

					<div class="mt-140 mt-lg-80 mb-140 mb-lg-80">
						<div class="banner-content">
							<h3 class="banner-heading font-alt black">vizart-basic</h3>
							<div class="banner-decription black">
								vizart-basic provides basic charts for generic analytical purposes:
								Bars, Line, Area, Scatter, Pie, Stacked Bar, Multi Bar, etc.
							</div>

							<a href="https://github.com/VizArtJS/vizart-basic" target="_blank" class="btn btn-mod btn-round">Github</a>
						</div>
					</div>

				</div>

				<div class="col-sm-6 wow fadeInUp">
					<img src="img/intro/analysis.png" class="intro-small-img" alt="" />
				</div>

			</div>

		</div>
	</section>
	<!-- End Call Action Section -->


	<!-- Call Action Section -->
	<section class="page-section pt-0 pb-0 banner-section" data-background="./img/intro/sankey_blue.jpg">
		<div class="container relative">

			<div class="row">
				<div class="col-sm-6">

					<div class="mt-140 mt-lg-80 mb-140 mb-lg-80">
						<div class="banner-content">
							<h3 class="banner-heading font-alt black">vizart-path</h3>
							<div class="banner-decription black">
								vizart-path aims to visualize path between entities.
							</div>

							<a href="https://github.com/VizArtJS/vizart-path" target="_blank"  class="btn btn-mod btn-round">Github</a>
						</div>
					</div>

				</div>

				<div class="col-sm-6 wow fadeInUp">
					<img src="img/intro/path.jpg" class="intro-small-img" alt="" style="margin-top: -30px"/>
				</div>
			</div>

		</div>
	</section>
	<!-- End Call Action Section -->
	<!-- Call Action Section -->
	<section class="page-section pt-0 pb-0 banner-section" style="background: #ed7cff">
		<div class="container relative">

			<div class="row">
				<div class="col-sm-6">

					<div class="mt-140 mt-lg-80 mb-140 mb-lg-80">
						<div class="banner-content">
							<h3 class="banner-heading font-alt black">vizart-hierarchy</h3>
							<div class="banner-decription black">
								vizart-hierarchy visualizes hierarchy(trees).
							</div>

							<a href="https://github.com/VizArtJS/vizart-hierarchy" target="_blank"  class="btn btn-mod btn-round">Github</a>
						</div>
					</div>

				</div>

				<div class="col-sm-6 wow fadeInUp">
					<img src="img/intro/hierarchy.jpg" class="intro-small-img" alt="" style="margin-top: -45px"/>
				</div>
			</div>

		</div>
	</section>
	<!-- End Call Action Section -->

	<!-- Call Action Section -->
	<section class="page-section pt-0 pb-0 banner-section" data-background="./img/background_1.jpg">
		<div class="container relative">

			<div class="row">
				<div class="col-sm-6">

					<div class="mt-140 mt-lg-80 mb-140 mb-lg-80">
						<div class="banner-content">
							<h3 class="banner-heading font-alt black">vizart-geo</h3>
							<div class="banner-decription black">
								vizart-geo leverages D3JS, PixiJS and MapboxGL to plot large-scale data set on maps.
								It also aims to bring multi-dimensional visualization between maps and charts from other components
								<br>
							</div>

							<a href="https://github.com/VizArtJS/vizart-geo" target="_blank"  class="btn btn-mod btn-round">Github</a>
						</div>
					</div>

				</div>

				<div class="col-sm-6 wow fadeInUp" style="padding-top: 70px">
					<!-- Work Gallery -->
					<div class="work-full-media mt-0 white-shadow">
						<ul class="clearlist work-full-slider owl-carousel">
							<li>
								<img src="./img/cover/nyc_pedc.png" alt="" />
							</li>
							<li>
								<img src="./img/cover/force_edge.png" alt="" />
							</li>
							<li>
								<img src="./img/cover/world_flight.png" alt="" />
							</li>
						</ul>
					</div>
					<!-- End Work Gallery -->
				</div>
			</div>

		</div>
	</section>
	<!-- End Call Action Section -->


	<!-- Call Action Section -->
	<!--<section class="page-section pt-0 pb-0 banner-section bg-dark" style="background: #94dc9a">-->
		<!--<div class="container relative">-->

			<!--<div class="row">-->
				<!--<div class="col-sm-6">-->

					<!--<div class="mt-140 mt-lg-80 mb-140 mb-lg-80">-->
						<!--<div class="banner-content">-->
							<!--<h3 class="banner-heading font-alt black">vizart-Network</h3>-->
							<!--<div class="banner-decription black">-->
								<!--vizart-network is for graphs only. It runs various layouts (e.g., Force and Dagre) on the graph to help detect patterns in a-->
								<!--network. Currently it is intended to be used together with Neo4J.-->
							<!--</div>-->

							<!--<a href="https://github.com/VizArtJS/vizart-network" target="_blank"  class="btn btn-mod btn-round">Github</a>-->

						<!--</div>-->
					<!--</div>-->

				<!--</div>-->

				<!--<div class="col-sm-6 wow fadeInUp">-->
					<!--<img src="img/intro/network.jpg" class="intro-small-img" alt="" style='margin-top: -30px'/>-->
				<!--</div>-->

			<!--</div>-->

		<!--</div>-->
	<!--</section>-->
	<!-- End Call Action Section -->

	<!-- Call Action Section -->
	<section class="page-section pt-0 pb-0 banner-section bg-dark" data-background="./img/background_2.jpg">
		<div class="container relative">

			<div class="row">
				<div class="col-sm-6">

					<div class="mt-140 mt-lg-80 mb-140 mb-lg-80">
						<div class="banner-content">
							<h3 class="banner-heading font-alt black">vizart-core</h3>
							<div class="banner-decription black">
								vizart-core serves as fundamentals of all VizArt components. Other component are based on vizart-core
							</div>

							<a href="https://github.com/VizArtJS/vizart-core" target="_blank" class="btn btn-mod btn-round">Github</a>
						</div>
					</div>
				</div>

			</div>

		</div>
	</section>
	<!-- End Call Action Section -->

	<!-- Divider -->
	<hr class="mt-0 mb-0 "/>
	<!-- End Divider -->


	<!--&lt;!&ndash; Features Section &ndash;&gt;-->
	<!--<section class="page-section">-->
		<!--<div class="container relative">-->

			<!--<h2 class="section-title font-alt mb-70 mb-sm-40">-->
				<!--What's new-->
			<!--</h2>-->


			<!--&lt;!&ndash; Works Grid &ndash;&gt;-->
			<!--<ul class="works-grid work-grid-gut clearfix font-alt hover-white" id="work-grid">-->

				<!--&lt;!&ndash; Work Item (External Page) &ndash;&gt;-->
				<!--&lt;!&ndash;<li class="work-item mix design">&ndash;&gt;-->
					<!--&lt;!&ndash;<a href="./keiko_inokuma.html" class="work-ext-link">&ndash;&gt;-->
						<!--&lt;!&ndash;<div class="work-img">&ndash;&gt;-->
							<!--&lt;!&ndash;<img class="work-img" src="./img/keiko/painting_4.jpg" alt="Work" />&ndash;&gt;-->
						<!--&lt;!&ndash;</div>&ndash;&gt;-->
						<!--&lt;!&ndash;<div class="work-intro">&ndash;&gt;-->
							<!--&lt;!&ndash;<h3 class="work-title">Keiko Inokuma／猪熊 佳子</h3>&ndash;&gt;-->
							<!--&lt;!&ndash;<div class="work-descr">&ndash;&gt;-->
								<!--&lt;!&ndash;Scientific Color from Keiko's Art&ndash;&gt;-->
							<!--&lt;!&ndash;</div>&ndash;&gt;-->
						<!--&lt;!&ndash;</div>&ndash;&gt;-->
					<!--&lt;!&ndash;</a>&ndash;&gt;-->
				<!--&lt;!&ndash;</li>&ndash;&gt;-->
				<!--&lt;!&ndash; End Work Item &ndash;&gt;-->

				<!--&lt;!&ndash; Work Item (External Page) &ndash;&gt;-->
				<!--<li class="work-item mix design">-->
					<!--<a href="./force_edge.html" class="work-ext-link">-->
						<!--<div class="work-img">-->
							<!--<img class="work-img" src="./img/charts/force_edge.jpg" alt="Work" />-->
						<!--</div>-->
						<!--<div class="work-intro">-->
							<!--<h3 class="work-title">Force Edge Bundling</h3>-->
							<!--<div class="work-descr">-->
								<!--Experimental Geo Map-->
							<!--</div>-->
						<!--</div>-->
					<!--</a>-->
				<!--</li>-->
				<!--&lt;!&ndash; End Work Item &ndash;&gt;-->


				<!--&lt;!&ndash; Work Item (External Page) &ndash;&gt;-->
				<!--<li class="work-item mix design">-->
					<!--<a href="./parcoords.html" class="work-ext-link">-->
						<!--<div class="work-img">-->
							<!--<img class="work-img" src="./img/charts/parallel_coordinates.jpg" alt="Work" />-->
						<!--</div>-->
						<!--<div class="work-intro">-->
							<!--<h3 class="work-title">Parallel Coordinates</h3>-->
							<!--<div class="work-descr">-->
								<!--Path-->
							<!--</div>-->
						<!--</div>-->
					<!--</a>-->
				<!--</li>-->
				<!--&lt;!&ndash; End Work Item &ndash;&gt;-->


				<!--&lt;!&ndash; Work Item (External Page) &ndash;&gt;-->
				<!--<li class="work-item mix design">-->
					<!--<a href="./showcase.html" class="work-ext-link">-->
						<!--<div class="work-img">-->
							<!--<img class="work-img" src="./img/cover/exceed_bi_cover.jpg" alt="Work" />-->
						<!--</div>-->
						<!--<div class="work-intro">-->
							<!--<h3 class="work-title">Exceed BI</h3>-->
							<!--<div class="work-descr">-->
								<!--Showcase-->
							<!--</div>-->
						<!--</div>-->
					<!--</a>-->
				<!--</li>-->
				<!--&lt;!&ndash; End Work Item &ndash;&gt;-->
			<!--</ul>-->
			<!--&lt;!&ndash; End Works Grid &ndash;&gt;-->

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

	<!-- Section -->
	<section class="page-section" id="about">
		<div class="container relative">

			<h2 class="section-title font-alt">
				About
			</h2>


			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<div class="section-text align-center black">
						VizArt is currently maintained by <a href="https://github.com/BigFatDog" target="_blank">Yun Xing</a>.
						VizArt is inspired by the work of Mike Bostock. Some charts are based on open-source projects. Credits are given to
						those projects in the demo page as well as on github projects.
					</div>
				</div>
			</div>

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


	<!-- Foter -->
	<footer class="page-section bg-gray-lighter footer pb-60">
		<div class="container">

			<!-- Footer Logo -->
			<div class="local-scroll mb-30 wow fadeInUp" data-wow-duration="1.5s">
				<a href="#top"><img src="img/logo_blue.png" width="78" height="36" alt="" /></a>
			</div>
			<!-- End Footer Logo -->
			<!-- Footer Text -->
			<div class="footer-text">

				<!-- Copyright -->
				<div class="footer-copy font-alt">
					<a href="https://github.com/BigFatDog" target="_blank">&copy; Yun Xing 2018</a>
				</div>
				<!-- End Copyright -->

				<div class="footer-made">
					Library released under <a href="https://github.com/thomaspark/bootswatch/blob/gh-pages/LICENSE">MIT License</a>
				</div>

			</div>
			<!-- End Footer Text -->

		</div>


		<!-- Top Link -->
		<div class="local-scroll">
			<a href="#top" class="link-to-top"><i class="fa fa-caret-up"></i></a>
		</div>
		<!-- End Top Link -->

	</footer>
	<!-- End Foter -->


</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.mb.YTPlayer.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/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>

</body>
</html>