sunole896@yahoo.com

@sunole·10 public vizzes

Fork of Mouse Follower

A circle follows the mouse cursor across a full-viewport SVG. The example demonstrates unidirectional data flow: mouse events trigger a state update, which then re-renders the visualization. Built with D3 v7, it uses `select`, `join`, and event handlers to bind the circle’s `cx` and `cy` attributes to the current cursor position. The state is managed externally and passed into the `viz` function, with `setState` triggering a re-render on each mouse move. No external data source is used; the interaction is purely based on user input.

Feb 27, 2023

Loading thumbnail…

makeData vizData of HTML Starter episode 5 makeData

This example animates a dynamic set of circles whose positions and radii oscillate over time. The visualization updates 100 times per second, using a sine wave to vary the number of circles between 1 and 19, while each circle’s y-coordinate and radius also fluctuate based on its index and time. The code uses D3’s `select` and `range` functions to build an SVG scene, with the `vizData` function applying a `join` operation to smoothly update circle attributes. Data is generated on the fly by the `makeData` function using trigonometric calculations, with no external data source.

Dec 26, 2022

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from D3 v5 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red circles. Dropdown menus let the user choose which numeric columns map to the X and Y axes. The code builds the scatter plot using `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function. Animated transitions, created with `transition().duration(2000).delay()`, smoothly move points between positions when the axis selection changes.

Dec 26, 2022

Loading thumbnail…

make data async Fork of HTML Starter

This example demonstrates a minimal HTML page that displays a large, centered greeting message. It uses plain CSS for styling and JavaScript to define an asynchronous function that schedules a recurring interval. The page structure is built with standard HTML elements, and the script tag references an external JavaScript file. The visualization relies on basic DOM manipulation and the browser’s native `setInterval` API to manage timing, though no visual updates occur as a result. It serves as a simple template for integrating asynchronous logic with static content.

Dec 6, 2022

Loading thumbnail…

adding menu to D3 Scatter Plot

This example presents a D3.js scatter plot of the Iris dataset, with interactive dropdown menus that allow users to select which measurement columns (e.g., petal length, sepal width) are plotted on the X and Y axes. The visualization dynamically re-renders the SVG circles and axes based on the menu selections. It uses the `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` functions from the D3 v6 library to handle scaling and axis generation. A custom `menu()` module builds the HTML select controls, and the plot reads data from a CSV file hosted on GitHub. The menu container is fixed at the top of the viewport, with the SVG plot filling the window.

Dec 6, 2022

Loading thumbnail…

ReUsable Fork of D3 Scatter Plot

This example presents a scatter plot visualization of the Iris Dataset, displaying the relationship between petal length and sepal length for individual flowers. The plot is built using a reusable D3.js module that encapsulates the chart's configuration, including margins, axis scales, and point radius, making it adaptable to different datasets by specifying custom data accessors for x and y values. The implementation leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map data to SVG circle elements, with the chart initialized via a chainable setter pattern in the `scatterPlot` function. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the visualization is rendered responsively to fill the browser window.

Dec 4, 2022

Loading thumbnail…

class final Reusable D3 Scatter Plot

This reusable scatter plot displays the Iris Dataset, with points colored according to species and axes labeled by sepal/petal measurements. Built with D3.js, it cycles through four data columns every two seconds, smoothly updating the x-axis scale and point positions. The implementation uses a custom `scatterPlot` charting function that leverages D3's `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, with SVG rendering and animated transitions.

Dec 4, 2022

Loading thumbnail…

SVG fun fun fundamental

A single large red circle sits alone on an empty SVG canvas, illustrating a basic interactive graphics setup. The example uses React as the framework and plain SVG elements, with minimal CSS controlling the circle’s appearance. It demonstrates the fundamental building blocks of web-based visualization: an SVG container with a fixed width and height, and a circle positioned by its center coordinates and radius. The code is a static, non-animated composition intended as a starting point for SVG rendering in React.

Dec 3, 2022

Loading thumbnail…

Area Chart

This example demonstrates an interactive area chart built with D3.js (v4) that presents two overlaid series with gradient fills, rendered as SVG. The visualization initially displays one dataset, and a button click transitions the chart to a second, extended dataset. The chart's axes and area paths smoothly animate their transitions over two seconds using D3's `.transition()` method. The code defines linear gradients with specified opacity stops for series styling, and uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisRight` for scaling and axes, respectively.

Feb 28, 2020

Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical organization of countries grouped by continent and subregion, with each leaf node labeled and connected by curved paths from a central root. The D3 v4 code uses `d3.cluster` to compute the tree layout, `d3.hierarchy` to parse the JSON data, and SVG paths for the links. Text nodes vary in size based on depth, and a zoom behavior with panning is enabled via `d3.zoom`. The data comes from a local `data.json` file containing the country hierarchy.

Feb 27, 2020