From 804e6f20d7b026b38362656346584b0a2b2e48a3 Mon Sep 17 00:00:00 2001 From: RoxaneBurri Date: Tue, 14 Mar 2023 17:20:22 +0100 Subject: [PATCH] feat: number of iterations --- src/App.tsx | 105 +++++++++++++++++++++++++++++++++++++++++++++- src/utils.test.ts | 23 +++++++++- src/utils.ts | 28 +++++++++---- 3 files changed, 144 insertions(+), 12 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ede5d48..0f2d63b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,6 @@ import "./App.css"; import { futurPosition, getBoundingRect, - getTheCircle, placeWordOnOuterCircle, Word, } from "./utils"; @@ -38,6 +37,109 @@ const defaultWords: Word[] = [ { id: "word-15", text: "girl", coef: 0.88 }, ]; +// const defaultWords: Word[] = [ +// { id: "word-1", text: "group", coef: 0.99 }, +// { id: "word-2", text: "people", coef: 0.99 }, +// { id: "word-4", text: "adult", coef: 0.98 }, +// { id: "word-3", text: "man", coef: 0.97 }, +// { id: "word-5", text: "woman", coef: 0.96 }, +// { id: "word-6", text: "room", coef: 0.95 }, +// { id: "word-7", text: "indoors", coef: 0.94 }, +// { id: "word-8", text: "group together", coef: 0.92 }, +// { id: "word-9", text: "facial expression", coef: 0.92 }, +// { id: "word-10", text: "wear", coef: 0.92 }, +// { id: "word-11", text: "meeting", coef: 0.89 }, +// { id: "word-12", text: "several", coef: 0.86 }, +// { id: "word-13", text: "exhibition", coef: 0.85 }, +// { id: "word-14", text: "education", coef: 0.84 }, +// { id: "word-15", text: "religion", coef: 0.83 }, +// { id: "word-16", text: "award", coef: 0.82 }, +// { id: "word-17", text: "portrait", coef: 0.8 }, +// { id: "word-18", text: "happiness", coef: 0.8 }, +// { id: "word-19", text: "school", coef: 0.8 }, +// { id: "word-20", text: "league", coef: 0.79 }, +// { id: "word-21", text: "five", coef: 0.79 }, +// { id: "word-22", text: "celebration", coef: 0.79 }, +// { id: "word-23", text: "four", coef: 0.78 }, +// { id: "word-24", text: "business", coef: 0.78 }, +// { id: "word-25", text: "furniture", coef: 0.77 }, +// { id: "word-26", text: "leader", coef: 0.77 }, +// { id: "word-27", text: "festival", coef: 0.77 }, +// { id: "word-28", text: "commerce", coef: 0.76 }, +// { id: "word-29", text: "many", coef: 0.75 }, +// { id: "word-30", text: "outfit", coef: 0.74 }, +// { id: "word-31", text: "chair", coef: 0.74 }, +// { id: "word-32", text: "girl", coef: 0.73 }, +// { id: "word-34", text: "administration", coef: 0.73 }, +// { id: "word-33", text: "boy", coef: 0.72 }, +// { id: "word-35", text: "wedding", coef: 0.71 }, +// { id: "word-36", text: "child", coef: 0.71 }, +// { id: "word-37", text: "daylight", coef: 0.71 }, +// { id: "word-38", text: "music", coef: 0.71 }, +// { id: "word-39", text: "container", coef: 0.71 }, +// { id: "word-40", text: "employee", coef: 0.71 }, +// { id: "word-41", text: "three", coef: 0.7 }, +// { id: "word-42", text: "family", coef: 0.7 }, +// { id: "word-44", text: "office", coef: 0.7 }, +// { id: "word-43", text: "cooperation", coef: 0.69 }, +// { id: "word-45", text: "museum", coef: 0.68 }, +// { id: "word-46", text: "travel", coef: 0.68 }, +// { id: "word-47", text: "singer", coef: 0.66 }, +// { id: "word-48", text: "performance", coef: 0.65 }, +// { id: "word-49", text: "vehicle", coef: 0.65 }, +// { id: "word-50", text: "event", coef: 0.64 }, +// { id: "word-51", text: "ceremony", coef: 0.63 }, +// { id: "word-52", text: "musician", coef: 0.63 }, +// { id: "word-54", text: "enjoyment", coef: 0.63 }, +// { id: "word-53", text: "recreation", coef: 0.61 }, +// { id: "word-55", text: "prosperity", coef: 0.61 }, +// { id: "word-56", text: "landscape", coef: 0.61 }, +// { id: "word-57", text: "teamwork", coef: 0.6 }, +// { id: "word-58", text: "gown", coef: 0.59 }, +// { id: "word-59", text: "city", coef: 0.59 }, +// { id: "word-60", text: "university", coef: 0.59 }, +// { id: "word-61", text: "table", coef: 0.58 }, +// { id: "word-62", text: "soccer", coef: 0.57 }, +// { id: "word-64", text: "home", coef: 0.57 }, +// { id: "word-63", text: "hotel", coef: 0.56 }, +// { id: "word-65", text: "movie", coef: 0.55 }, +// { id: "word-66", text: "food", coef: 0.55 }, +// { id: "word-67", text: "band", coef: 0.54 }, +// { id: "word-68", text: "aircraft", coef: 0.54 }, +// { id: "word-69", text: "presentation", coef: 0.53 }, +// { id: "word-70", text: "military", coef: 0.53 }, +// { id: "word-71", text: "parliament", coef: 0.52 }, +// { id: "word-72", text: "queue", coef: 0.52 }, +// { id: "word-74", text: "competition", coef: 0.51 }, +// { id: "word-73", text: "guest", coef: 0.51 }, +// { id: "word-75", text: "graduation", coef: 0.5 }, +// { id: "word-76", text: "crowd", coef: 0.5 }, +// { id: "word-77", text: "actor", coef: 0.5 }, +// { id: "word-78", text: "politician", coef: 0.49 }, +// { id: "word-79", text: "planning", coef: 0.49 }, +// { id: "word-80", text: "airport", coef: 0.49 }, +// { id: "word-81", text: "adolescent", coef: 0.49 }, +// { id: "word-82", text: "tie", coef: 0.49 }, +// { id: "word-84", text: "uniform", coef: 0.48 }, +// { id: "word-83", text: "interaction", coef: 0.48 }, +// { id: "word-85", text: "authority", coef: 0.48 }, +// { id: "word-86", text: "drink", coef: 0.48 }, +// { id: "word-87", text: "coffee", coef: 0.48 }, +// { id: "word-88", text: "friendship", coef: 0.47 }, +// { id: "word-89", text: "street", coef: 0.47 }, +// { id: "word-90", text: "election", coef: 0.46 }, +// { id: "word-91", text: "convention", coef: 0.46 }, +// { id: "word-92", text: "democracy", coef: 0.45 }, +// { id: "word-94", text: "gold", coef: 0.45 }, +// { id: "word-93", text: "partnership", coef: 0.45 }, +// { id: "word-95", text: "football", coef: 0.45 }, +// { id: "word-96", text: "document", coef: 0.44 }, +// { id: "word-97", text: "audience", coef: 0.44 }, +// { id: "word-98", text: "public show", coef: 0.44 }, +// { id: "word-99", text: "popularity", coef: 0.44 }, +// { id: "word-100", text: "seat", coef: 0.44 }, +// ]; + const Wordcloud = () => { const [words, setWords] = React.useState(defaultWords); @@ -67,6 +169,7 @@ const Wordcloud = () => { }, [centeredRect] ); + return wordsToPlace.map((word, idx) => ({ ...word, rect: newPositions[idx], diff --git a/src/utils.test.ts b/src/utils.test.ts index e1c3abe..02ff341 100644 --- a/src/utils.test.ts +++ b/src/utils.test.ts @@ -136,10 +136,16 @@ describe("Get distance", () => { getDistance({ x: 1, y: 1 }, { x: 1, y: 1, width: 4, height: 4 }) ).toEqual(0); }); + + it("Naive test", () => { + expect( + getDistance({ x: 10, y: 5 }, { x: 1, y: 5, width: 4, height: 4 }) + ).toEqual(9); + }); }); describe("Get the circle", () => { - it("Center of mass", () => { + it("Center of mass one word", () => { expect(getTheCircle([{ x: 1, y: 1, width: 4, height: 4 }])).toEqual({ x: 1, y: 1, @@ -147,7 +153,7 @@ describe("Get the circle", () => { }); }); - it("Center of mass", () => { + it("Center of mass multiple words", () => { expect( getTheCircle([ { x: 1, y: 1, width: 4, height: 4 }, @@ -161,4 +167,17 @@ describe("Get the circle", () => { radius: 250, }); }); + + it("Center of mass update radius", () => { + expect( + getTheCircle([ + { x: 0, y: 0, width: 4, height: 4 }, + { x: 600, y: 0, width: 4, height: 4 }, + ]) + ).toEqual({ + x: 300, + y: 0, + radius: 300, + }); + }); }); diff --git a/src/utils.ts b/src/utils.ts index 473550b..68af7a1 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,10 +1,4 @@ -import { - CENTER_X, - CENTER_Y, - CONTAINER_HEIGHT, - CONTAINER_WIDTH, - DEFAULT_RECT, -} from "./constants"; +import { CONTAINER_HEIGHT, CONTAINER_WIDTH, DEFAULT_RECT } from "./constants"; export type Word = { id: string; @@ -124,6 +118,8 @@ export const getMoveDirection = ( { x: 0, y: 0 } ); }; +// compute the median number of iteration +// let iterArray: number[] = []; export const futurPosition = ( word: Rectangle, @@ -131,6 +127,7 @@ export const futurPosition = ( step: number ): Rectangle => { let isCollision = false; + let movedWord: Rectangle = { x: word.x, y: word.y, @@ -171,12 +168,25 @@ export const futurPosition = ( } displacement = Math.abs(stepX) + Math.abs(stepY); iter++; - } while (!isCollision && displacement > 2 && iter < 600); - console.log(isCollision, displacement, iter); + } while (!isCollision && displacement > 2 && iter < 300); + // [...iterArray, iter]; + // iterArray.push(iter); + // console.log("iter", iterArray); + // console.log("median", median(iterArray)); return movedWord; }; +// export const median = (arr: number[]) => { +// arr.sort((a, b) => a - b); +// const midpoint = Math.floor(arr.length / 2); +// const median = +// arr.length % 2 === 1 +// ? arr[midpoint] +// : (arr[midpoint - 1] + arr[midpoint]) / 2; +// return median; +// }; + export const areCentersTooClose = ( centerA: Coordinate, centerB: Coordinate,