From 3f5a9fbe04ddf6d5410d95ae90da221173b6bdc6 Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Mon, 7 Jun 2021 13:16:28 +0200 Subject: [PATCH] Add post shell --- lib/displayElement.js | 12 +++ lib/labeledgraph.js | 236 ++++++++++++++++++++--------------------- package-lock.json | 58 ++++++++++ package.json | 2 + pages/index.js | 39 +++++-- pages/listOfPosts.json | 52 +++++++++ 6 files changed, 273 insertions(+), 126 deletions(-) create mode 100644 lib/displayElement.js create mode 100644 pages/listOfPosts.json diff --git a/lib/displayElement.js b/lib/displayElement.js new file mode 100644 index 0000000..af438f6 --- /dev/null +++ b/lib/displayElement.js @@ -0,0 +1,12 @@ +import React from "react"; + +export function DisplayElement({element}){ + return( +
+ +

{`${element.name}`}

+

{`Karma: ${1}`}

+ +
+ ) +} \ No newline at end of file diff --git a/lib/labeledgraph.js b/lib/labeledgraph.js index c0e0bbc..e58a1dc 100644 --- a/lib/labeledgraph.js +++ b/lib/labeledgraph.js @@ -6,133 +6,131 @@ function getlength(number) { } 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) + + // 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 + 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(' '); }) - console.log(data) + .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") - // 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); diff --git a/package-lock.json b/package-lock.json index 77596b0..d174689 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "version": "0.2.0", "dependencies": { "d3": "^6.7.0", + "fs": "^0.0.1-security", "next": "latest", + "path": "^0.12.7", "react": "^17.0.1", "react-compound-slider": "^3.3.1", "react-dom": "^17.0.1" @@ -1496,6 +1498,11 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/fs": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", + "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=" + }, "node_modules/fs-extra": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", @@ -2743,6 +2750,15 @@ "node": ">=0.10.0" } }, + "node_modules/path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=", + "dependencies": { + "process": "^0.11.1", + "util": "^0.10.3" + } + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -2771,6 +2787,19 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, + "node_modules/path/node_modules/inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "node_modules/path/node_modules/util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dependencies": { + "inherits": "2.0.3" + } + }, "node_modules/pbkdf2": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz", @@ -5117,6 +5146,11 @@ "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==", "dev": true }, + "fs": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", + "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=" + }, "fs-extra": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", @@ -6065,6 +6099,30 @@ } } }, + "path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=", + "requires": { + "process": "^0.11.1", + "util": "^0.10.3" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "requires": { + "inherits": "2.0.3" + } + } + } + }, "path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", diff --git a/package.json b/package.json index af27353..8650358 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ }, "dependencies": { "d3": "^6.7.0", + "fs": "^0.0.1-security", "next": "latest", + "path": "^0.12.7", "react": "^17.0.1", "react-compound-slider": "^3.3.1", "react-dom": "^17.0.1" diff --git a/pages/index.js b/pages/index.js index 008e023..314dbf0 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,9 +1,14 @@ import Head from 'next/head' import React, { useState } from "react"; +import fs from 'fs'; +import path from 'path'; import {DrawGraph} from '../lib/labeledgraph'; import { SliderElement } from "../lib/slider.js"; - +import {DisplayElement} from '../lib/displayElement' // Utilities + +let increasingList = (n) => Array.from(Array(n).keys()) + Array.prototype.containsArray = function(val) { var hash = {}; for(var i=0; i { }; +// data +export async function getStaticProps() { + //getServerSideProps + // const { metaforecasts } = await getForecasts(); + const directory = path.join(process.cwd(),"pages") + let listOfPosts = JSON.parse(fs.readFileSync(path.join(directory, 'listOfPosts.json'), 'utf8')); + console.log(directory) + //console.log("metaforecasts", metaforecasts) + return { + props: { + listOfPosts, + }, + }; +} + // Main -export default function Home() { +export default function Home({listOfPosts}) { // State - let list = [1,2,3,4,5,6,7,8,9,10] - // let initialComparisonPair = [9,10] + let list = increasingList(listOfPosts.length)//[1,2,3,4,5,6,7,8,9,10] + const [toComparePair, setToComparePair] = useState([list[list.length-2], list[list.length-1]]) const [binaryComparisons, setBinaryComparisons] = useState([]) @@ -49,7 +69,6 @@ export default function Home() { const [isListOrdered, setIsListOrdered] = useState(false) const [orderedList, setOrderedList] = useState([]) - // Manipulations let compareTwoElements = (newBinaryComparisons, element1, element2) => { let element1Greater = newBinaryComparisons.containsArray([element1, element2]) @@ -162,13 +181,19 @@ export default function Home() { className="flex m-auto border-gray-300 border-4 h-64 w-64" //onClick={() => nextStep(binaryComparisons, toComparePair[0], toComparePair[1])} > -

{toComparePair[0]}

+

+ + +

nextStep(binaryComparisons, toComparePair[1], toComparePair[0])} > -

{toComparePair[1]}

+

+ + +

diff --git a/pages/listOfPosts.json b/pages/listOfPosts.json new file mode 100644 index 0000000..451fb37 --- /dev/null +++ b/pages/listOfPosts.json @@ -0,0 +1,52 @@ +[ + { + "id": "0", + "name": "Relative Impact of the First 10 EA Forum Prize Winners", + "url": "https://forum.effectivealtruism.org/posts/pqphZhx2nJocGCpwc/relative-impact-of-the-first-10-ea-forum-prize-winners" + }, + { + "id": "1", + "name": "Introducing Metaforecast: A Forecast Aggregator and Search Tool", + "url": "https://forum.effectivealtruism.org/posts/tEo5oXeSNcB3sYr8m/introducing-metaforecast-a-forecast-aggregator-and-search" + }, + { + "id": "2", + "name": "Forecasting Prize Results", + "url": "https://forum.effectivealtruism.org/posts/8QFWHzmur4roAcnCf/forecasting-prize-results" + }, + { + "id": "3", + "name": "A Funnel for Cause Candidates", + "url": "https://forum.effectivealtruism.org/posts/iRA4Dd2bfX9nukSo3/a-funnel-for-cause-candidates" + }, + { + "id": "4", + "name": "2020: Forecasting in Review", + "url": "https://forum.effectivealtruism.org/posts/8shCj2eoQygQvtoZP/2020-forecasting-in-review" + }, + { + "id": "5", + "name": "Big List of Cause Candidates", + "url": "https://forum.effectivealtruism.org/posts/SCqRu6shoa8ySvRAa/big-list-of-cause-candidates" + }, + { + "id": "6", + "name": "An experiment to evaluate the value of one researcher's work", + "url": "https://forum.effectivealtruism.org/posts/udGBF8YWshCKwRKTp/an-experiment-to-evaluate-the-value-of-one-researcher-s-work" + }, + { + "id": "7", + "name": "Predicting the Value of Small Altruistic Projects: A Proof of Concept Experiment", + "url": "https://forum.effectivealtruism.org/posts/qb56nicbnj9asSemx/predicting-the-value-of-small-altruistic-projects-a-proof-of" + }, + { + "id": "8", + "name": "Incentive Problems With Current Forecasting Competitions", + "url": "https://forum.effectivealtruism.org/posts/ztmBA8v6KvGChxw92/incentive-problems-with-current-forecasting-competitions" + }, + { + "id": "9", + "name": "Shapley Values: Better Than Counterfactuals", + "url": "https://forum.effectivealtruism.org/posts/XHZJ9i7QBtAJZ6byW/shapley-values-better-than-counterfactuals" + } +]