eko.5samuel@gmail.com

@sazzeb·5 public vizzes

SDV

A 3D scatter plot maps country-year observations along GDP, carbon emissions, and energy use per capita, with color-coded regions and year filtering. The view includes multiple switchable layouts, from rotatable 3D perspectives to sorted bars and small multiples, plus an animation play button. Built with D3 v7 and Plotly.js, it loads CSV data and uses Plotly’s 3D scene controls, camera reset, and delayed tooltip interactions for exploration.

Oct 7, 2026

Loading thumbnail…

World Income For Country With GDP: CSCE 5320

This interactive D3.js visualization explores world country income and energy data, comparing GDP per capita against purchasing power parity through a scatterplot of point marks. Users navigate five design stages that progressively add categorical region hues, quantitative population sizing, and intentionally broken then repaired chart configurations. The visualization uses SVG rendering with animated transitions, D3 scales for logarithmic and linear axes, and a color legend mapping regional categories. Data loads from a CSV file containing country-level income, population, and region attributes, with tooltips and summary statistics supporting the analysis.

Sep 30, 2026

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes Fisher’s Iris dataset, comparing sepal length and sepal width across three iris species. The visualization uses D3 v7’s `scaleLinear` and `scaleOrdinal` to map data values to positions and colors, with points rendered as SVG circles. Hovering over a legend item highlights that species’ points while fading others, implemented through D3’s `.on()` event handlers and state management. The chart includes styled axes, titles, and a legend, with color schemes defined in a BBC-inspired theme.

Sep 30, 2026

Loading thumbnail…

Fork of CV: Scatter Plot

This example shows a scatter plot of the classic Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Clicking a circle highlights it with a white fill, bold stroke, and pointer cursor. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `axisBottom`/`axisLeft` for axes. SVG circles are rendered via data joins with click event handlers, while a ResizeObserver tracks container dimensions for responsive sizing.

Sep 30, 2026

Loading thumbnail…

Fork of CV: Scatter Plot

This scatter plot displays sepal length against sepal width from the Iris dataset, with each flower represented as a circle that can be clicked to highlight its selection. The React app uses a ResizeObserver to track container dimensions and re-renders the SVG visualization when data or selection changes. Built with D3 v7, it leverages scaleLinear, extent, axisBottom, axisLeft, and data joins to render circles and axes, with labels and margins configurable through props.

Sep 30, 2026