From b40727c9df637ae8fba7e56867df16df9eee7164 Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Thu, 25 Nov 2021 09:01:31 +0000 Subject: [PATCH] tweaks: Id now alphabetical strings rather than numbers --- lib/findPaths.js | 8 ++-- lib/labeledgraph.js | 104 ++++++++++++++++++++++---------------------- lib/utils.js | 4 +- pages/index.js | 6 +-- 4 files changed, 61 insertions(+), 61 deletions(-) diff --git a/lib/findPaths.js b/lib/findPaths.js index 5cabaa2..86422d3 100644 --- a/lib/findPaths.js +++ b/lib/findPaths.js @@ -1,6 +1,6 @@ /* Imports*/ import React from "react"; -import { toLocale, truncateValueForDisplay } from "../lib/utils.js" +import { toLocale, truncateValueForDisplay, numToAlphabeticalString } from "../lib/utils.js" /* Utilities */ let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length @@ -8,9 +8,9 @@ let formatLargeOrSmall = num => { if(num > 1){ return toLocale(truncateValueForDisplay(num)) }else if(num > 0){ - return num.toFixed(-Math.floor(Math.log(num)/Math.log(10))); + return num.toFixed(-Math.floor(Math.log(num)/Math.log(10))+1); }else if(num > -1){ - return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10))); + return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10))+1); }else{ return toLocale(num)//return "~0" @@ -99,7 +99,7 @@ export function CreateTableWithDistances({isListOrdered, orderedList, listOfElem } else { let nodes = orderedList.map(i => listOfElements[i]) let distances = findDistancesForAllElements({nodes, links}) - let rows = nodes.map((element, i) => ({id: element.id, name: element.name, distances: distances[i]})) + let rows = nodes.map((element, i) => ({id: numToAlphabeticalString(element.id), name: element.name, distances: distances[i]})) console.log("rows@CreateTableWithDistances") console.log(rows) return( diff --git a/lib/labeledgraph.js b/lib/labeledgraph.js index 210cc97..11eb277 100644 --- a/lib/labeledgraph.js +++ b/lib/labeledgraph.js @@ -1,34 +1,34 @@ import React, { useState, useEffect } from "react"; import * as d3 from 'd3'; -import { toLocale, truncateValueForDisplay } from "../lib/utils.js" +import { toLocale, truncateValueForDisplay, numToAlphabeticalString } from "../lib/utils.js" let getlength = (number) => number.toString().length; -export function removeOldSvg(){ +export function removeOldSvg() { d3.select("#graph").select("svg").remove(); } -function drawGraphInner({nodes, links}){ - +function drawGraphInner({ nodes, links }) { + // List of node ids for convenience var nodeids = nodes.map(node => node.id) var positionById = {} - nodeids.forEach((nodeid, i) => positionById[nodeid]=i) + nodeids.forEach((nodeid, i) => positionById[nodeid] = i) console.log("NodeIds/positionById") console.log(nodeids) console.log(positionById) - + // Calculate the dimensions - let margin = {top: 0, right: 30, bottom: 20, left: 30}; + let margin = { top: 0, right: 30, bottom: 20, left: 30 }; let width = 900 - margin.left - margin.right; var x = d3.scalePoint() .range([0, width]) .domain(nodeids) let heights = links.map(link => { - let start = x(positionById[link.source]) + let start = x(positionById[link.source]) let end = x(positionById[link.target]) - return Math.abs(start-end)/2+70 // Magic constant. + return Math.abs(start - end) / 2 + 70 // Magic constant. }) console.log(heights) let maxheight = Math.max(...heights) @@ -44,32 +44,32 @@ function drawGraphInner({nodes, links}){ .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - + // A linear scale to position the nodes on the X axis - + // Add the circle for the nodes svg .selectAll("mynodes") .data(nodes) .enter() .append("circle") - .attr("cx", function(d){ return(x(d.id))}) - .attr("cy", height-30) + .attr("cx", function (d) { return (x(d.id)) }) + .attr("cy", height - 30) .attr("r", 8) .style("fill", "#69b3a2") - + // And give them a label svg .selectAll("mylabels") .data(nodes) .enter() .append("text") - .attr("x", function(d){ return(x(d.id))}) - .attr("y", height-10) - .text(function(d){ return(d.id)}) + .attr("x", function (d) { return (x(d.id)) }) + .attr("y", height - 10) + .text(function (d) { return numToAlphabeticalString(d.id) }) .style("text-anchor", "middle") - + // Add the links svg .selectAll('mylinks') @@ -77,58 +77,58 @@ function drawGraphInner({nodes, links}){ .enter() .append('path') .attr('d', function (d) { - let start = x(d.source) - // X position of start node on the X axis - let end = x(d.target) - // 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(' '); + let start = x(d.source) + // X position of start node on the X axis + let end = x(d.target) + // 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(links) .enter() .append("text") - .attr("x", function(d){ - let start = x(d.source) - // X position of start node on the X axis - let end = x(d.target) - // X position of end node - return start + (end-start)/2 //-4*getlength(d.distance) + .attr("x", function (d) { + let start = x(d.source) + // X position of start node on the X axis + let end = x(d.target) + // X position of end node + return start + (end - start) / 2 //-4*getlength(d.distance) }) - .attr("y", function(d){ - let start = x(d.source) - // X position of start node on the X axis - let end = x(d.target) - // X position of end node - return height-32-(Math.abs(start-end)/2)//height-30 + .attr("y", function (d) { + let start = x(d.source) + // X position of start node on the X axis + let end = x(d.target) + // X position of end node + return height - 32 - (Math.abs(start - end) / 2)//height-30 }) - .text(function(d){ + .text(function (d) { return Number(d.distance) - return(truncateValueForDisplay(Number(d.distance))) + return (truncateValueForDisplay(Number(d.distance))) //return(Number(d.distance).toPrecision(2).toString()) }) .style("text-anchor", "middle") } -export function DrawGraph({isListOrdered, orderedList, listOfElements, links}) { - if(isListOrdered){ +export function DrawGraph({ isListOrdered, orderedList, listOfElements, links }) { + if (isListOrdered) { let nodes = orderedList.map(i => listOfElements[i]) - drawGraphInner({ nodes, links}); + drawGraphInner({ nodes, links }); } return (
diff --git a/lib/utils.js b/lib/utils.js index 280c75a..d9059b8 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -20,12 +20,12 @@ export const _transformSliderValueToPracticalValue = value => truncateValueForDi export function numToAlphabeticalString(num){ // https://stackoverflow.com/questions/45787459/convert-number-to-alphabet-string-javascript/45787487 + num=num+1 var s = '', t; - while (num > 0) { t = (num - 1) % 26; s = String.fromCharCode(65 + t) + s; num = (num - t)/26 | 0; } - return s || undefined; + return `#${s}` || undefined; } diff --git a/pages/index.js b/pages/index.js index 00351ef..16e28bb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -221,9 +221,9 @@ export default function Home({ listOfElementsDefault }) { } let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => { - if (sliderValue < 1) { - // sliderValue = -sliderValue; - // [element1, element2] = [element2, element1] + if (sliderValue < 1 && sliderValue > 0) { + sliderValue = 1/sliderValue; + [element1, element2] = [element2, element1] } console.log(`posList@nextStepSlider:`) console.log(posList)