block by nbremer 240d682d74f1fe66b3540e419843e54c

Abrupt gradients - The growth of BMI across the world

Full Screen

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

script.js

index.html