WIP: new map

bgpdata/templates/bgpdata/new_new_map.html

@@ -0,0 +1,215 @@
+{% extends "base.html" %}
+{% block container_class %}container-fluid{% endblock %}
+{% block head %}
+{% load static from staticfiles %}
+<!-- <script src="{% static "js/d3.js" %}" charset="utf-8"></script> -->
+<script src="https://d3js.org/d3.v5.min.js"></script>
+<style>
+.node {
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+
+.link {
+  stroke: #999;
+  stroke-opacity: .6;
+}
+
+#plotwin {
+    height: 75vh;
+}
+</style>
+{% endblock %}
+{% block body %}
+<div class="page-header">
+	<h3>{% if crawl.pk %}Crawl run {{crawl.pk}}{% else %}Live Crawl {% endif %} from {{crawl.startTime|date:"d.m.Y H:i"}}</h3>
+</div>
+
+<div id="plotwin" class="container-fluid"></div>
+<!-- <div id="infowin"><div class="alert alert-info" role="alert">Click on a node for more information</div></div> -->
+<script type="text/javascript" charset="utf-8">
+
+const margin = {
+  top: 40,
+  bottom: 10,
+  left: 20,
+  right: 20,
+};
+let plotwin = document.getElementById("plotwin")
+const width = plotwin.offsetWidth - margin.left - margin.right;
+const height = plotwin.offsetHeight - margin.top - margin.bottom;
+
+let drag = d3.drag()
+    .on("drag", dragged);
+
+function dragged() {
+    let current = d3.select(this);
+    current
+        .attr('cx', d3.event.x)
+        .attr('cy', d3.event.y);                   
+        console.log(`${d3.event.x}, ${d3.event.y}`);
+}
+
+function dragmove(d) {
+  let x = d3.event.x;
+  let y = d3.event.y;
+  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
+}
+
+const parent_svg = d3
+  .select("#plotwin")
+  .append("svg")
+  .attr("width", width + margin.left + margin.right)
+  .attr("height", height + margin.top + margin.bottom)
+  //.attr("viewBox", [width / 2, height / 2, width, height])
+  .attr("viewBox", [0, 0, width, height])
+const svg = parent_svg.append("g")
+//  .append("g")
+//  .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+parent_svg.call(
+    d3.zoom()
+        .scaleExtent([.1, 4])
+        .on("zoom", function() { svg.attr("transform", d3.event.transform); })
+);
+
+//const simulation = d3
+//  .forceSimulation()
+//  .force(
+//    "link",
+//    d3.forceLink().id((d) => d.id)
+//  )
+//  .force("charge", d3.forceManyBody().distanceMin(50).strength(-300))
+//  .force("center", d3.forceCenter(width / 2, height / 2));
+
+const color = d3.scaleOrdinal(d3.schemeCategory10);
+
+drag = simulation => {
+  
+  function dragstarted(d) {
+    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+  
+  function dragged(d) {
+    d.fx = d3.event.x;
+    d.fy = d3.event.y;
+  }
+  
+  function dragended(d) {
+    if (!d3.event.active) simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+  }
+  
+  return d3.drag()
+      .on("start", dragstarted)
+      .on("drag", dragged)
+      .on("end", dragended);
+}
+
+
+d3.json("/api/v2/crawlrun/live/?with_graph").then((data) => {
+  // Links data join
+  data = data.graph
+
+  const simulation = d3.forceSimulation(data.nodes)
+      //.force("link", d3.forceLink(data.links).id(d => d.id).distance(150).strength(1))
+      //.force("link", d3.forceLink().id(function(d) { return d.id; }))
+      .force("link", d3.forceLink().id(d => d.id)
+            .distance(l => {
+                neighs = Math.min(l.source.neighbors, l.target.neighbors);
+                switch(neighs) {
+                    case 0: return 40;
+                    case 1: return 40;
+                    case 2: return 120;
+                    case 3:
+                    case 4: return 200;
+                    default: return 300;
+                }
+            })
+            .strength(l => {
+                neighs = Math.min(l.source.neighbors, l.target.neighbors);
+                return 1 / (neighs);
+
+            }))
+      .force("charge", d3.forceManyBody()
+            .strength(-200)
+            .theta(1.1))
+      //.force("collision", d3.forceCollide(50).strength(0.2).iterations(100))
+      //.force("collision", d3.forceCollide(40).strength(0.2))
+      .force("collision", d3.forceCollide(40).strength(0.2))
+      //.force("x", d3.forceX())
+      //.force("y", d3.forceY())
+      .force("center", d3.forceCenter(width / 2, height / 2));
+      //.force("center", d3.forceRadial(100, width / 2, height / 2));
+
+
+
+
+  const link = svg
+    .selectAll(".link")
+    .data(data.links)
+    .join((enter) => 
+            enter.append("line")
+                 .attr("class", "link"));
+
+  // Nodes data join
+
+
+    let node = svg.selectAll('.node')
+                .data(data.nodes)
+                .enter()
+                .append("g")
+                .attr("id", d => "node-" + d.id)
+                .call(drag(simulation));
+
+    node.append("ellipse")
+        //.attr("rx", d => d.stub ? 35 : 40)
+        //.attr("ry", d => d.stub ? 14 : 20)
+        .attr("rx", d => d.stub ? 34 : (40 + (d.neighbors > 5 ? 5 : 0)))
+        .attr("ry", d => d.stub ? 12 : (20 + (d.neighbors > 5 ? 2 : 0)))
+        .attr("fill", function(d) {
+            if(d.directly_crawled)
+                return "#94FF70";
+            else if(!d.online)
+                return "#FFCCCC";
+                // return "#F0FFEB";
+            else if(d.stub)
+                return "#3291A8"
+            else
+                return "#D1FFC2";
+        })
+        .attr("stroke", "black")
+        .attr("stroke-width", "1px");
+
+    node.append('text')
+        .attr("fill", "black")
+        .attr("font-family", "sans-serif")
+        .attr("font-size", "13px")
+        .attr("font-weight", "bold")
+        .attr("dy", "4")
+        .attr("text-anchor", "middle")
+        .text(d => d.id)
+
+
+
+
+simulation.nodes(data.nodes).force("link").links(data.links);
+
+simulation.on("tick", (e) => {
+    link
+      .attr("x1", (d) => d.source.x)
+      .attr("y1", (d) => d.source.y)
+      .attr("x2", (d) => d.target.x)
+      .attr("y2", (d) => d.target.y);
+
+    node.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
+  });
+});
+
+
+</script>
+
+{% endblock %}