Skip to content

Website | Gallery: Scatter Plot with Varied Shape#370

Merged
lee00678 merged 1 commit into
mainfrom
qian/scatter-shape-gallery
Apr 26, 2024
Merged

Website | Gallery: Scatter Plot with Varied Shape#370
lee00678 merged 1 commit into
mainfrom
qian/scatter-shape-gallery

Conversation

@lee00678
Copy link
Copy Markdown
Collaborator

Adding an example to gallery for scatter plot with varied shape.
issue

I'm not sure if the best way to map shapes is to use an array inside data. If there are better ways, please let me know, I'm happy to change it.

@lee00678 lee00678 requested a review from reb-dev April 16, 2024 19:54
Copy link
Copy Markdown
Contributor

@rokotyan rokotyan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this new example! My only concern is the label color in the dark mode.

label={useCallback((d: DataRecord) => d.name, [])}
labelPosition={Position.Bottom}
labelHideOverlapping={true}
labelColor="grey"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The grey color looks a bit dark in the dark mode.

image

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. Updated to use the default color.

@lee00678 lee00678 force-pushed the qian/scatter-shape-gallery branch from cf972d6 to 8b7fdc1 Compare April 17, 2024 20:12
Copy link
Copy Markdown
Contributor

@reb-dev reb-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lee00678 Great example, thanks for making it! Overall looks good but I left a couple comments.

'triangle',
]

export const sumCategories = (category: string): string => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this function is necessary. I see you're using it to map category to the color/shape, but scaleOrdinal should already implement that logic for you. See my other comment below

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sumCategories also put any owner that's not in const categories into Other.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair point. I think it still works without it but this way it clearer, so let's keep it

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean we can get rid of sumCategories entirely and call getColor = (d: DataRecord): string => colorScale(d.owner) and shapeScale(d.owner) directly? I'm not sure if that would work. Because then, in the data set, if the owner isn't part of the 6 categories, (like owner: 'Inflection'), it will get mapped to a different shape and color instead of Other right? Or am I missing something?

I don't want to have inaccurate examples, so I'm happy to update if that's the case!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lee00678 Yeah so I actually just tried it myself and it does work (feel free to try it too and verify). I think under the hood the scaleOrdinal automatically bins extraneous values into the last value of the provided range.

But that doesn't mean your example is inaccurate, if anything it is more clear. So I approved this PR you can go ahead and merge if you like. Or if you want to change it, that's fine too. I'll leave it up to you :)

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review! I didn't know this feature about scaleOrdinal.

Comment thread packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot.component.html Outdated
@lee00678 lee00678 force-pushed the qian/scatter-shape-gallery branch from 8b7fdc1 to 30b1123 Compare April 24, 2024 18:19
@lee00678 lee00678 merged commit d69ad9b into main Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants