Data based gradients - Simple - Solar system

A simple example of using d3 to easily create a unique (radial) gradient for each datapoint/planet from my blog on creating Data-based and unique gradients for visualizations with d3.js. Each planet has a defined color and by using a radial gradient we can make this look like a 3D sphere.

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

Built with blockbuilder.org

forked from nbremer's block: Data based gradients - Simple - Solar system

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	
	<style>
		body {
		  	text-align: center;
		}
	</style>
	
</head>	
<body>
	
	<div id="chart"></div>

///////////////////////////////////////////////////
////////////// Initialize the SVG /////////////////
///////////////////////////////////////////////////
	      
//Add the svg canvas
var svg = d3.select("#chart")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + (margin.left) + "," + margin.top + ")");
  
///////////////////////////////////////////////////
///////// Create sphere looking planets ///////////
///////////////////////////////////////////////////
	
//Radial gradient with the center at one end of the circle, as if illuminated from the side
var gradientRadial = svg.append("defs").selectAll("radialGradient")
	.data(planets)
	.enter().append("radialGradient")
	.attr("id", function(d){ return "gradient-" + d.planet; })
	.attr("cx", "30%")
	.attr("cy", "30%")
	.attr("r", "65%");
  
//Append the color stops
gradientRadial.append("stop")
	.attr("offset", "0%")
	.attr("stop-color", function(d) { return d3.rgb(d.color).brighter(1); });
gradientRadial.append("stop")
	.attr("offset", "50%")
	.attr("stop-color", function(d) { return d.color; });
gradientRadial.append("stop")
	.attr("offset",  "100%")
	.attr("stop-color", function(d) { return d3.rgb(d.color).darker(1.5); });
	
//Add the planets
svg.selectAll(".planetsGradient")
	.data(planets)
	.enter().append("circle")
	.attr("class", "planetsGradient")
	.attr("cx", function(d, i) { return d.offset + planetScale(d.diameter)/2 + padding; })
	.attr("cy", 0)
	.attr("r", function(d) { return planetScale(d.diameter)/2; })
	.style("fill", function(d) { return "url(#gradient-" + d.planet + ")"; });
</script>

</body>
</html>

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