Added a graph which shows the comparison relationships
This commit is contained in:
parent
bc132010bb
commit
3102265aa8
262
lib/d3experiment.js
vendored
Normal file
262
lib/d3experiment.js
vendored
Normal file
|
|
@ -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;
|
||||
148
lib/labeledgraph.js
Normal file
148
lib/labeledgraph.js
Normal file
|
|
@ -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>
|
||||
);
|
||||
|
||||
}
|
||||
6939
package-lock.json
generated
Normal file
6939
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -8,6 +8,7 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^6.7.0",
|
||||
"next": "latest",
|
||||
"react": "^17.0.1",
|
||||
"react-compound-slider": "^3.3.1",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user