D3 Examples - CircleGradiantColor

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