CircleGradiantColor

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>
<h1>Done with d3js - <span style="font-size:0.5em;">by malik houni</span></h1>
<script>
$(function(){
	dataDict = []
	dataNodes = []
var svg = d3.select("body")
			.append("svg").attr("width",1000).attr("height",400)
			.attr("style","border:1px solid black");

d3.csv("./data.csv",function(data){
	for(elem in data){
		//console.log(data[elem]);
		dataDict.push({
			'Tube':data[elem].Tube,
			'Color':data[elem].Color,
			'Value':data[elem].Value,
			'TubeNb':data[elem].TubeNb
			}
			);
	}
	dataNodes["nodes"] = dataDict;
	var elem = svg.selectAll("g myCircleText")
        .data(dataNodes.nodes)
    //console.log(dataNodes)

//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(data)
	.enter().append("radialGradient")
	.attr("id", function(d){ return "gradient-" + d.Tube; })
	.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 data
svg.selectAll(".dataGradient")
	.data(data)
	.enter().append("circle")
	.attr("class", "dataGradient")
	.attr("transform", function(d,i){
	    	if(i<9){
	    		return "translate("+(55+(i*105))+",80)"	
	    	}else{
	    		return "translate("+(55+((i-9)*105))+",250)"
	    	}})
	.attr("r", function(d) { return 50; })
	.style("fill", function(d) { return "url(#gradient-" + d.Tube + ")"; });

//Create and place the "blocks" containing the circle and the text 
    var elemEnter = elem.enter()
	    .append("g")
	    .attr('class',function(d,i){return i;})
	    .attr("transform", function(d,i){
	    	if(i<9){
	    		return "translate("+(55+(i*105))+",80)"	
	    	}else{
	    		return "translate("+(55+((i-9)*105))+",250)"
	    	}
	    	
	    })

//Create the circle for each block 
 
	// Create the 2 text for each block 
	elemEnter.append("text")
	    .attr("dx", function(d){return -20})
	    .attr("dy", function(d){return 62})
	    .attr("font-family", "Arial, Helvetica, sans-serif")
	    .attr("font-size", "10")
	    .text(function(d){
	    	if(d.Value <0){
	    		return "off";
	    	}else{return "+"+d.Value+" kg/h"}
	    })
    elemEnter.append("text")
	    .attr("dx", function(d){return -16})
	    .attr("dy", function(d){return 80})
	    .attr("font-family", "Arial")
	    .text(function(d){return d.Tube})

})

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js

https://d3js.org/d3.v3.min.js