d3-funnel
Version:
A library for rendering SVG funnel charts using D3.js
112 lines (106 loc) • 4.15 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>d3-funnel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="d3-funnel: A JavaScript SVG library for rendering funnel, pipeline, and pyramid charts using the D3.js framework.">
<meta name="theme-color" content="#3498db">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Reem+Kufi">
<link rel="stylesheet" href="./scss/style.scss">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RMNRQBDL6G"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RMNRQBDL6G');
</script>
</head>
<body>
<section class="page-header">
<h1 class="project-name">d3-funnel</h1>
<h2 class="project-tagline">A JavaScript library for rendering funnel charts using the D3.js framework.</h2>
<a href="https://github.com/jakezatecky/d3-funnel" class="btn">View on GitHub</a>
<a href="https://github.com/jakezatecky/d3-funnel/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/jakezatecky/d3-funnel/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<p>
<strong>d3-funnel</strong> is an extensible, open-source JavaScript library for rendering
funnel charts using the <a href="https://d3js.org/">D3.js</a> library.
</p>
<p>
d3-funnel is focused on providing practical and visually appealing funnels through a variety
of customization options. Check out the example below to get a showcasing of the several
possible options.
</p>
<div class="demo">
<div class="demo-funnel" id="funnel"></div>
<div class="demo-options">
<form>
<label>
<input type="checkbox" value="curved">
Curved
</label>
<label>
<input type="checkbox" value="pinched" checked>
Pinched
</label>
<label>
<input type="checkbox" value="gradient">
Gradient
</label>
<label>
<input type="checkbox" value="inverted">
Inverted
</label>
<label>
<input type="checkbox" value="hover">
Highlight on Hover
</label>
<label>
<input type="checkbox" value="tooltip">
Tooltips
</label>
<label>
<input type="checkbox" value="click">
Click Event
</label>
<label>
<input type="checkbox" value="dynamicHeight" checked>
Dynamic Height
</label>
<label>
<input type="checkbox" value="barOverlay">
Bar Overlay
</label>
<label>
<input type="checkbox" value="animation">
Load Animation
</label>
<label>
<input type="checkbox" value="label">
Style Labels
</label>
<label>
<input type="checkbox" value="color">
Custom Color
</label>
</form>
</div>
</div>
<footer class="site-footer">
<span class="site-footer-owner">
<a href="https://github.com/jakezatecky/d3-funnel">d3-funnel</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.
</span>
<span class="site-footer-credits">
This page is hosted by <a href="https://pages.github.com">GitHub Pages</a>.
</span>
</footer>
</section>
<script src="./js/index.js"></script>
</body>
</html>