D3 Examples - circlePack

xxxxxxxxxx
 
<html lang="en">
​
<head>
  <meta charset="utf-8">
  <title>Tree Demo</title>
​
  <!-- load D3 //-->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
​
  <!-- load custom CSS //-->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900|Source+Code+Pro:300" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
​
  <!-- load custom JavaScript //-->
  <script src="tooltip.js"></script>
  <svg width="960" height="1000"></svg>
</head>
​
<body>
​
​
​
​
​
<script>
// used to color node by depth
var color = d3.scaleOrdinal();
​
// accessor functions for x and y
var x = function(d) { return d.x; };
var y = function(d) { return d.y; };
​
// normal line generator
var line = d3.line()
  .curve(d3.curveLinear)
  .x(x)
  .y(y);
​
// configure size, margin, and circle radius
var config = {
    w: 900,
    h: 475,
    r: 3,
    pad: 10
};
​
// maximum diameter of circle is minimum dimension
config.d = Math.min(config.w, config.h);
​
var file = "java.csv";
​
d3.csv(file, convert, callback);
​
function convert(row)
{
    var parts = row.id.split(".")
    row.name = parts[parts.length - 1];
    row.value = +row.value;
    return row;
}
​
function callback(error, data)
{
    if (error)
    {
        console.warn(file, error);
        return;
    }
    
    console.log("data:", data.length, data);
    var stratify = d3.stratify()
    .id(function(d) { return d.id; })
    .parentId(function(d)
    {
        return d.id.substring(0, d.id.lastIndexOf("."));
    });
    
    var root = stratify(data);
    
    root.sort(function(a, b)
    {
        if (a.height != b.height)
        {
            return d3.ascending(a.height, b.height);
        }
        else
        {
            return d3.ascending(a.value, b.value);
        }
    });
​
    console.log("root:", root);
    
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
  var g = svg.append("g");
  g.attr("id", "plot");
​
  // translate so circle is in middle of plot area
  var xshift = config.pad + (config.w - config.d) / 2;
  var yshift = config.pad + (config.h - config.d) / 2;
  g.attr("transform", translate(xshift, yshift));
​
  // calculate sum for nested circles
  root.sum(function(d) { return d.value; });
​
  // setup circle packing layout
  var diameter = config.d - 2 * config.pad;
  var pack = d3.pack().size([diameter, diameter]).padding(1);
​
  // run layout to calculate x, y, and r attributes
  pack(root);
​
  // draw nested circles
  drawNodes(g, root.descendants(), false);
​
}
​
  
​
function drawNodes(g, nodes, raise)
{
    g.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
        .attr("r", function(d) { return d.r ? d.r : config.r; })
        .attr("cx", x)
        .attr("cy", y)
        .attr("id", function(d) { return d.data.name; })
        .attr("class", "node")
        .style("fill", function (d) 
        { 
            if(d.depth <= 0)
            {
                return "#1b9e77";
            }
            else if(d.depth <= 1)
            {
                return "#d95f02";
            }
            else if(d.depth <= 2)
            {
                return "#7570b3";
            }
            else if(d.depth <= 3)
            {
                return "#e7298a";
            }
            else if(d.depth <= 4)
        {
                return "#66a61e";
        }
        else if(d.depth <= 5)
            {
                return "#e6ab02";
            }
        })
        .on("mouseover.tooltip", function(d)
        {
            show_tooltip(g, d3.select(this));
            d3.select(this).classed("selected", true);
            if (raise)
            {
                d3.select(this).raise()
        .attr("fill", "red");
            }
        })
        .on("mouseout.tooltip", function(d)
        {
            g.select("#tooltip").remove();
            d3.select(this).classed("selected", false);
        });
}
​
function drawLinks(g, links, generator)
{
    var paths = g.selectAll("path")
    .data(links)
    .enter()
    .append("path")
    .attr("d", generator)
    .attr("class", "link");
}
​
  
function toRadians(degrees)
{
    return degrees * Math.PI / 180;
}
​
function toCartesian(r, degrees)
{
    var theta = toRadians(degrees);
    var x = r * Math.cos(theta);
    var y = r * Math.sin(theta);
    return {"x": x, "y": y};
}
​
​
function translate(x, y)
{
    return "translate(" + String(x) + "," + String(y) + ")";
}  
​
</script>
</body>
    