mhermans/graph.json

## readme.md

      
    Raw
  

              readme.md
            
          
    Basis graph-visualisatie prototype.
In eerste instantie kan het de hoofd-node en al de originele citaties tonen (1th order citatienetwerk).
Als je dan op een node klikt, klapt die open en kan je de gerelateerde nodes (papers, authors, journals, categories) bekijken. Zie voorbeeld hier.
Met de muis over een node gaan, geeft een kleine pop-up met basis-info (werkt al), er op klikken selecteerd de node, en dan kan er meer info getoont worden ad. zijkant (zie bv. hier. Zo kan de gebruiker dan ook op "Add this article to your Mendeley-library" of "Search for papers citing this on Google Scholar", ed. klikken.

  
## graph.json
{"nodes":[{"title":"Billari2003lifecourse","group":1, "weight":10},{"title":"Goldthorpe2002micro","group":1, "weight":10},{"title":"Goldthorpe1995Constant","group":1, "weight":10},{"title":"Svallfors2002class","group":1, "weight":10}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":1}, {"source":3,"target":0,"value":1}]}

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<script type="text/javascript">

var w = 960,
    h = 500

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

d3.json("graph.json", function(json) {
    var force = self.force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .gravity(.05)
        .distance(50)
        .charge(-100)
        .size([w, h])
        .start();

    var link = vis.selectAll("line.link")
        .data(json.links)
        .enter().append("svg:line")
        .attr("class", "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; });

    var node = vis.selectAll("g.node")
        .data(json.nodes)
        .enter().append("svg:g")
        .attr("class", "node")
        .call(force.drag)
        .on('mouseover', updateTooltip )
        .on('mouseout', function(d, i) {
                        tooltip.style("visibility", "hidden")
                        .property("active_entry", null);
                        });

    function selectNodeImage(d) {
          var nodeimg = "http://www.famfamfam.com/lab/icons/mini/icons/file_acrobat.gif" ;
          return nodeimg ;
      } ;


    node.append("svg:image")
        .attr("class", "circle")
        .attr("xlink:href", function(d) { return "http://www.famfamfam.com/lab/icons/mini/icons/file_acrobat.gif"; } )
        .attr("x", "-8px")
        .attr("y", "-8px")
        .attr("width", function(d) { return 16 + "px"; })
        .attr("height", function(d) { return "16px"; } );

/*    node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.title }); */

/* create a shared tooltip element */
        var tooltip = d3.select("body")
            .append("div")
            .style("position", "absolute")
            .style("z-index", "10")
            .attr('title', 'Foobarbaz')
            .attr('class', 'tooltip')
            .style("visibility", "visible");

        /* helper to determine current scroll position */
        function getDocScrollPos() {
         var x = document.body.scrollLeft ||
                 document.documentElement.scrollLeft ||
                 window.pageXOffset || 0,
             y = document.body.scrollTop ||
                 document.documentElement.scrollTop ||
                 window.pageYOffset || 0;
         return {'x':x, 'y':y};
        };

        /* helper to position tooltip and update for an entry */
        function updateTooltip(d, i, elem) {
            if (!elem) { elem = this; }
            var bbox = elem.getBBox();
            var ctm = elem.getScreenCTM();
            var spos = getDocScrollPos();
            tooltip.style( "top", (Math.ceil(bbox.y + ctm.f + spos.y))+"px")
                .style( "left", (Math.ceil(bbox.x + ctm.e + bbox.width + spos.x))+"px")
                .style("visibility", "visible")
                .property("active_entry", d.site_id)
                .html(get_tooltip_html(d));
        };

        /* helper to build the tooltip html for an entry */

        function get_tooltip_html(d) {
            return "<p>" + d.title + "</p>";
        };

        function get_tooltip_html_original(d) {
            return "<dl class='hdr'>" +
                "<dt>" + d.site + "</dt>" +
                "<dd>#" + d.pr + "</dd>" +
            "</dl>" +
            "<dl class='" + d.type + "'>" +
                "<dt>" + comma_fmt(d.p) + "</dt>" +
                "<dd>page views (#" + d.pr + ")</dt>" +
                "<dt>" + comma_fmt(d.a) + "</dt>" +
                "<dd>unique visitors (#" + d.ar + ")</dt>" +
                "<dt>" + formatSeconds(d.t) + "</dt>" +
                "<dd>time spent/month (#" + d.tr + ")</dt>" +
                "<dt>on</dt>" +
                "<dd>" + d.date + "</dd>" +
            "</dl>";
        };

vis.style("opacity", 1e-6)
     .transition()
       .duration(2500)
       .style("opacity", 1);

    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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });
});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
	<style type="text/css">
	.link { stroke: #ccc; }
	.nodetext { pointer-events: none; font: 10px sans-serif; }
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500

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

	d3.json("graph.json", function(json) {
	var force = self.force = d3.layout.force()
	.nodes(json.nodes)
	.links(json.links)
	.gravity(.05)
	.distance(50)
	.charge(-100)
	.size([w, h])
	.start();

	var link = vis.selectAll("line.link")
	.data(json.links)
	.enter().append("svg:line")
	.attr("class", "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; });

	var node = vis.selectAll("g.node")
	.data(json.nodes)
	.enter().append("svg:g")
	.attr("class", "node")
	.call(force.drag)
	.on('mouseover', updateTooltip )
	.on('mouseout', function(d, i) {
	tooltip.style("visibility", "hidden")
	.property("active_entry", null);
	});

	function selectNodeImage(d) {
	var nodeimg = "http://www.famfamfam.com/lab/icons/mini/icons/file_acrobat.gif" ;
	return nodeimg ;
	} ;


	node.append("svg:image")
	.attr("class", "circle")
	.attr("xlink:href", function(d) { return "http://www.famfamfam.com/lab/icons/mini/icons/file_acrobat.gif"; } )
	.attr("x", "-8px")
	.attr("y", "-8px")
	.attr("width", function(d) { return 16 + "px"; })
	.attr("height", function(d) { return "16px"; } );

	/* node.append("svg:text")
	.attr("class", "nodetext")
	.attr("dx", 12)
	.attr("dy", ".35em")
	.text(function(d) { return d.title }); */

	/* create a shared tooltip element */
	var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.attr('title', 'Foobarbaz')
	.attr('class', 'tooltip')
	.style("visibility", "visible");

	/* helper to determine current scroll position */
	function getDocScrollPos() {
	var x = document.body.scrollLeft \|\|
	document.documentElement.scrollLeft \|\|
	window.pageXOffset \|\| 0,
	y = document.body.scrollTop \|\|
	document.documentElement.scrollTop \|\|
	window.pageYOffset \|\| 0;
	return {'x':x, 'y':y};
	};

	/* helper to position tooltip and update for an entry */
	function updateTooltip(d, i, elem) {
	if (!elem) { elem = this; }
	var bbox = elem.getBBox();
	var ctm = elem.getScreenCTM();
	var spos = getDocScrollPos();
	tooltip.style( "top", (Math.ceil(bbox.y + ctm.f + spos.y))+"px")
	.style( "left", (Math.ceil(bbox.x + ctm.e + bbox.width + spos.x))+"px")
	.style("visibility", "visible")
	.property("active_entry", d.site_id)
	.html(get_tooltip_html(d));
	};

	/* helper to build the tooltip html for an entry */

	function get_tooltip_html(d) {
	return "<p>" + d.title + "</p>";
	};

	function get_tooltip_html_original(d) {
	return "<dl class='hdr'>" +
	"<dt>" + d.site + "</dt>" +
	"<dd>#" + d.pr + "</dd>" +
	"</dl>" +
	"<dl class='" + d.type + "'>" +
	"<dt>" + comma_fmt(d.p) + "</dt>" +
	"<dd>page views (#" + d.pr + ")</dt>" +
	"<dt>" + comma_fmt(d.a) + "</dt>" +
	"<dd>unique visitors (#" + d.ar + ")</dt>" +
	"<dt>" + formatSeconds(d.t) + "</dt>" +
	"<dd>time spent/month (#" + d.tr + ")</dt>" +
	"<dt>on</dt>" +
	"<dd>" + d.date + "</dd>" +
	"</dl>";
	};

	vis.style("opacity", 1e-6)
	.transition()
	.duration(2500)
	.style("opacity", 1);

	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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	});
	});

	</script>
	</body>
	</html>