hw 4

<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="helpers.js"></script>
  <script src="tooltip.js"></script>
</head>

<body>

<h2>Dendrogram Node Layout, Curved Edges</h2>
  <svg id="dendrogram"></svg>
<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: 960,
    h: 450,
    r: 4,
    pad: 10
};

// maximum diameter of circle is minimum dimension
config.d = Math.min(config.w, config.h);

var file = "java8.csv";

d3.csv(file, convert, callback);

function convert(row) {
  var parts = row.name.split(".");
  row.id = row.name;
  row.name = parts[parts.length - 1];
  row.value = +row.value;
  return row;
}

function callback(error, data) {
    if (error) {
        console.warn(file, error);
        return;
    }

function drawLinks(g, links, generator) {
  var paths = g.selectAll("path")
    .data(links)
    .enter()
    .append("path")
    .attr("d", generator)
    .attr("class", "link")
  	.style("stroke","lightgrey");
}

function drawDendrogramCurved(id, root) {
  var svg = d3.select("body").select("#" + id);
  svg.attr("width", config.w);
  svg.attr("height", config.h);
  
  var g = svg.append("g");
  g.attr("id", "plot");
  g.attr("transform", translate(config.pad, config.pad));

var cluster = d3.cluster()
  	.size([config.w - 2 * config.pad,
          config.h - 2 * config.pad]);

cluster(root);
  
  // create line generator
  var curvedLine = function(d) {
    // select edge layout generator for curved lines
    // https://github.com/d3/d3-shape/issues/27
    var mid = (d.source.y + d.target.y) / 2;
    return "M" + d.source.x + "," + d.source.y
      + "C" + d.source.x + "," + mid
      + " " + d.target.x + "," + mid
      + " " + d.target.x + "," + d.target.y;
  }
  
  drawLinks(g, root.links(), curvedLine);
  drawNodes(g, root.descendants(), true);
}

function drawCircularTraditional(id, root) {
  var svg = d3.select("body").select("#" + id);
  svg.attr("width", config.w);
  svg.attr("height", config.h);

var g = svg.append("g");
  g.attr("id", "plot");

var xshift = config.pad + (config.w - config.d) / 2;
  var yshift = config.pad + (config.h - config.d) / 2;
  g.attr("transform", translate(xshift, yshift));
}

function drawCirclePacking(id, root) {
  var svg = d3.select("body").select("#" + id);
  svg.attr("width", config.w);
  svg.attr("height", config.h);

var g = svg.append("g");
  g.attr("id", "plot");

// TODO
}

function drawTreeMap(id, root) {
  var svg = d3.select("body").select("#" + id);
  svg.attr("width", config.w);
  svg.attr("height", config.h);

var g = svg.append("g");
  g.attr("id", "plot");

// TODO

// .attr("id", function(d) { return d.data.name; })
    // .attr("class", "node")
    // .style("fill", function(d) {return color(d.depth)})
    // .on("mouseover.tooltip", function(d) {
    //   show_tooltip(g, d3.select(this));
    //   d3.select(this).classed("selected", true);
    // })
    // .on("mouseout.tooltip", function(d) {
    //   g.select("#tooltip").remove();
    //   d3.select(this).classed("selected", false);
    // });
}

function drawSunburst(id, root) {
  var svg = d3.select("body").select("#" + id);
  svg.attr("width", config.w);
  svg.attr("height", config.h);

var g = svg.append("g");
  g.attr("id", "plot");
  g.attr("transform", translate(config.pad, config.pad));

// TODO

// .attr("id", function(d) { return d.data.name; })
    // .attr("class", "node")
    // .style("fill", function(d) {return color(d.depth)})
    // .on("mouseover.tooltip", function(d) {
    //   show_tooltip(g, d3.select(this));
    //   d3.select(this).classed("selected", true);
    //   d3.select(this).raise();
    // })
    // .on("mouseout.tooltip", function(d) {
    //   g.select("#tooltip").remove();
    //   d3.select(this).classed("selected", false);
    // });
}
</script>
</body>

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

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