D3 Examples - Introvis

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background-color: #0f2228; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
        var svg,
        svgGroup;
    
    var margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
    },
        width = 960,
        height = 500,
        white = '#fff';
    
    svg = d3.select('body').append('svg')
            .attr({
                id: 'introvizSVG',
                        width: width,
                        height: height
            });
        
    svgGroup = svg.append('g')
      .attr({
        class: 'g',
        transform: 'translate(' + margin.left + ',' + margin.top + ')'
      });
        
    createForce();
    
    
    function createForce() {
        
        var force = d3.layout.force()
            .charge(-120)
            .linkDistance(30)
            .size([width, height]);
        
        d3.json("connections.json", function(error, graph) {
            if (error) throw error;
​
            force
                .nodes(graph.nodes)
                .links(graph.links)
                .start();                                             
​
            var link = svgGroup.selectAll(".link")
            .data(graph.links)
            .enter().append("line")
            .attr("class", "link")
            .style({
                'stroke-width': 1,
              'stroke': '#beb89b'
            });
​
            var node = svgGroup.selectAll(".node")
            .data(graph.nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", function(d){
                if (d.group == "road") {
                    return 6;
                } else if (d.group == "lan") {
                    return 3;
                } else {
                    return 1.5;
                }
            })
            .style("fill", white)
            .call(force.drag);
​
            node.append("title")
                .text(function(d) { return d.name; });
​
            force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });
​
                node.attr("cx", function(d) { return d.x = Math.max(6, Math.min(width - 6, d.x)); })
                    .attr("cy", function(d) { return d.y = Math.max(6, Math.min(height - 6, d.y)); });
            });
        });
​
    } //create force layout end
  </script>
</body>
​
    