Build complex Data Visualisations from scratch

Create a bar graph wireframe with a title, aligned x and y axes, and rounded bars, ensuring 1-to-1 mapping to development and data remains indicative with center-aligned spacing.

Add a hover variant for the bar graph, highlight the current month on the x axis in blue, and show the exact value on hover.

Define hover and default variants in the graph component for light and dark themes, setting grid to dark/grey-1, and make non-hovered bars translucent while the hovered value is bold.

Set up the development environment by scaffolding a bar graph project with the Vit bundler, install dependencies, use npx for storybook, run yarn dev, and configure prettier in vscode.

Develop a React bar graph component with Storybook, using a data prop and a humanize function to show last month sales delta in readable values.

Wrap up the initial styling by creating a color map, adding red-pink, and passing a color prop to the text component; update gradient text and separator color.

Learn to build a React canvas hook for a bar graph using HTML canvas, handling initialization, dimensions, responsiveness, context management, and drawing utilities.

Render the x and y axes with values and grid lines, and sharpen the canvas by upscaling to the device pixel ratio while preserving dimensions.

Learn to render bars with a teal-to-blue gradient by iterating over data, drawing each bar with a rounded stroke, and using clearRect to fix bottom rendering.

Create a useData hook to manage data manipulation, map data to canvas dimensions with a flipped Y-axis, and prepare X and Y aligned graph data for rendering.

Pass data from the main component to the canvas, map y and x values with width and height, render only when graph data exists, and adjust padding and legend.

Add a font loaded flag to delay rendering until the Google font is ready, and implement responsive resizing by listening to window resize to update dimensions and y-range.

Animate a bar graph on canvas by tweening bar heights over 700ms, while keeping the axis, grid, and background static, using a separate background canvas and a tween-based draw loop.

Add a hover state to the bar graph, so hovering a bar makes others transparent and shows the sales volume above the bar using an effect hook and isMouseOverBar.

Fix negative values in the data visualisations by overriding the minimum value with a lower offset and using Math.abs to prevent negatives, then center bottom text with a Footer component.

Add system preference support to enable dark mode by using matchMedia to observe prefers-color-scheme and update the app theme accordingly.

Add test cases via Storybook to validate data visualisations across larger, negative, no data, and long datasets.