Skip to content
Snippets Groups Projects
Commit 39d5b9e9 authored by Marc Feger's avatar Marc Feger
Browse files

Add stylesheets and better physics

parent 993d6f94
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/app.js
+ 4
− 1
View file @ 39d5b9e9
import {Network} from './js/visualizer/visualization' import './styles/link.scss';
import './styles/node.scss';
import './styles/tooltip.scss';
import {Network} from './js/visualizer/visualization';
new Network().showNetwork('match (a:Issue{id:2})<-[r*..]-(b) return *'); new Network().showNetwork('match (a:Issue{id:2})<-[r*..]-(b) return *');
\ No newline at end of file
src/index.html
+ 0
− 28
View file @ 39d5b9e9
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
.link {
stroke: #ffffff;
stroke-width: 2px;
pointer-events: all;
}
.node circle {
pointer-events: all;
stroke: #ffffff;
stroke-width: 1px;
fill: grey;
}
div.tooltip {
position: absolute;
background-color: #ffd899;
max-width;
200px;
height: auto;
padding: 2px;
border-style: solid;
border-radius: 4px;
border-width: 1px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
pointer-events: none;
}
svg { svg {
background: black; background: black;
} }
......
src/js/visualizer/visualization.js
+ 41
− 33
View file @ 39d5b9e9
import * as d3 from 'd3' import * as d3 from 'd3'
import {legendColor} from 'd3-svg-legend'
import {Neo4JAdapter} from '../neo4j/neo' import {Neo4JAdapter} from '../neo4j/neo'
import {Graph} from '../graph/graph' import {Graph} from '../graph/graph'
import {GraphCreator} from '../graph/graphCreator' import {GraphCreator} from '../graph/graphCreator'
...@@ -9,8 +8,6 @@ export class Network { ...@@ -9,8 +8,6 @@ export class Network {
async showNetwork(query) { async showNetwork(query) {
const graph = await new GraphCreator().fill(new Graph(), query); const graph = await new GraphCreator().fill(new Graph(), query);
var color = d3.scaleOrdinal(d3.schemeSet3);
var tooltip = d3.select("body") var tooltip = d3.select("body")
.append("div") .append("div")
.attr("class", "tooltip") .attr("class", "tooltip")
...@@ -22,21 +19,32 @@ export class Network { ...@@ -22,21 +19,32 @@ export class Network {
const simulation = d3.forceSimulation() const simulation = d3.forceSimulation()
.nodes(graph.nodes) .nodes(graph.nodes)
.force('link', d3.forceLink().id(d => d.id).distance(20)) .force('link', d3.forceLink().id(d => d.id).distance(100))
.force('charge', d3.forceManyBody()) .force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width / 2, height / 2)) .force('center', d3.forceCenter(width / 2, height / 2))
.velocityDecay(0.3)
.alphaTarget(1)
.on('tick', ticked); .on('tick', ticked);
simulation.force('link') simulation.force('link')
.links(graph.edges); .links(graph.edges);
const R = 6; const R = 10;
let link = svg.selectAll('line') let link = svg.selectAll('line')
.data(graph.edges) .data(graph.edges)
.enter().append('line'); .enter().append('line');
link link
.attr('class', 'link') .attr('class', 'link')
.attr('stroke', function (l) {
if (l.type.includes("REGARDING")) {
return "#A9A9A9";
} else if (l.type.includes("CONCLUDES")) {
return "#ce34ff";
} else if (l.type.includes("PREMISE_OF")) {
return "#7b6fcc";
}
})
.on('mouseover.tooltip', function (d) { .on('mouseover.tooltip', function (d) {
tooltip.transition() tooltip.transition()
.duration(300) .duration(300)
...@@ -70,7 +78,15 @@ export class Network { ...@@ -70,7 +78,15 @@ export class Network {
node.append('circle') node.append('circle')
.attr('r', R) .attr('r', R)
.attr("fill", function (d) { .attr("fill", function (d) {
return color(d.labels); if (d.labels.includes("Attack")) {
return "#ff0000";
} else if (d.labels.includes("Support")) {
return "#00ff00";
} else if (d.labels.includes("Statement")) {
return "#ffff00";
} else if (d.labels.includes("Issue")) {
return "#0000ff"
}
}) })
.on('mouseover.tooltip', function (d) { .on('mouseover.tooltip', function (d) {
tooltip.transition() tooltip.transition()
...@@ -82,11 +98,14 @@ export class Network { ...@@ -82,11 +98,14 @@ export class Network {
+ "<p/>Labels:" + d.labels + "<p/>Labels:" + d.labels
+ "<p/>Title:" + d.title; + "<p/>Title:" + d.title;
} else if (d.labels.includes("Statement")) { } else if (d.labels.includes("Statement")) {
info = "id:" + d.id info = "<div class='card'>"
+ "<img src='https://www.w3schools.com/w3images/avatar2.png' width='80' height='80'/>"
+ "<div class='container'>"
+ "<h4><b>John Doe</b></h4>"
+ "<p>id:" + d.id
+ "<p/>Labels:" + d.labels + "<p/>Labels:" + d.labels
+ "<p/>Textversion:" + d.textversion; + "<p/>Textversion:" + d.textversion;
} } else if (d.labels.includes("Argument")) {
else if (d.labels.includes("Argument")){
info = "id:" + d.id info = "id:" + d.id
+ "<p/>Labels:" + d.labels; + "<p/>Labels:" + d.labels;
} }
...@@ -105,12 +124,7 @@ export class Network { ...@@ -105,12 +124,7 @@ export class Network {
tooltip.style("left", (d3.event.pageX) + "px") tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px"); .style("top", (d3.event.pageY + 10) + "px");
}) })
.on('dblclick', releasenode) .on('dblclick', releasenode);
node.append('text')
.attr('x', 0)
.attr('dy', '.35em')
.text(d => d.name);
function ticked() { function ticked() {
link link
...@@ -120,7 +134,13 @@ export class Network { ...@@ -120,7 +134,13 @@ export class Network {
.attr('y2', d => d.target.y); .attr('y2', d => d.target.y);
node node
.attr('transform', d => `translate(${d.x},${d.y})`); .attr('transform', d => `translate(${d.x},${d.y})`)
.attr("cx", function (d) {
return d.x = Math.max(R, Math.min(width - R, d.x));
})
.attr("cy", function (d) {
return d.y = Math.max(R, Math.min(height - R, d.y));
});
} }
function dragstarted(d) { function dragstarted(d) {
...@@ -138,6 +158,10 @@ export class Network { ...@@ -138,6 +158,10 @@ export class Network {
if (!d3.event.active) simulation.alphaTarget(0); if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null; d.fx = null;
d.fy = null; d.fy = null;
graph.nodes[0].x = width / 2;
graph.nodes[0].y = height / 2;
} }
function releasenode(d) { function releasenode(d) {
...@@ -167,24 +191,8 @@ export class Network { ...@@ -167,24 +191,8 @@ export class Network {
}; };
} }
var sequentialScale = d3.scaleOrdinal(d3.schemeSet3)
.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
svg.append("g") svg.append("g")
.attr("class", "legendSequential") .attr("class", "legendSequential")
.attr("transform", "translate(" + (width - 100) + "," + (height - 300) + ")"); .attr("transform", "translate(" + (width - 100) + "," + (height - 300) + ")");
var legendSequential = legendColor()
.shapeWidth(30)
.cells(11)
.orient("vertical")
.title("Group number by color:")
.titleWidth(100)
.scale(sequentialScale);
svg.select(".legendSequential")
.call(legendSequential);
} }
} }
\ No newline at end of file
src/styles/link.scss 0 → 100644
+ 4
− 0
View file @ 39d5b9e9
.link {
stroke-width: 5px;
pointer-events: all;
}
src/styles/node.scss 0 → 100644
+ 5
− 0
View file @ 39d5b9e9
.node circle {
pointer-events: all;
stroke: #ffffff;
stroke-width: 4px;
}
\ No newline at end of file
src/styles/tooltip.scss 0 → 100644
+ 28
− 0
View file @ 39d5b9e9
.card {
box-shadow: 0 4px 8px 0 rgba(170, 0, 200, 0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
div.tooltip {
position: absolute;
background-color: #fff1d2;
max-width: 200px;
width: auto;
height: auto;
padding: 2px;
border-style: solid;
border-radius: 8px;
border-width: 1px;
box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.5);
pointer-events: none;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment