Bubble chart

[SachaG]

See: http://risingstars_demo.frankxu.me/ by @frankyxhl

Feedback/Questions:

• We need to restrict it to the list of projects that are actually featured in the Rising Stars page.
• Can we incorporate the project icons somehow? If so can we detect their colors?
• Will the diagram be responsive? Will it work on mobile?
• How heavy will it be? Do we need to load D3 or can we just use a static export?
• How do we pick colors?

[frankyxhl]

We need to restrict it to the list of projects that are actually featured in the Rising Stars page.

I used projects.json data in the project. Only the projects contains in follow tag list will be list? ['build', 'compiler', 'css-in-js', 'framework', 'graphql', 'ide', 'mobile', 'nodejs-framework', 'react', 'ssg', 'test-framework', 'vue']

[frankyxhl]

Can we incorporate the project icons somehow? If so can we detect their colors?

@michaelrambeau Can we get all icons in data?

Problem solved. Thanks, Michael.

[frankyxhl]

How do we pick colors?

According to its category? But still that question, how about more than one?

[frankyxhl]

Will the diagram be responsive? Will it work on mobile? How heavy will it be? Do we need to load D3 or can we just use a static export?

Static SVG export will be better but can't do any interactive actions like highlight or filter. For performance purpose, we need to clean projects.json and merge all icon svg files into a sprite png.

For now, I think maybe png file is enough for current home page and let readers focus on article? We can create another page like "/chart" and do more visualize chart work later if readers are interested.

[frankyxhl]

For a better performance, we are using png file right now. Will improve later if readers like this.

The code is here: https://github.com/frankyxhl/risingstars_deathstar