D3 Examples - Abrupt gradients - The growth of BMI across the world

Abrupt gradients - The growth of BMI across the world

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

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

xxxxxxxxxx
 
<!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>
    
        <!-- D3.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
        
        <!-- Google Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
​
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <!-- Compiled and minified JavaScript -->
        <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>
        <!-- The buttons -->
        <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>
​
        <script src = "bmiSmall.js"></script>
        <script src = "script.js"></script>
​
​
  </body>
</html>
    