rekabbnad

@rekabbnad·8 public vizzes

Dan B Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data, mapping origin to the x-axis and horsepower to the y-axis, with circular marks and tooltips showing car names. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render SVG output. Data is loaded asynchronously from a CSV file using d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis appearance and styling through a custom config object, and the chart resizes to fit the window dimensions.

Jun 24, 2022

Loading thumbnail…

Fork of React & D3 Starter

This React and D3 starter renders a scatter plot of the classic Iris dataset, plotting sepal length against petal length. It demonstrates a decoupled integration pattern where a React component manages the SVG container while a standalone D3 function handles all visualization logic, including scales and axes. The visualization uses d3.csv for data loading, d3.scaleLinear for coordinate mapping, and d3.axisLeft and d3.axisBottom for the axes. This architecture provides a scalable foundation for projects with increasing complexity, separating concerns between the React wrapper and the D3 rendering code.

Jun 21, 2022

Loading thumbnail…

Fork of Load data with React and D3

This example demonstrates how React state manages asynchronous data loading for a D3 visualization, showing a text summary of a CSS named colors CSV file. The app uses React hooks—`useState`, `useEffect`, and `useCallback`—to fetch the data once via `d3.csv`, then renders a formatted message with file size, row count, and column count. The display updates from a "Loading…" placeholder to the computed statistics once the promise resolves, highlighting the integration of D3’s data parsing with React’s component lifecycle.

Jun 17, 2022

Loading thumbnail…

Load data with React and D3

A React component renders an SVG circle that tracks the mouse position across a 960-by-500 viewport. Using React’s `useState` and `useCallback` hooks, the component updates its state on every `onMouseMove` event, passing the new `clientX` and `clientY` coordinates to the circle’s `cx` and `cy` attributes. The example demonstrates integrating React’s declarative rendering with SVG markup without relying on D3 for data loading or manipulation.

Jun 16, 2022

Loading thumbnail…

Loading and Parsing CSV Data with D3

This example demonstrates the basic process of loading and parsing CSV data using D3. It displays a summary of the dataset’s size, row count, and column count in large text. The code uses the `d3.csv` method to fetch a remote CSV file containing CSS named colors from a GitHub gist, then formats the parsed data with `d3.csvFormat` to calculate its size in kilobytes. The result is rendered into a `<pre>` element using standard DOM manipulation.

Jun 16, 2022

Loading thumbnail…

MouthFollower

A React application renders a single SVG circle that follows the mouse cursor across the viewport. It uses React's `useState` and `useCallback` hooks to track pointer coordinates from the SVG `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The SVG canvas is 960 by 500 pixels, with the circle initially centered and a radius of 30. The code imports React and ReactDOM, relying on React's declarative state updates to re-render the circle at new positions without additional data sources.

Jun 15, 2022

Loading thumbnail…

Smiley Face part 3, Using D3

A grid of 18 randomly generated smiley faces appears, each with slightly varied stroke widths, eye offsets, eye radii, mouth widths, and mouth radii. The faces are rendered as SVG circles and paths, using React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses `d3.arc` to generate a curved path, while `FaceContainer` wraps the SVG with a translated group. Randomness comes from `Math.random` within the `App` component, and the grid layout is driven by `d3.range`.

Jun 7, 2022

Loading thumbnail…

tweak a face eyebrow lift

A stylized face rendered with SVG shapes animates its eyebrows in a looping lift. The code uses D3 v5 selections and transitions to move a group containing two rectangular brows upward by 50 pixels over two seconds, then back down. The face itself is built from a yellow circle, two eye circles, and a mouth drawn with the D3 `arc` generator, all positioned within a centered group in a 960x500 SVG.

Jun 2, 2022