circlePack

forked from maelafifi's block: circlePack

<script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

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

<script src="tooltip.js"></script>
  <svg width="960" height="1000"></svg>
</head>

<body>

// 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;
}

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

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

https://d3js.org/d3-scale-chromatic.v1.min.js