docs: modify histogram docs #7210
Conversation
Summary of ChangesHello @interstellarmt, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the clarity and guidance for users creating histograms within the G2 charting library. It introduces a structured approach to histogram construction, emphasizing best practices for mark types and data transformations, and updates existing examples to reflect these improvements. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request does a great job of updating the histogram documentation to use the modern chart.options API and rect mark. The changes make the examples more consistent and easier to follow.
However, I have a few concerns:
- A key example for creating density histograms has been removed from both documents. This is a significant loss of valuable content for users.
- There's a minor inconsistency in one of the new code snippets, which still uses the old API style.
- The
strokestyle has been removed from all examples, which alters the visual appearance by removing borders between bars. It would be good to clarify if this was intended.
My detailed comments provide specific suggestions for these points.
| - The choice of bin number affects the display of distribution details; more bins can show more detailed distribution patterns | ||
| - Fewer bins can highlight the main distribution trends | ||
|
|
||
| Example 3: **Probability Distribution Analysis with Density Histogram** |
There was a problem hiding this comment.
The example for 'Probability Distribution Analysis with Density Histogram' has been removed. Density histograms are an important and common chart type, and this example was valuable for users. Was this removal intentional? If not, please consider restoring it and updating it to use the new rect mark and chart.options API. Creating a density histogram typically involves a normalizeY transform after binX.
| - 分箱数量的选择会影响分布的细节展示，较多的箱数可以显示更细致的分布情况 | ||
| - 较少的箱数则可以突出主要分布趋势 | ||
|
|
||
| 例子 3: **密度直方图进行概率分布分析** |
There was a problem hiding this comment.
The example for '密度直方图进行概率分布分析' (Probability Distribution Analysis with Density Histogram) has been removed. This is a valuable example. Was this removal intentional? If not, please consider restoring it and updating it to use the new rect mark and chart.options API.
| ```javascript | ||
| .transform({ | ||
| type: 'binX', | ||
| y: 'count', // Count the number in each interval | ||
| thresholds: 20, // Optional: specify the number of bins | ||
| }) | ||
| ``` |
There was a problem hiding this comment.
The 'Basic Usage' example for the binX transform uses the old chained API style (.transform({...})). This is inconsistent with the declarative chart.options style (transform: [{...}]) used in the 'Complete Example' and throughout the rest of the updated documentation. To avoid confusion, it would be better to show this snippet in the declarative style as well.
| ```javascript | |
| .transform({ | |
| type: 'binX', | |
| y: 'count', // Count the number in each interval | |
| thresholds: 20, // Optional: specify the number of bins | |
| }) | |
| ``` | |
| // In chart.options | |
| transform: [ | |
| { | |
| type: 'binX', | |
| y: 'count', // Count the number in each interval | |
| thresholds: 20, // Optional: specify the number of bins | |
| } | |
| ] |
| style: { | ||
| fill: '#1890FF', | ||
| fillOpacity: 0.9, | ||
| stroke: '#FFF', | ||
| }); | ||
| }, |
There was a problem hiding this comment.
In this and other examples, the stroke: '#FFF' style has been removed. This removes the border between the histogram bars. While histograms technically have no gaps, a thin stroke often improves readability by clearly separating adjacent bars. Was this visual change intentional? If not, I'd suggest adding the stroke back for better visual clarity.
| style: { | |
| fill: '#1890FF', | |
| fillOpacity: 0.9, | |
| stroke: '#FFF', | |
| }); | |
| }, | |
| style: { | |
| fill: '#1890FF', | |
| fillOpacity: 0.9, | |
| stroke: '#FFF', | |
| }, |
| ```javascript | ||
| .transform({ | ||
| type: 'binX', | ||
| y: 'count', // 统计每个区间的数量 | ||
| thresholds: 20, // 可选：指定分箱数量 | ||
| }) | ||
| ``` |
There was a problem hiding this comment.
The '基本用法' (Basic Usage) example for the binX transform uses the old chained API style (.transform({...})). This is inconsistent with the declarative chart.options style (transform: [{...}]) used in the '完整示例' (Complete Example) and throughout the rest of the updated documentation. To avoid confusion, it would be better to show this snippet in the declarative style as well.
| ```javascript | |
| .transform({ | |
| type: 'binX', | |
| y: 'count', // 统计每个区间的数量 | |
| thresholds: 20, // 可选：指定分箱数量 | |
| }) | |
| ``` | |
| // 在 chart.options 中 | |
| transform: [ | |
| { | |
| type: 'binX', | |
| y: 'count', // 统计每个区间的数量 | |
| thresholds: 20, // 可选：指定分箱数量 | |
| } | |
| ] |
| style: { | ||
| fill: '#1890FF', | ||
| fillOpacity: 0.9, | ||
| stroke: '#FFF', | ||
| }); | ||
| }, |
There was a problem hiding this comment.
Similar to the English documentation, the stroke: '#FFF' style has been removed in this example. This removes the border between histogram bars. A thin stroke often improves readability. Was this visual change intentional? If not, I'd suggest adding the stroke back.
| style: { | |
| fill: '#1890FF', | |
| fillOpacity: 0.9, | |
| stroke: '#FFF', | |
| }); | |
| }, | |
| style: { | |
| fill: '#1890FF', | |
| fillOpacity: 0.9, | |
| stroke: '#FFF', | |
| }, |
Checklist
Description of change