Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demo/infographic sr #170

Merged
merged 4 commits into from
Dec 17, 2024
Merged

Demo/infographic sr #170

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
941ec9d
docs: add source-of-new-contacts-area-chart demo
Rui-Sun Dec 17, 2024
940fa7d
docs: add marketing-wordclouds demo
Rui-Sun Dec 17, 2024
d66a103
docs: add infographic demos
Rui-Sun Dec 17, 2024
35a7d4c
Merge remote-tracking branch 'origin/develop' into demo/infographic-sr
Rui-Sun Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
370 changes: 370 additions & 0 deletions docs/assets/examples/en/infographic/marking-wordcloud.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,370 @@
---
category: examples
group: infographic
title: Marketing Wordcloud
keywords: templates, visualization, wordcloud
order: 1-0
cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/wordcloud-marketing.png
---

# Wordcloud Infographic

## Code Demo

```javascript livedemo template=vstory
VStory.registerAll();
const chartPath =
'M948.6 627c1.2-2 2.6-4 3.8-5.8 8-12.4 15.2-25.4 21.4-39 6.2-13.6 11.4-27.4 15.6-41.8 4.2-14.4 7.4-28.8 9.6-43.6 2.2-14.8 3.2-29.6 3.2-44.6 0.6-172.6-140.2-312.6-314.2-312.6-151.8 0-278.4 106.8-308.2 248.8-4.4 21-6.8 42.4-6.8 64 0 172.8 135.4 316.6 309.4 316.6 27.6 0 65-8.6 85.4-14.4 20.4-5.8 40.8-13.4 46-15.6 5.2-2 13.4-4.2 20-2.2l130 39c1.2 0.4 2.4 0.4 3.6 0 1.2-0.4 2.2-0.8 3-1.8 0.8-0.8 1.4-2 1.8-3.2 0.4-1.2 0.4-2.4 0-3.6L942.6 650c-2-8.8-2.4-10.4 6-23zM721 806c-13 2.2-26 3.4-39 3.6-71.2 0-138.6-19.4-193.2-56-17.4-11-33.8-23.8-48.8-38.2-15-14.4-28.6-30.2-40.4-47.4-43.8-60-67.8-136.4-67.8-216.4 0-5.4 0.2-10.6 0.4-16 0-0.8 0-1.6-0.2-2.2-0.2-0.8-0.4-1.4-0.8-2.2-0.4-0.6-0.8-1.2-1.4-1.8l-1.8-1.2c-0.6-0.2-1.4-0.4-2.2-0.6-0.8 0-1.4 0-2.2 0.2-0.8 0.2-1.4 0.4-2 0.8-0.6 0.4-1.2 0.8-1.8 1.4-2.4 2.8-5 5.6-7.4 8.6-2.4 3-4.6 5.8-7 9-2.2 3-4.4 6-6.6 9.2-2.2 3.2-4.2 6.2-6.2 9.4s-4 6.4-5.8 9.8c-1.8 3.2-3.6 6.6-5.4 10-1.8 3.4-3.4 6.8-5 10.2-1.6 3.4-3.2 7-4.6 10.4-1.4 3.6-2.8 7-4.2 10.6-1.4 3.6-2.6 7.2-3.8 10.8-1.2 3.6-2.2 7.2-3.4 11-1 3.6-2 7.4-2.8 11-0.8 3.8-1.6 7.4-2.4 11.2-0.8 3.8-1.4 7.6-2 11.2-0.6 3.8-1 7.6-1.6 11.4-0.4 3.8-0.8 7.6-1 11.4l-0.6 11.4c-0.2 3.8-0.2 7.6-0.2 11.4 0 3.8 0.2 7.6 0.4 11.4 0.2 3.8 0.4 7.6 0.8 11.4l1.2 11.4c0.4 3.8 1 7.6 1.6 11.4 0.6 3.8 1.4 7.6 2.2 11.2 0.8 3.8 1.6 7.4 2.6 11.2 1 3.6 2 7.4 3 11 1 3.6 2.2 7.2 3.4 10.8 1.2 3.6 2.6 7.2 4 10.8 1.4 3.6 2.8 7 4.4 10.6 1.6 3.4 3 7 4.8 10.4 1.6 3.4 3.4 6.8 5.2 10.2 1.8 3.4 3.6 6.6 5.6 10l6 9.6c4.2 6.6 6.6 11.6 5.8 15L277.2 910c0 0.2 0 0.6-0.2 0.8v1c0 0.4 0 0.6 0.2 0.8 0 0.2 0.2 0.6 0.2 0.8 0 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.6 0.8l0.6 0.6 0.6 0.6c0.2 0.2 0.4 0.4 0.8 0.4 0.2 0.2 0.6 0.2 0.8 0.4 0.2 0 0.6 0.2 0.8 0.2 0.2 0 0.6 0 0.8 0.2h0.8c0.2 0 0.6 0 0.8-0.2 0.2 0 0.6-0.2 0.8-0.2l114.2-42.2c3.4-1.4 7.2-2.2 10.8-2 3.8 0 7.4 0.8 10.8 2.4 34.2 14 72 22.4 109.8 22.4 9 0 18-0.4 27-1.2 9-0.8 17.8-2.2 26.6-3.8 8.8-1.8 17.6-3.8 26.2-6.4 8.6-2.6 17.2-5.6 25.6-9a274.252 274.252 0 0 0 48-25.2c7.6-5 15-10.4 22-16 7.2-5.8 14-11.8 20.4-18.2 0.6-0.6 1-1.2 1.4-1.8 0.4-0.8 0.6-1.4 0.8-2.2 0.2-0.8 0.2-1.6 0-2.4-0.2-0.8-0.4-1.6-0.6-2.2-0.4-0.8-0.8-1.4-1.4-2-0.6-0.6-1.2-1-1.8-1.4-0.6-0.4-1.4-0.6-2.2-0.8-0.8 0.2-1.4 0.2-2.2 0.2z';

const dsl = {
acts: [
{
id: 'defaultAct',
scenes: [
{
id: 'defaultScene',
actions: [
{
characterId: [
'background-1',
'background-2',
'title',
'chart',
'list-1-icon',
'list-1-text',
'list-2-icon',
'list-2-text',
'list-3-icon',
'list-3-text',
'list-4-icon',
'list-4-text'
],
characterActions: [
{
action: 'appear'
}
]
}
]
}
]
}
],
characters: [
{
id: 'background-1',
type: 'Rect',
zIndex: 0,
position: {
x: -150,
y: 610,
width: 400,
height: 400,

angle: Math.PI / 4 - 0.2
},
options: {
graphic: {
fill: 'rgb(242,242,242)'
}
}
},
{
id: 'background-2',
type: 'Rect',
zIndex: 0,
position: {
x: -150,
y: 600,
width: 300,
height: 300,
angle: Math.PI / 4
},
options: {
graphic: {
fill: 'rgb(217,217,217)'
}
}
},
{
id: 'title',
type: 'Text',
zIndex: 0,
position: {
x: 420,
y: 50,
width: 600,
height: 200
},
options: {
graphic: {
text: 'Marketing Wordcloud',
textAlign: 'left',
fontSize: 40,
fontWeight: 'bold',
fill: '#000'
}
}
},
{
id: 'chart',
type: 'VChart',
zIndex: 0,
position: {
x: 120,
y: 140,
width: 600,
height: 450
},
options: {
spec: {
type: 'wordCloud',
maskShape:
'<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1084"><path d="M39.68 467.382857C39.68 248.502857 251.117714 71.04 512 71.04c260.845714 0 472.32 177.444571 472.32 396.306286 0 218.898286-211.474286 396.361143-472.32 396.361143-28.324571 0-56.009143-2.102857-82.962286-6.089143l-0.164571-0.036572c-63.798857-15.213714-90.806857 55.734857-236.196572 92.525715-29.860571 7.570286-33.462857 0.036571-10.587428-24.228572 41.398857-43.812571 81.298286-115.236571 39.826286-145.773714-1.28-0.731429-17.261714-11.776-23.350858-16.237714-97.462857-72.594286-158.884571-178.596571-158.884571-296.521143z" p-id="1085"></path></svg>',
nameField: 'name',
valueField: 'value',
seriesField: 'name',
seriesStyle: [
{
name: 'MARKETING',
word: {
style: {
fill: 'rgb(51,133,105)'
}
}
}
],
colorList: ['#000'],
wordCloudShapeConfig: {
fillingColorList: ['#000']
},
data: [
{
name: 'data',
values: [
{ name: 'MARKETING', value: 1000 },
{ name: 'SALES', value: 500 },
{ name: 'INTERNET', value: 500 },
{ name: 'ACCOUNT', value: 500 },
{ name: 'DEVELOP', value: 200 },
{ name: 'ORGANIZATION', value: 200 },
{ name: 'CUSTOMERS', value: 200 },
{ name: 'BUDGET', value: 200 },
{ name: 'RESEARCH', value: 100 },
{ name: 'SOCIAL', value: 10 },
{ name: 'AGGRESSIVE', value: 10 },
{ name: 'PLANNING', value: 10 },
{ name: 'MEDIA', value: 10 },
{ name: 'TARGET', value: 10 },
{ name: 'ADVANCE', value: 10 },
{ name: 'INNOVATE', value: 10 },
{ name: 'IDEA', value: 10 },
{ name: 'TEAM', value: 10 },
{ name: 'PROMOTION', value: 10 },
{ name: 'ACCOMPLISHMENT', value: 10 },
{ name: 'BELIEF', value: 10 },
{ name: 'NEWS', value: 10 },
{ name: 'SUCCESS', value: 10 },
{ name: 'GROWING', value: 10 },
{ name: 'SEGMENT', value: 10 },
{ name: 'DIVISION', value: 10 },
{ name: 'STRATEGY', value: 10 },
{ name: 'REFRESH', value: 10 },
{ name: 'DESIGN', value: 10 },
{ name: 'CONTEST', value: 10 },
{ name: 'ARCHITECTURE', value: 10 },
{ name: 'CREATIVE', value: 10 },
{ name: 'COMPANY', value: 10 },
{ name: 'INQUIRY', value: 10 },
{ name: 'DESTINATION', value: 10 },
{ name: 'MATCH', value: 10 },
{ name: 'ADMIT', value: 10 },
{ name: 'AMOUNT', value: 10 },
{ name: 'FORWARD', value: 10 },
{ name: 'ACCEPT', value: 10 },
{ name: 'COOL', value: 10 },
{ name: 'VIRAL', value: 10 },
{ name: 'MASS', value: 10 },
{ name: 'CONSTRUCTION', value: 10 },
{ name: 'INNOVATION', value: 10 }
]
}
],
color: {
type: 'ordinal',
// domain: ['a', 'b'],
// range: ['#000', '#000'],
specified: {
MARKETING: 'green',
d: 'red'
}
}
}
}
},
{
id: 'list-1-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 155,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-1-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 163,
width: 450,
height: 200
},
options: {
graphic: {
text: 'MARKETING strategies require continuous INNOVATION and CREATIVE approaches to effectively engage CUSTOMERS.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
},
{
id: 'list-2-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 255,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-2-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 260,
width: 450,
height: 200
},
options: {
graphic: {
text: 'Successful SALES not only depend on the BUDGET but also on thorough RESEARCH and market INQUIRY.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
},
{
id: 'list-3-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 355,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-3-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 360,
width: 450,
height: 200
},
options: {
graphic: {
text: 'In the INTERNET age, SOCIAL media plays a crucial role in PROMOTION and reaching the TARGET audience.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
},
{
id: 'list-4-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 455,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-4-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 460,
width: 450,
height: 200
},
options: {
graphic: {
text: 'A strong ORGANIZATION focuses on PLANNING and DEVELOP to achieve SUCCESS and ACCOMPLISHMENT in their goals.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
}
]
};
const story = new VStory.Story(dsl, {
dom: CONTAINER_ID,
width: 1280, height: 720
});
const player = new VStory.Player(story);
story.init(player);

player.play(-1);

window['story'] = story;
window['vstory'] = story;
```
Loading
Loading