adam.hsaine@gmail.com

@AdamHsaine·2 public vizzes

Draw scatter plot

This React example generates a scatter plot with 50 randomly positioned points, rendered using the Recharts `ScatterChart` with `XAxis`, `YAxis`, and `CartesianGrid`. A button triggers regeneration of the data, while a custom `Tooltip` displays the exact X and Y coordinates on hover. The plot uses random numeric values between 0 and 100 for both axes, with the point count displayed dynamically.

Jan 20, 2025

Loading thumbnail…

Fork of HTML Starter

This example shows a smiling face drawn entirely with SVG primitives inside a React component, rendered by ReactDOM into a single div. The code demonstrates how to combine React's JSX syntax with D3's arc generator to create the mouth path, while circles and an ellipse form the eyes and nose. All shapes are centered and scaled within a 960 by 500 viewport, with styling applied directly through SVG attributes like fill and stroke. The example uses React 16.7 and D3 v7, loaded from CDN, with the visual output driven purely by static geometric calculations rather than data.

Jan 16, 2025