Radial gradient - Simple example - Sun

A simple example of creating a radial SVG gradient used in my blog on Data-based and unique gradients for visualizations with d3.js

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

Built with blockbuilder.org

<!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>

</head>	
	<body>

///////////////////////////////////////////////////////////////////////////
			//////////////////// Set up and initiate svg containers ///////////////////
			///////////////////////////////////////////////////////////////////////////

var margin = {
				top: 0,
				right: 0,
				bottom: 0,
				left: 0
			};
			var width = 300,
				height = 300;
						
			//SVG container
			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 + width/2) + "," + (margin.top + height/2) + ")");

///////////////////////////////////////////////////////////////////////////
			///////////////////////////// Create gradient /////////////////////////////
			///////////////////////////////////////////////////////////////////////////

var defs = svg.append("defs");

//Create a radial Sun-like gradient
			defs.append("radialGradient")
				.attr("id", "sun-gradient")
				.attr("cx", "50%")	//not really needed, since 50% is the default
				.attr("cy", "50%")	//not really needed, since 50% is the default
				.attr("r", "50%")	//not really needed, since 50% is the default
				.selectAll("stop")
				.data([
						{offset: "0%", color: "#FFF76B"},
						{offset: "50%", color: "#FFF845"},
						{offset: "90%", color: "#FFDA4E"},
						{offset: "100%", color: "#FB8933"}
					])
				.enter().append("stop")
				.attr("offset", function(d) { return d.offset; })
				.attr("stop-color", function(d) { return d.color; });
				
			///////////////////////////////////////////////////////////////////////////
			///////////////////////////// Place the Sun ///////////////////////////////
			///////////////////////////////////////////////////////////////////////////

svg.append("circle")
				.attr("r", 100)
				.style("fill", "url(#sun-gradient)");

</script>

</body>
</html>

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