Skip to content

Commit

Permalink
docs: add scene 2 to simple unit viz
Browse files Browse the repository at this point in the history
  • Loading branch information
@mengxi-ream
mengxi-ream committed Jul 21, 2024
1 parent 4df8c87 commit bfe94d9
Showing 1 changed file with 78 additions and 29 deletions.
107 changes: 78 additions & 29 deletions packages/vstory/demo/src/demos/infographics/UnitVizSimple.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const suicidePortionData: UnitNode[] = [
},
{
category: 'not-suicide',
count: 100
count: 800
}
];

Expand All @@ -34,7 +34,7 @@ const manInSuicideData: UnitNode[] = [
},
{
category: 'not-suicide',
count: 100
count: 800
}
];

Expand All @@ -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';
Expand All @@ -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;
Expand All @@ -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),
Expand All @@ -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'
}
Expand All @@ -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);
}
}
}
Expand All @@ -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);
Expand All @@ -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';
Expand Down Expand Up @@ -211,7 +219,7 @@ export const UnitVizSimple = () => {
},
{
type: 'RichTextComponent',
id: 'title_1',
id: 'title-1',
zIndex: 3,
position: {
top: titleHeight / 2,
Expand Down Expand Up @@ -246,7 +254,7 @@ export const UnitVizSimple = () => {
},
{
type: 'RichTextComponent',
id: 'title_2',
id: 'title-2',
zIndex: 3,
position: {
top: titleHeight / 2,
Expand All @@ -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',
Expand All @@ -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'
}
Expand All @@ -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
]
}
]
}
Expand Down

0 comments on commit bfe94d9

Please sign in to comment.