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
The first state in which all the stars have a 3D sphere like gradient. As if the stars were shined upon themselves. Although this might seem strange, the HR diagram is often visualized in this manner
The second state shows how the diagram looks when the stars are sized correctly relatively. As you can see, this creates a rather unreadable chart and that is why normally a transformation is used to the sizes of the stars
The third state shows a different kind of radial gradient. This time it tries to make the stars look like they are glowing from the inside
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 blockbuilder.org