From bfe94d9c9c5d13c99c0ff814e001acf7b0f514ef Mon Sep 17 00:00:00 2001 From: Kuiliang Zhang Date: Sun, 21 Jul 2024 15:39:14 -0700 Subject: [PATCH] docs: add scene 2 to simple unit viz --- .../src/demos/infographics/UnitVizSimple.tsx | 107 +++++++++++++----- 1 file changed, 78 insertions(+), 29 deletions(-) diff --git a/packages/vstory/demo/src/demos/infographics/UnitVizSimple.tsx b/packages/vstory/demo/src/demos/infographics/UnitVizSimple.tsx index 447ccdd..850eaca 100644 --- a/packages/vstory/demo/src/demos/infographics/UnitVizSimple.tsx +++ b/packages/vstory/demo/src/demos/infographics/UnitVizSimple.tsx @@ -18,7 +18,7 @@ const suicidePortionData: UnitNode[] = [ }, { category: 'not-suicide', - count: 100 + count: 800 } ]; @@ -34,7 +34,7 @@ const manInSuicideData: UnitNode[] = [ }, { category: 'not-suicide', - count: 100 + count: 800 } ]; @@ -49,6 +49,8 @@ const vizMargin = { x: 100, y: 100 }; +const sceneDuration = 3200; +const animationDuration = 800; // the svg path is generated by: https://complexdan.com/svg-circleellipse-to-path-converter/ const circle = 'M0,32a32,32 0 1,0 64,0a32,32 0 1,0 -64,0'; @@ -62,7 +64,8 @@ function generateShapes( radius: number, gap: number, defaultColor: string, - numRows: number + numRows: number, + sceneNumber: number ) { for (let unitNode of unitData) { const children = unitNode.children; @@ -73,11 +76,11 @@ function generateShapes( const numCharacters = characters.length; const col = Math.floor(numCharacters / numRows); const row = numCharacters - col * numRows; - const id = `circle-${col}-${row}`; + const id = `scene-${sceneNumber}:circle-${col}-${row}`; characters.push({ type: 'ShapeComponent', id: id, - zIndex: 3, + zIndex: 3 + sceneNumber, position: { top: startY + row * (radius * 2 + gap), left: startX + col * (radius * 2 + gap), @@ -97,14 +100,12 @@ function generateShapes( characterId: id, characterActions: [ { - // startTime is random from 1 to 100 - startTime: Math.floor(Math.random() * 400) + 1, - // startTime: 1, //? Doesn't work when 0 - duration: 800, + startTime: Math.floor(Math.random() * animationDuration) + 1 + sceneDuration * sceneNumber, + duration: 0, action: 'appear', payload: { animation: { - duration: 400, + duration: animationDuration / 2, easing: 'linear', effect: 'fade' } @@ -114,7 +115,7 @@ function generateShapes( }); } } else { - generateShapes(children, characters, actions, startX, startY, radius, gap, color, numRows); + generateShapes(children, characters, actions, startX, startY, radius, gap, color, numRows, sceneNumber); } } } @@ -132,7 +133,7 @@ function calNumCharacters(unitData: UnitNode[]): number { return numCharacters; } -function calNumCols(numCharacters: number, w: number, h: number): number { +function calNumRows(numCharacters: number, w: number, h: number): number { const lowerBound = ((w - h) / 3 + Math.sqrt(((w - h) * (w - h)) / 9 + 4 * w * h * numCharacters)) / (2 * w); const upperBound = ((w + 2 * h) / 3 + Math.sqrt(((w + 2 * h) * (w + 2 * h)) / 9 + 4 * w * h * numCharacters)) / (2 * w); @@ -142,30 +143,37 @@ function calNumCols(numCharacters: number, w: number, h: number): number { return Math.round((lowerBound + upperBound) / 2); } -function createUnitMatrix(unitData: UnitNode[]) { +function createUnitMatrix(unitData: UnitNode[], sceneNumber: number) { const numCharacters = calNumCharacters(unitData); + console.log('numCharacters: ', numCharacters); const characters: ICharacterSpec[] = []; const actions: IActionsLink[] = []; const vizWidth = screenWidth - 2 * vizMargin.x; const vizHeight = screenHeight - titleHeight - 2 * vizMargin.y; - const numRows = calNumCols(numCharacters, vizWidth, vizHeight); + const numRows = calNumRows(numCharacters, vizWidth, vizHeight); const numCols = Math.ceil(numCharacters / numRows); + console.log('numRows: ', numRows); + console.log('numCols: ', numCols); const radius = vizWidth / (numCols * 3 - 1); + console.log('radius: ', radius); const gap = radius; const startX = vizMargin.x; const startY = titleHeight + (screenHeight - titleHeight - (numRows * 3 - 1) * radius) / 2; - generateShapes(unitData, characters, actions, startX, startY, radius, gap, 'white', numRows); + generateShapes(unitData, characters, actions, startX, startY, radius, gap, 'white', numRows, sceneNumber); return { characters, actions }; } -const manInSuicideIcon = createUnitMatrix(manInSuicideData); -const suicideIcon = createUnitMatrix(suicidePortionData); +const suicideIcon = createUnitMatrix(suicidePortionData, 0); +const manInSuicideIcon = createUnitMatrix(manInSuicideData, 1); + +console.log('suicideIcon: ', suicideIcon); +console.log('manInSuicideIcon: ', manInSuicideIcon); export const UnitVizSimple = () => { const id = 'unit-viz-simple'; @@ -211,7 +219,7 @@ export const UnitVizSimple = () => { }, { type: 'RichTextComponent', - id: 'title_1', + id: 'title-1', zIndex: 3, position: { top: titleHeight / 2, @@ -246,7 +254,7 @@ export const UnitVizSimple = () => { }, { type: 'RichTextComponent', - id: 'title_2', + id: 'title-2', zIndex: 3, position: { top: titleHeight / 2, @@ -265,28 +273,29 @@ export const UnitVizSimple = () => { fontWeight: 200, textConfig: [ { - text: 'Nearly ' + text: 'More than ' }, { - text: 'two-thirds', + text: '85 percent', fontWeight: 'bold' }, { - text: ' of gun deaths are ' + text: ' of suicide victims are' }, - { text: 'suicides', fontWeight: 'bold' } + { text: 'male', fontWeight: 'bold' } ] } } }, - ...suicideIcon.characters + ...suicideIcon.characters, + ...manInSuicideIcon.characters ], acts: [ { id: 'page1', scenes: [ { - id: 'scene1', + id: 'scene-1', actions: [ { characterId: 'background-top', @@ -309,15 +318,15 @@ export const UnitVizSimple = () => { ] }, { - characterId: 'title_1', + characterId: 'title-1', characterActions: [ { - startTime: 800, - duration: 800, + startTime: animationDuration, + duration: animationDuration, action: 'appear', payload: { animation: { - duration: 800, + duration: animationDuration, easing: 'linear', effect: 'fade' } @@ -327,6 +336,46 @@ export const UnitVizSimple = () => { }, ...suicideIcon.actions ] + }, + { + id: 'scene-2', + actions: [ + { + characterId: 'title-1', + characterActions: [ + { + startTime: sceneDuration - animationDuration, + duration: animationDuration, + action: 'disappear', + payload: { + animation: { + duration: animationDuration, + easing: 'linear', + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'title-2', + characterActions: [ + { + startTime: sceneDuration + animationDuration, + duration: animationDuration, + action: 'appear', + payload: { + animation: { + duration: animationDuration, + easing: 'linear', + effect: 'fade' + } + } + } + ] + }, + ...manInSuicideIcon.actions + ] } ] }