diff --git a/index.js b/index.js index 19f33c8..9dfd125 100644 --- a/index.js +++ b/index.js @@ -35,7 +35,6 @@ return err; } console.log('indexation ok'); - var graphFile = path.join(item.out, 'graph.json'); utils.graphs.docToDoc(res, { 'output': graphFile, diff --git a/public/css/force-directed-graph.css b/public/css/force-directed-graph.css index fa00740..8afc59f 100644 --- a/public/css/force-directed-graph.css +++ b/public/css/force-directed-graph.css @@ -1,9 +1,14 @@ .links line { - stroke: #999; + stroke: #546e7a; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; -} \ No newline at end of file +} + +.nodes circle title { + fill: yellow; +} + diff --git a/public/css/style.css b/public/css/style.css index 4cbe397..a572d96 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,3 +1,23 @@ +body{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100vw; + height: 100vh; + background: #37474f; +} +h1{ + color: white; +} +#subtitle { + height: 50px; + font-size: 22px; + text-align: center; + vertical-align: center; + color: white; +} svg { - border: 1px solid black; + border: 2px dotted white; + border-radius: 15px; } \ No newline at end of file diff --git a/public/index.html b/public/index.html index 8337656..c58a3d2 100644 --- a/public/index.html +++ b/public/index.html @@ -1,13 +1,17 @@ - + ez-indexation - +

Graph Document-Document

+
+
+ +
diff --git a/public/js/force-directed-graph.js b/public/js/force-directed-graph.js index c807675..b85b4a5 100644 --- a/public/js/force-directed-graph.js +++ b/public/js/force-directed-graph.js @@ -4,10 +4,24 @@ var loc = window.location.pathname, dir = loc.substring(0, loc.lastIndexOf('/')); - var svg = d3.select("svg"), - width = +svg.attr("width"), + var svg = d3.select("svg"); + + var widthWindow = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + var heightWindow = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + svg.attr("width", widthWindow / 1.5); + svg.attr("height", heightWindow / 1.5); + + var width = +svg.attr("width"), height = +svg.attr("height"); + d3.select(window) + .on("resize", function() { + var widthWindow = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + var heightWindow = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + svg.attr("width", widthWindow / 2); + svg.attr("height", heightWindow / 2); + }); + var color = d3.scaleOrdinal(d3.schemeCategory20); var simulation = d3.forceSimulation() @@ -21,65 +35,6 @@ d3.json(dir + "data/out/corpus/graph.json", function(error, graph) { if (error) throw error; - // var numCommunities = 128; - - // graph.nodes.forEach(function(node) { - // node.communities = []; - // node.communityBuffer = []; - // for (var community = 0; community < numCommunities; community++) { - // // Initialize with a small Exponential variate - // node.communities[community] = 0.01 * -Math.log(Math.random()); - // node.communityBuffer[community] = 0.0; - // } - // }); - - // var communitySums = []; - - // for (var iteration = 0; iteration < 20; iteration++) { - // for (var community = 0; community < numCommunities; community++) { - // communitySums[community] = 0.0; - // } - - // // Estimate community memberships for each edge - // graph.links.forEach(function(edge) { - // var sourceCommunities = graph.nodes[edge.source].communities; - // var targetCommunities = graph.nodes[edge.target].communities; - // var distribution = []; - - // // Multiply the two community membership vectors - // for (var community = 0; community < numCommunities; community++) { - // distribution[community] = sourceCommunities[community] * targetCommunities[community]; - // } - - // // Normalize and add to the gradient - // var normalizer = edge.value / d3.sum(distribution); - // for (var community = 0; community < numCommunities; community++) { - // distribution[community] *= normalizer; - // communitySums[community] += distribution[community]; - // graph.nodes[edge.source].communityBuffer[community] += distribution[community]; - // graph.nodes[edge.target].communityBuffer[community] += distribution[community]; - // } - // }); - - // // We need to divide each node value by the square root of the community sum. - // var communityNormalizers = [] - // for (var community = 0; community < numCommunities; community++) { - // communityNormalizers[community] = 1.0 / Math.sqrt(communitySums[community]); - // } - - // // Update parameters and clear the buffer. - // graph.nodes.forEach(function(node) { - // for (var community = 0; community < numCommunities; community++) { - // node.communities[community] = node.communityBuffer[community] * communityNormalizers[community]; - // node.communityBuffer[community] = 0.0; - // } - // node.community = 0; - // for (var community = 0; community < numCommunities; community++) { - // node.community = (node.communities[node.community] < node.communities[community]) ? community : node.community; - // } - // }); - // } - var link = svg.append("g") .attr("class", "links") .selectAll("line") @@ -95,7 +50,7 @@ .data(graph.nodes) .enter().append("circle") .attr("r", function(d) { - return 5; + return 7; // return 10 * d.specificity; }) .attr("fill", function(d) { @@ -104,7 +59,22 @@ .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) - .on("end", dragended)); + .on("end", dragended)) + .on("click", function(d) { + window.open('/data/in/corpus/' + d.istex + '.txt'); + }) + .on("mouseover", function(d) { + d3.select("#subtitle").transition(); + d3.select("#subtitle").style("opacity", 1); + d3.select("#subtitle").text(() => { + return d3.select(this).selectAll("title").text(); + }) + d3.select(this).transition().attr("r", 14).duration(200); + }) + .on("mouseleave", function(d) { + d3.select("#subtitle").transition().style("opacity", 0).duration(200); + d3.select(this).transition().attr("r", 7).duration(200); + }); node.append("title") .text(function(d) {