Skip to main content
Log in
S

sommerh

@sommerh·4 public vizzes

Loading thumbnail…

Stylized Scatter Plot

This visualization displays the classic Iris flower dataset as a stylized scatter plot, plotting sepal length on the x-axis against sepal width on the y-axis. Each data point is rendered as a teal circle with a tooltip showing its value. The chart uses React components to structure the SVG rendering, with D3’s `scaleLinear` handling the axes and `csv` loading the data from a GitHub-hosted Iris dataset. Custom axis components generate tick marks and labels, while a Poppins font and clean styling give the plot a modern appearance.

Apr 15, 2022
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. The visualization uses D3.js scaleLinear and extent functions to map data coordinates to SVG positions, while React components render the axes and circular marks. The code applies a custom Poppins font and a muted color palette, with a distinct teal fill for data points and subtle gray styling for grid lines and labels. SVG circles include title elements that display tooltips showing the x-value on hover.

Apr 15, 2022
Loading thumbnail…

Face Part I

A yellow circle with a black outline takes up most of the canvas, with two smaller black circles positioned as eyes, leaving the face incomplete. The drawing is rendered as static SVG elements using React 18, with the `<circle>` primitives for each shape. The code directly sets coordinates and dimensions, such as a center at (480, 250) and a radius of 245 for the head, with eyes offset horizontally. No interactive behavior or animation is present; the example simply shows the basic geometric construction of a partial smiley face.

Apr 14, 2022
Loading thumbnail…

Hello HTML

This example displays two black-outlined circles and a smaller pair of yellow circles on a blank 960 by 500 SVG canvas. The page uses raw HTML and inline CSS to remove default body margins and hide overflow. The circles are drawn using the SVG `circle` element, with coordinates and radius defined directly in the markup. No external libraries are used; the visualization relies on native browser rendering of the SVG.

Apr 14, 2022