Abrupt gradients - The growth of BMI across the world

This example comes from my blog on Using gradients for abrupt color changes in data visualizations.

Each line in this data visualization is filled with a linear gradient (there is one unique SVG gradient) that abruptly changes color to showcase the different categories within the BMI scale.

The chart shows the growing BMI of practically all these 25 countries (a random sample of the 200 available) over the past 40 years. Use the buttons below to switch between Men and Women

The data is from the NCD RisC

Two other examples of using these abrupt color changes can be found here

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>The growth of BMI over the last 40 years</title>
	
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		
		
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
		
		<style>
			html { font-size: 62.5%; }

body {
			  	font-size: 1.2rem;
			  	font-family: 'Open Sans', sans-serif;
			  	font-weight: 400;
			  	text-align: center;
			  	fill: #2B2B2B;
			}
			
		  	.title {
		    	font-size: 3.6rem;
		    	fill: #4F4F4F;
		    	font-weight: 300;
		  	}

.subtitle {
		    	font-size: 2.2rem;
		    	fill: #AAAAAA;
		    	font-weight: 300;
		  	}

.axis path,
			.axis line {
			  	fill: none;
			  	stroke: #949494;
			  	shape-rendering: crispEdges;
			}

.x.axis path {
			  	display: none;
			}

.axis text {
				fill: #383838;
				font-size: 1.6rem;
				font-weight: 300;
			}

.line {
			  	fill: none;
			  	stroke-width: 1.5px;
			  	opacity: 0.8;
			  	pointer-events: none;
			}

.axisLegend {
				text-anchor: middle;
				font-size: 2.2rem;
				font-weight: 300;
				opacity: 1;
			}

.countryName {
				text-anchor: start;
				font-size: 1.6rem;
				font-weight: 300;
				fill: #383838;
				opacity: 0;
			}

.threshold {
				fill: none;
			  	shape-rendering: crispEdges;
			  	opacity: 0.3;
			  	stroke-dasharray: 8, 5;
			  	/*stroke-width: 1.5px;*/
			  	pointer-events: none;
			}

.voronoiWrapper path {
		    	fill: none;
		    	pointer-events: all;
		  	}	
		</style>
	</head>
	<body>
	
		<div id = "chart"></div>
		
		<div id="button" class="btn-group" data-toggle="buttons">
			<label id="menButton" class="btn btn-default active"><input type="radio" class="btn-options"> Men </label>
			<label id="womenButton" class="btn btn-default"><input type="radio" class="btn-options"> Women </label>
		</div>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js