Website | Gallery: Donut Example #38

[lee00678]

Add a gallery example which showcases the use of a basic donut chart. (issue)

• Create a folder in shared/examples directory called basic-donut-chart with all the relevant files
• Find dataset and create example in basic-donut-chart.tsx

Add code for other frameworks:

• TypeScript
• Angular
• Svelte
• Vue

And then add screenshots to _shared/previews:

• basic-donut-chart.png
• basic-donut-chart-dark.png

[rokotyan]

Great job @lee00678!

I'm a little concerned about the visual aspects of the new example because it's inconsistent with other examples and our Unovis brand. Specifically, the colors and the capitalized text in the legend.

@Dovlash Vlad, can you please take a look and give us your comments. Here's the Gallery section on our website if you need a link: https://unovis.dev/gallery. (Vlad is leading our data visualization design activities at F5)

[rokotyan]

@reb-dev It might be a good time to enforce the Commit Lint formats: #300

[lee00678]

Great job @lee00678!

I'm a little concerned about the visual aspects of the new example because it's inconsistent with other examples and our Unovis brand. Specifically, the colors and the capitalized text in the legend.

I'm happy to make any changes! Also nice to "meet" both of you @rokotyan and @Dovlash. Yes, I used D3's color theme as I ran out of the default colors for donut chart. I can probably look into how to get unovis' color theme rendered, and I will update the legend as well.

[rokotyan]

Nice to meet you too @lee00678!

I see, I think instead of showing so many slices, we can merge smaller ones into a big "Others" one.
Here are two great posts about Pie Charts and Colors in data vis:

• What to consider when creating pie charts
• 10 ways to use fewer colors in your data visualizations

[lee00678]

I see, I think instead of showing so many slices, we can merge smaller ones into a big "Others" one. Here are two great posts about Pie Charts and Colors in data vis:

• What to consider when creating pie charts
• 10 ways to use fewer colors in your data visualizations

I like the idea of combining the smaller categories. Made an update on that.

[rokotyan]

Nice, thanks for the update!

[rokotyan]

@lee00678 Btw, if you use Discord, we've a space there which we're planning to make public soon. Feel free to join: https://discord.gg/zATXusWgCP

[reb-dev]

Looks good @lee00678! I left one comment, I think you'll need to rebase on main to address it

[reb-dev]

Instead of making a new category, I would add it as the first entry to "Circular Charts"

[github-actions]

CLA Assistant Lite bot ✅ All required contributors have signed the F5 CLA for this PR. Thank you!

[lee00678]

CLA Assistant Lite bot: 🎉 Thank you for your contribution. It appears you have not yet signed the F5 Contributor License Agreement (CLA), which is required for your changes to be incorporated into an F5 project. Please kindly read the F5 CLA and comment the following to agree:

I have hereby read the F5 CLA and agree to its terms

Qian Liu seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.You can retrigger this bot by commenting recheck in this Pull Request

Agree

[reb-dev]

Thanks @lee00678! Merging.