quantified.uncertainty/hierarchical-estimates-visualizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: align graph

Browse Source
This commit is contained in:
NunoSempere 2022-02-08 17:44:59 -05:00
parent b52ddbcfdf
commit c8cd6d8ce1
3 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
lib/.comparisonView.js.swp Normal file
View File

Binary file not shown.

12
lib/comparisonView.js
View File

@ -319,9 +319,15 @@ export default function ComparisonView({ listOfElementsForView }) {
}) => { }) => {
if (!dontPushSubmitButtonAnyMore) { if (!dontPushSubmitButtonAnyMore) {
if (inputValue < 1 && inputValue > 0) { if (inputValue < 1 && inputValue > 0) {
inputValue = 1 / inputValue; let inverse = 1 / inputValue;
if (squiggleString == inputValue) {
inputValue = inverse;
squiggleString = inverse;
} else {
inputValue = inverse;
squiggleString = `(${squiggleString})^(-1)`;
}
[element1, element2] = [element2, element1]; [element1, element2] = [element2, element1];
squiggleString = `(${squiggleString})^(-1)`;
} }
console.log(`posList@nextStepInput:`); console.log(`posList@nextStepInput:`);
console.log(posList); console.log(posList);
@ -470,7 +476,7 @@ export default function ComparisonView({ listOfElementsForView }) {
{/* Results section */} {/* Results section */}
<div className={isListOrdered ? "" : "hidden"}> <div className={isListOrdered ? "" : "hidden"}>
{/* Graph */} {/* Graph */}
<div className="flex items-center text-center "> <div className="flex items-center text-center">
<DrawGraph <DrawGraph
isListOrdered={isListOrdered} isListOrdered={isListOrdered}
orderedList={orderedList} orderedList={orderedList}

13
lib/labeledGraph.js
View File

@ -7,7 +7,7 @@ import {
formatLargeOrSmall, formatLargeOrSmall,
} from "./utils.js"; } from "./utils.js";
const displayWidthPercentage = 0.7; // 0.85; // 0.7 const displayWidthPercentage = 0.85; // 0.85; // 0.7
let getlength = (number) => number.toString().length; let getlength = (number) => number.toString().length;
@ -48,7 +48,7 @@ function drawGraphInner({ nodes, links }) {
// Build the d3 graph // Build the d3 graph
removeOldSvg(); removeOldSvg();
var svg = d3 let svg = d3
.select("#graph") .select("#graph")
.append("svg") .append("svg")
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
@ -147,6 +147,7 @@ function drawGraphInner({ nodes, links }) {
}) })
.text(function (d) { .text(function (d) {
let distanceFormatted = formatLargeOrSmall(Number(d.distance)); let distanceFormatted = formatLargeOrSmall(Number(d.distance));
return distanceFormatted;
if (d.distance == d.squiggleString || !d.squiggleString) { if (d.distance == d.squiggleString || !d.squiggleString) {
return distanceFormatted; return distanceFormatted;
} else { } else {
@ -158,6 +159,7 @@ function drawGraphInner({ nodes, links }) {
//return(Number(d.distance).toPrecision(2).toString()) //return(Number(d.distance).toPrecision(2).toString())
}) })
.style("text-anchor", "middle"); .style("text-anchor", "middle");
// background
} }
export function DrawGraph({ export function DrawGraph({
@ -174,8 +176,11 @@ export function DrawGraph({
drawGraphInner({ nodes, links }); drawGraphInner({ nodes, links });
} }
return ( return (
<div> <div className="flex w-full items-center ">
<div id="graph"></div> <div
id="graph"
className="mx-auto flex justify-center w-full bg-red"
></div>
</div> </div>
); );
} }