D3 Implementation

Author: Umius-Brian

app/charts/route-trace.jsx

@@ -19,17 +19,58 @@ class RouteTrace {
 
   updateDatapoints = () => {
     const { svg, props: { data, width, height } } = this;
-    svg.selectAll('circle')
-      .data(data)
-      .enter()
-      .append('circle')
-      .style('fill', 'red')
+    console.log('data: ', data)
+    console.log('nodes: ', data[0])
+    console.log('links: ', data[1])
+
+      
+    var simulation = d3.forceSimulation(data[0])
+      .force('link', d3.forceLink())
+      .force('charge', d3.forceManyBody())
+      .force('center', d3.forceCenter(width / 2, height / 2))
+
+    const node = svg
+    .selectAll("circle")
+    .data(data[0])
+    .enter()
+    .append("circle")
+      .attr("r", 20)
       .attr('cx', () => Math.random() * width)
       .attr('cy', () => Math.random() * height)
-      .attr('r', 20)
+      .style("fill", "#00eda0")
       .on('mouseup', (d, i, nodes) => this.setActiveDatapoint(d, nodes[i]));
-  }
 
+     node.append("title")
+     .text(function(d) { return d.id; });
+
+    const link = svg
+      .selectAll("line")
+      .data(data[1])
+      .enter()
+      .append("line")
+      .style("stroke", "black")
+
+    simulation
+      .nodes(data[0])
+      .on('tick', ticked);
+
+    simulation.force('link')
+      .links(link);
+
+
+    function ticked() {
+      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("cx", function(d) { return d.x; })
+        .attr("cy", function(d) { return d.y; });
+    }
+  
+  }
 
   setActiveDatapoint = (d, node) => {
     d3.select(node).style('fill', 'yellow');

app/containers/GraphsContainer.jsx

@@ -32,7 +32,6 @@ const GraphsContainer = (props) => {
     ],
   };
 
-
   const [data, setData] = useState(null);
   const [width, setWidth] = useState(400);
   const [height, setHeight] = useState(400);
@@ -43,11 +42,11 @@ const GraphsContainer = (props) => {
   useEffect(initVis, [ data ]);
 
   function fetchData() {
-    Promise.resolve().then(() => setData(initialData.nodes));
+    Promise.resolve().then(() => setData(Object.values(initialData)));
   }
 
   function initVis() {
-    if(data && data.length) {
+    if (data && data.length) {
       const d3Props = {
         data,
         width,
@@ -60,7 +59,10 @@ const GraphsContainer = (props) => {
 
   return (
     <div className="graphsGrid">
-      <div ref={canvas}/>
+      <div className='routes'>
+        <div>{active}</div>
+        <div ref={canvas} />
+      </div>
       <SpeedChart service={service} />
       <TemperatureChart service={service} />
       <RequestTypesChart service={service} />