Hierarchy D3 TF-IDF

by gauravameta

CSS

nodes {
  font: 24px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

var w = 1000;
    var h = 900;
    var linkDistance=50;

    var colors = d3.scale.category10();

    

 
    var svg = d3.select("body").append("svg").attr({"width":w,"height":h});

function update(dataset){
    var force = d3.layout.force()
        .nodes(dataset.nodes)
        .links(dataset.edges)
        .size([w,h])
        .linkDistance([linkDistance])
        .charge([-600])
        //.theta(0.1)
        .gravity(0.1)
        .start();

 

    var edges = svg.selectAll("line")
      .data(dataset.edges)
      .enter()
      .append("line")
      .attr("id",function(d,i) {return 'edge'+i})
      .attr('marker-end',function(d) {if (d.type==0) return 'url(#arrowhead)'; else return '';})
      .style("stroke",function(d) {if (d.type==0) return '#cccccc'; else return '#000000';})
      .style("pointer-events", "none");
    
    var nodes = svg.selectAll("circle")
      .data(dataset.nodes)
      .enter()
      .append("circle")
      .attr({"r":15})
      .style("fill",function(d){if(d.Group==0) return d3.rgb(50,50,255); else if(d.Group==1) return d3.rgb(50,255,50);else if(d.Group==2) return d3.rgb(255,50,50);else return d3.rgb(150,150,150);})
      .call(force.drag)


    var nodelabels = svg.selectAll(".nodelabel") 
       .data(dataset.nodes)
       .enter()
       .append("text")
       .attr({"x":function(d){return d.x;},
              "y":function(d){return d.y;},
              "class":"nodelabel",
              "stroke":"black",
              "font-size":"12px"})
       .text(function(d){return d.name;});

    var edgepaths = svg.selectAll(".edgepath")
        .data(dataset.edges)
        .enter()
        .append('path')
        .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
               'class':'edgepath',
               'fill-opacity':0,
               'stroke-opacity':0,
               'fill':'blue',
               'stroke':'red',
               'id':function(d,i) {return 'edgepath'+i}})
       ...