JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/jakezatecky/d3-funnel/master/dist/d3-funnel.js"></script>
		<div class="container">
			<h1>D3 Funnel</h1>
			<div class="example">
				<form class="form-inline">
					<select class="form-control" id="picker">
						<option value="basic">No options</option>
						<option value="formatted">Formatted values</option>
						<option value="curved">Curved</option>
						<option value="pinch">Pinched</option>
						<option value="gradient">Gradient</option>
						<option value="inverted">Inverted</option>
						<option value="hover">Hover effects</option>
						<option value="dynamic">Dynamic area</option>
						<option value="minHeight">Minimum height</option>
						<option value="animation">Animation</option>
						<option value="clickEvent">Click Event</option>
						<option value="label">Styling labels</option>
						<option value="color">Custom colors</option>
						<option value="labelsColor">Custom label colors</option>
						<option value="works">The Works</option>
					</select>
				</form>
				<!-- Funnel container -->
				<div id="funnel"></div>
			</div>
		</div>

JavaScript

$(function() {
	
					var index = "curved";

					var data = {
						normal: [
							['Customer1',   12000],
							['Customer2', 4000],
							['Customer3',  2500],
							['Customer4',        1500],
						],
						minHeight: [
							['Customer1',   12000],
							['Customer2', 4000],
							['Customer3',  2500],
							['Customer4',        100],
						],
						color:  [
							['Teal',      12000, '#008080'],
							['Byzantium', 4000,  '#702963'],
							['Persimmon', 2500,  '#ff634d'],
							['Azure',     1500,  '#007fff'],
						],
						labelsColor: [
							['Teal',      12000, '#008080', '#080800'],
							['Byzantium', 4000,  '#702963'],
							['Persimmon', 2500,  '#ff634d', '#6f34fd'],
							['Azure',     1500,  '#007fff', '#07fff0'],
						],
					};

					var options = {
						basic: [data.normal, {}],
						curved: [
							data.normal, {
								isCurved: true,
							},
						],
						clickEvent: [
							data.normal, {
								onItemClick: function(d) {
									alert('<' + d.label + '> selected.');
								},
							},
						],
						label: [
							data.normal, {
								label: {
									fontSize: '16px',
									fill: '#000',
								},
							},
						],
						color: [data.color, {}],
						labelsColor: [data.labelsColor, {}]
					};

					var chart = new D3Funnel('#funnel');

					// Reverse the dataset if the isInverted option is present
					// Keep in mind that because the larger component has shorter
					// width, it must compensate with a much larger height!
					if (options[index].hasOwnProperty('isInverted')) {
						chart.draw(data.reverse(options[index][0]), options[index][1]);
					// Otherwise, just use the regular data
					} else {
						chart.draw(options[index][0], options[index][1]);
					}

			});