haozhou334@gmail.com

@gg32d·2 public vizzes

Scatter Plot

This scatter plot visualizes the Penguins Dataset, showing the relationship between bill length and flipper length for individual penguins. The chart uses D3’s `scaleLinear` to map data values to pixel coordinates, with axes rendered via `axisLeft` and custom axis-label helpers from `@curran/axis-labels`. Circles represent each penguin, with opacity and radius set to fixed values. The visualization is built using D3’s data join pattern, binding the dataset to SVG circles, and includes a light gray inner rectangle to frame the plotting area.

Sep 9, 2024

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables, plotting each data point as a circle on a Cartesian plane. The chart uses the D3.js library to generate the axes and scale the data, while the `d3.select` and `d3.scaleLinear` APIs handle element creation and coordinate mapping. Each point’s position is derived from the input dataset, and the visualization updates dynamically when new data is passed to the main `update` function. The renderer draws only the SVG shapes, with no additional interactivity or color encoding applied to the points.

Sep 9, 2024