Commit 830989ac authored by flynn's avatar flynn

Merge branch 'replace-vega-by-vis' into 'master'

Replace vega by vis

See merge request !3
parents 10e78737 086ea9d7
......@@ -375,16 +375,17 @@
{% style "/assets/font-awesome/css/all.css" %}
{% style "/css/screen.css" %}
{% script "/js/vendor/vega-4.4.0.js" %}
{% style "/css/vendor/vis.min.css" %}
{% script "js/vendor/vis.min.js" %}
{% script "/assets/font-awesome/js/all.js" %}
{% script "/js/home.js" %}
{% script "/assets/font-awesome/js/all.js" %}
<script type="text/javascript">
var csrfToken = "{{csrf-token}}";
</script>
{% script "/js/app.js" %} <!-- Compiled clojurescript -->
{% script "/js/graphing.js" %} <!-- Vega graphing -->
{% script "/js/graphing.js" %} <!-- Graph graphing -->
</body>
</html>
......@@ -25,4 +25,9 @@ body {
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
\ No newline at end of file
}
#view {
height: 600px;
max-height: 100%;
}
This diff is collapsed.
var view;
vega.loader()
.load('/js/spec.json')
.then(function(data) { render(JSON.parse(data)); });
function render(spec) {
view = new vega.View(vega.parse(spec))
.renderer('canvas') // set renderer (canvas or svg)
.initialize('#view') // initialize view within parent DOM container
.hover() // enable hover encode set processing
.run();
}
\ No newline at end of file
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var responseData = this.responseText;
console.log(responseData);
loadGraph(JSON.parse(responseData));
}
};
xhttp.open("GET", "relations_zeroed", true);
xhttp.send();
function loadGraph(request_data) {
var nodes = new vis.DataSet(
request_data["nodes"].map(node => {
return {
id: node.index,
label: node.name.slice(0,30) + (node.name.length > 30 ? "..." : ""),
color: 'hsl('+Math.floor(Math.random()*361)+',50%,75%)'
};
})
);
var edges = new vis.DataSet(
request_data["links"].map(link => {
return {
from: link.source,
to: link.target
};
})
);
var container = document.getElementById("view");
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
}
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
......@@ -26,4 +26,4 @@ document.addEventListener('DOMContentLoaded', () => {
function removeThis(ele) {
ele.parentNode.remove();
}
\ No newline at end of file
}
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 700,
"height": 400,
"padding": {
"top": 25,
"left": 0,
"right": 0,
"bottom": 0
},
"autosize": "none",
"signals": [
{
"name": "hover",
"value": null,
"on": [
{
"events": "symbol:mouseover",
"update": "datum"
},
{
"events": "symbol:mouseout",
"update": "null"
}
]
},
{
"name": "title",
"value": "",
"update": "hover ? hover.name : '' "
},
{
"name": "cx",
"update": "width / 2"
},
{
"name": "cy",
"update": "height / 2"
},
{
"name": "nodeRadius",
"value": 10,
"bind": {
"input": "range",
"min": 1,
"max": 50,
"step": 1
}
},
{
"name": "nodeCharge",
"value": -70,
"bind": {
"input": "range",
"min": -100,
"max": 10,
"step": 1
}
},
{
"name": "linkDistance",
"value": 70,
"bind": {
"input": "range",
"min": 5,
"max": 100,
"step": 1
}
},
{
"name": "static",
"value": false,
"bind": {
"input": "checkbox"
}
},
{
"description": "State variable for active node fix status.",
"name": "fix",
"value": false,
"on": [
{
"events": "symbol:mouseout[!event.buttons], window:mouseup",
"update": "false"
},
{
"events": "symbol:mouseover",
"update": "fix || true"
},
{
"events": "[symbol:mousedown, window:mouseup] > window:mousemove!",
"update": "xy()",
"force": true
}
]
},
{
"description": "Graph node most recently interacted with.",
"name": "node",
"value": null,
"on": [
{
"events": "symbol:mouseover",
"update": "fix === true ? item() : node"
}
]
},
{
"description": "Flag to restart Force simulation upon data changes.",
"name": "restart",
"value": false,
"on": [
{
"events": {
"signal": "fix"
},
"update": "fix && fix.length"
}
]
}
],
"data": [
{
"name": "node-data",
"url": "/relations_zeroed",
"format": {
"type": "json",
"property": "nodes"
}
},
{
"name": "link-data",
"url": "/relations_zeroed",
"format": {
"type": "json",
"property": "links"
}
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "node-data",
"field": "group"
},
"range": {
"scheme": "category20c"
}
}
],
"marks": [
{
"name": "nodes-group",
"type": "group",
"zindex": 1,
"from": {
"data": "node-data"
},
"marks": [
{
"name": "nodes",
"type": "symbol",
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": {"parent": "group"}
},
"stroke": {
"value": "white"
}
},
"update": {
"size": {
"signal": "2 * nodeRadius * nodeRadius"
},
"cursor": {
"value": "pointer"
}
}
}
},
{
"type": "text",
"interactive": false,
"encode": {
"enter": {
"fill": {
"value": "black"
},
"fontSize": {
"value": 12
},
"align": {
"value": "center"
},
"text": {
"field": {"parent": "name"}
},
"y": {
"value": -10
}
}
}
}
],
"on": [
{
"trigger": "fix",
"modify": "node",
"values": "fix === true ? {fx: node.x, fy: node.y} : {fx: fix[0], fy: fix[1]}"
},
{
"trigger": "!fix",
"modify": "node",
"values": "{fx: null, fy: null}"
}
],
"transform": [
{
"type": "force",
"iterations": 300,
"restart": {
"signal": "restart"
},
"static": {
"signal": "static"
},
"signal": "force",
"forces": [
{
"force": "center",
"x": {
"signal": "cx"
},
"y": {
"signal": "cy"
}
},
{
"force": "collide",
"radius": {
"signal": "nodeRadius"
}
},
{
"force": "nbody",
"strength": {
"signal": "nodeCharge"
}
},
{
"force": "link",
"links": "link-data",
"distance": {
"signal": "linkDistance"
}
}
]
}
]
},
{
"type": "path",
"from": {
"data": "link-data"
},
"interactive": false,
"encode": {
"update": {
"stroke": {
"value": "#ccc"
},
"strokeWidth": {
"value": 1
}
}
},
"transform": [
{
"type": "linkpath",
"require": {
"signal": "force"
},
"shape": "line",
"sourceX": "datum.source.x",
"sourceY": "datum.source.y",
"targetX": "datum.target.x",
"targetY": "datum.target.y"
}
]
},
{
"type": "text",
"interactive": false,
"encode": {
"enter": {
"x": {
"signal": "width",
"offset": -5
},
"y": {
"value": 0
},
"fill": {
"value": "black"
},
"fontSize": {
"value": 20
},
"align": {
"value": "right"
}
},
"update": {
"text": {
"signal": "title"
}
}
}
}
]
}
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment