Added a graph which shows the comparison relationships

lib/d3experiment.js

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from "react";
+import * as d3 from 'd3';
+
+export function drawChart(height, width){
+    
+    d3.select("#chart")
+        .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .style("border", "1px solid black")
+        .append("text")
+        .attr("fill", "green")
+        .attr("x", 50)
+        .attr("y", 50)
+        .text("Hello D3")
+}
+
+export function drawCircles(){
+    var svg = d3.select("#circles")
+        .append("svg")
+        .attr("width", 960)
+        .attr("height", 500)
+        .attr("bgcolor", "blue")
+
+    var background = svg.append("rect")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("fill", "blue")
+    
+    var ball = svg.append("circle")
+        .attr("r", 73)
+        .attr("cx", 480)
+        .attr("cy", 250)
+        .style("fill", "#ffe41e");
+}
+
+export function drawGraph(){
+    let margin = {top: 20, right: 30, bottom: 20, left: 30};
+    let width = 900 - margin.left - margin.right;
+    let height = 600 - margin.top - margin.bottom;
+
+    var svg = d3.select("#graph")
+        .append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+    
+    let data = ({
+        "nodes": [
+          {
+            "id": 1,
+            "name": "A"
+          },
+          {
+            "id": 2,
+            "name": "B"
+          },
+          {
+            "id": 3,
+            "name": "C"
+          },
+          {
+            "id": 4,
+            "name": "D"
+          },
+          {
+            "id": 5,
+            "name": "E"
+          },
+          {
+            "id": 6,
+            "name": "F"
+          },
+          {
+            "id": 7,
+            "name": "G"
+          },
+          {
+            "id": 8,
+            "name": "H"
+          },
+          {
+            "id": 9,
+            "name": "I"
+          },
+          {
+            "id": 10,
+            "name": "J"
+          }
+        ],
+        "links": [
+      
+          {
+            "source": 1,
+            "target": 2
+          },
+          {
+            "source": 1,
+            "target": 5
+          },
+          {
+            "source": 1,
+            "target": 6
+          },
+      
+          {
+            "source": 2,
+            "target": 3
+          },
+                  {
+            "source": 2,
+            "target": 7
+          }
+          ,
+      
+          {
+            "source": 3,
+            "target": 4
+          },
+           {
+            "source": 8,
+            "target": 3
+          }
+          ,
+          {
+            "source": 4,
+            "target": 5
+          }
+          ,
+      
+          {
+            "source": 4,
+            "target": 9
+          },
+          {
+            "source": 5,
+            "target": 10
+          }
+        ]
+    })
+
+    console.log(data)
+    // List of node names
+    var allNodes = data.nodes.map(function(d){return d.name})
+    
+    // A linear scale to position the nodes on the X axis
+    var x = d3.scalePoint()
+        .range([0, width])
+        .domain(allNodes)
+    
+    // Add the circle for the nodes
+    svg
+        .selectAll("mynodes")
+        .data(data.nodes)
+        .enter()
+        .append("circle")
+        .attr("cx", function(d){ return(x(d.name))})
+        .attr("cy", height-30)
+        .attr("r", 8)
+        .style("fill", "#69b3a2")
+    
+    // And give them a label
+    svg
+        .selectAll("mylabels")
+        .data(data.nodes)
+        .enter()
+        .append("text")
+        .attr("x", function(d){ return(x(d.name))})
+        .attr("y", height-10)
+        .text(function(d){ return(d.name)})
+        .style("text-anchor", "middle")
+    
+    // Add links between nodes. Here is the tricky part.
+    // In my input data, links are provided between nodes -id-, NOT between node names.
+    // So I have to do a link between this id and the name
+    var idToNode = {};
+    data.nodes.forEach(function (n) {
+        idToNode[n.id] = n;
+    });
+    // Cool, now if I do idToNode["2"].name I've got the name of the node with id 2
+    
+    // Add the links
+    svg
+        .selectAll('mylinks')
+        .data(data.links)
+        .enter()
+        .append('path')
+        .attr('d', function (d) {
+            let start = x(idToNode[d.source].name)    
+                // X position of start node on the X axis
+            let end = x(idToNode[d.target].name)      
+                // X position of end node
+            return ['M', 
+                start, 
+                height-30,    
+                    // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
+                'A',                            
+                    // This means we're gonna build an elliptical arc
+                (start - end)/2, ',',    
+                    // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
+                (start - end)/2, 0, 0, ',',
+                start < end ? 1 : 0, end, ',', height-30] 
+                    // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
+            .join(' ');
+        })
+        .style("fill", "none")
+        .attr("stroke", "black")
+    
+    // labels for links
+    svg
+        .selectAll('mylinks')
+        .data(data.links)
+        .enter()
+        .append("text")
+        .attr("x", function(d){ 
+            let start = x(idToNode[d.source].name)    
+                // X position of start node on the X axis
+            let end = x(idToNode[d.target].name)      
+                // X position of end node
+            return start + (end-start)/2
+        })
+        .attr("y", function(d){ 
+            let start = x(idToNode[d.source].name)    
+                // X position of start node on the X axis
+            let end = x(idToNode[d.target].name)      
+                // X position of end node
+            return height-30-(Math.abs(start-end)/2)//height-30
+        })
+        .text(function(d){ return(`${idToNode[d.source].name}-${idToNode[d.target].name}`)})
+        .style("text-anchor", "top")
+
+    svg.selectAll("text").data(data.links).enter()
+    .append("text")
+    .attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; })
+    .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })
+    .text(function(d) { return d.something; });
+
+
+}
+
+export function D3Experiment() {
+
+    useEffect(() => {
+        drawGraph();
+    }, []);
+
+    return (
+        <div>
+            <div id="chart">
+            </div>
+            <div id="circles">
+            </div>
+            <div id="graph">
+            </div>
+        </div>
+    );
+
+}
+
+
+export default D3Experiment;

lib/labeledgraph.js

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import * as d3 from 'd3';
+
+function getlength(number) {
+    return number.toString().length;
+}
+
+function drawGraphInner(list, quantitativeComparisons){
+    if(true){
+        // Build the graph object
+        let nodes = list.map((x,i) => ({id: i, name: x}))
+        let links = quantitativeComparisons.map(([element1, element2, weight]) => ({source: list.indexOf(element1), target: list.indexOf(element2), weight: weight}))
+        console.log("Links")
+        console.log(links)
+
+        let data = ({
+            nodes,
+            links: links
+        })
+        console.log(data)
+
+        // Build the d3 graph
+        let margin = {top: 0, right: 30, bottom: 20, left: 30};
+        let width = 900 - margin.left - margin.right;
+        let height = 400 - margin.top - margin.bottom;
+
+        var svg = d3.select("#graph")
+            .append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        console.log(data)
+        // List of node names
+        var nodeNames = data.nodes.map(function(d){return d.name})
+        
+        // A linear scale to position the nodes on the X axis
+        var x = d3.scalePoint()
+            .range([0, width])
+            .domain(nodeNames)
+        
+        // Add the circle for the nodes
+        svg
+            .selectAll("mynodes")
+            .data(data.nodes)
+            .enter()
+            .append("circle")
+            .attr("cx", function(d){ return(x(d.name))})
+            .attr("cy", height-30)
+            .attr("r", 8)
+            .style("fill", "#69b3a2")
+        
+        // And give them a label
+        svg
+            .selectAll("mylabels")
+            .data(data.nodes)
+            .enter()
+            .append("text")
+            .attr("x", function(d){ return(x(d.name))})
+            .attr("y", height-10)
+            .text(function(d){ return(d.name)})
+            .style("text-anchor", "middle")
+        
+
+        
+        // Add links between nodes.
+        // In the input data, links are provided between nodes -id-, not between node names.
+        // So one has to link ids and names
+        // Note Nuño: This is inefficient, and we could have built the data object to avoid this. However, every time I try to refactor this, the thing breaks. 
+        var nodesById = {};
+        data.nodes.forEach(function (n) {
+            nodesById[n.id] = n;
+        });
+        
+        // Cool, now if I do nodesById["2"].name I've got the name of the node with id 2
+        
+        // Add the links
+        svg
+            .selectAll('mylinks')
+            .data(data.links)
+            .enter()
+            .append('path')
+            .attr('d', function (d) {
+                let start = x(nodesById[d.source].name)    
+                    // X position of start node on the X axis
+                let end = x(nodesById[d.target].name)      
+                    // X position of end node
+                return ['M', 
+                    start, 
+                    height-30,    
+                        // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
+                    'A',                            
+                        // This means we're gonna build an elliptical arc
+                    (start - end)/2, ',',    
+                        // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
+                    (start - end)/2, 0, 0, ',',
+                    start < end ? 1 : 0, end, ',', height-30] 
+                        // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
+                .join(' ');
+            })
+            .style("fill", "none")
+            .attr("stroke", "black")
+        
+        // labels for links
+        svg
+            .selectAll('mylinks')
+            .data(data.links)
+            .enter()
+            .append("text")
+            .attr("x", function(d){ 
+                let start = x(nodesById[d.source].name)    
+                    // X position of start node on the X axis
+                let end = x(nodesById[d.target].name)      
+                    // X position of end node
+                return start + (end-start)/2 -4*getlength(d.weight)
+            })
+            .attr("y", function(d){ 
+                let start = x(nodesById[d.source].name)    
+                    // X position of start node on the X axis
+                let end = x(nodesById[d.target].name)      
+                    // X position of end node
+                return height-32-(Math.abs(start-end)/2)//height-30
+            })
+            .text(function(d){ return(`${d.weight}`)})
+            .style("text-anchor", "top")
+
+    }
+
+
+}
+
+export function DrawGraph({list, quantitativeComparisons, isListOrdered}) {
+    // list is just an array
+    // arrows is an array of arrows
+    
+    if(isListOrdered){
+        drawGraphInner(list, quantitativeComparisons);
+    }
+    
+    return (
+        <div>
+            <div id="graph">
+            </div>
+        </div>
+    );
+
+}

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "d3": "^6.7.0",
     "next": "latest",
     "react": "^17.0.1",
     "react-compound-slider": "^3.3.1",

pages/index.js

@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import React, { useState } from "react";
+import {DrawGraph} from '../lib/labeledgraph';
 import { SliderElement } from "../lib/slider.js";
 
 // Utilities
@@ -46,7 +47,7 @@ export default function Home() {
   const [quantitativeComparisons, setQuantitativeComparisons] = useState([])
 
   const [isListOrdered, setIsListOrdered]  = useState(false)
-  const [orderedList, setOrderedList] = useState(null)
+  const [orderedList, setOrderedList] = useState([])
 
 
   // Manipulations
@@ -185,6 +186,11 @@ export default function Home() {
           </button>
         </div>
         
+        <DrawGraph 
+          isListOrdered={isListOrdered}
+          list={orderedList}
+          quantitativeComparisons={quantitativeComparisons}>
+        </DrawGraph>
 
         <div className={`mt-10 ${isListOrdered? "": "hidden" }`}>
           <p>{`Ordered list: ${JSON.stringify(orderedList, null, 4)}`}</p> 
@@ -192,7 +198,6 @@ export default function Home() {
           <p>{`Quantitative comparisons: ${JSON.stringify(quantitativeComparisons, null, 4)}`}</p> 
 
         </div>
-
       </main>
 
     </div>