block by davo 5a96cfd44676ca70d615419ef7e22f20

Data based gradients - HR Diagram

Full Screen

An example of creating data based gradients used in my blog on Data-based and unique gradients for visualizations with d3.js . Here each star has a unique radial gradient where the color is based on the effective temperature of the star.

This is a Hertzsprung–Russell diagram. In this diagram stars are plotted according to their luminosities (or the related absolute magnitudes) versus their effective temperatures (or related spectral classifications). Many interesting discoveries around stellar evolution were speculated from this chart even before much was known about what happens in the interior of stars by looking at the positions of stars on the diagram.

The data comes from the HYG database. I took a subset of 400 stars that lie relatively close.

The orange circle is where our own Sun lies approximately

Watch for a few seconds and see the visual change between a 3 states

Other examples from this Astronomy-themed blog can be found here:

You can find another version that I find visually a bit more appealing in the original SVG beyond mere shapes presentation slides - You do have to press refresh again after it loaded, otherwise the height offset is wrong, sorry

Built with