seanlucano

@seanlucano·4 public vizzes

Linear regression with some fun interaction

A scatter plot displays the relationship between Microsoft and Walmart stock returns, overlaid with a linear regression line and its R-squared value. Users can click the plot background to add new data points, or click existing circles to remove them. The visualization uses D3.js v6 for SVG rendering, d3-regression for calculating the regression line, and loads its dataset from a remote CSV file.

Jan 4, 2021

Loading thumbnail…

Mouse Follower - Sean

A yellow circle follows the mouse cursor across a full-screen SVG canvas. The circle's position updates directly from mouse movement events, and the visualization uses React's `useState` and `useCallback` hooks to manage the cursor's coordinates. The rendering relies on ReactDOM and React 16.9.0, with the window dimensions and mouse position determined by `window.innerWidth`, `window.innerHeight`, and `clientX`/`clientY` event properties. The visualization is a minimal, interactive demonstration of state-driven SVG rendering.

Dec 24, 2020

Loading thumbnail…

Loadind Data

This example demonstrates loading and parsing external data using the JavaScript Fetch API and D3's `csv` method. The page displays the static text "Hello HTML" in large type, while the console logs the raw contents of a CSV file containing CSS named colors fetched from a GitHub gist. A second script imports `select` and `csv` from D3, reads a local `data.csv` file, and logs the parsed data array to the console. The visualization focuses solely on data acquisition, with no visual output beyond the HTML text.

Dec 24, 2020

Loading thumbnail…

Best Fit Line

An interactive scatter plot displays the relationship between Microsoft and Walmart stock returns. Users click and drag to draw their own estimated regression line onto the chart. A button reveals the actual least squares fit, computed using the `d3-regression` library’s `regressionLinear()` function. Data points render as circles from the CSV file, while the user’s line is drawn with `d3.drag()` pointer events. The SVG visualization uses D3 v6 scales, axes, and `transition`-less direct attribute updates.

Dec 24, 2020