lucaly74@gmail.com

@masterlou2024·7 public vizzes

Loading Data with React

This example demonstrates the integration of React with D3 for asynchronous data loading, showing a text display that reports the size and structure of a CSS color dataset fetched from a GitHub gist. The React component uses the `useState` and `useEffect` hooks to manage state and trigger the `d3.csv` request, while the `message` utility computes row and column counts plus file size in kilobytes. The visualization updates from a "loading" message to the final statistics once the CSV data arrives, highlighting how React handles D3 data pipelines. The example uses React 18 and D3 v7.

Sep 13, 2024

Loading thumbnail…

Parse CSV

This example demonstrates the fundamental capability of loading and parsing a CSV file using the D3.js library. It fetches a remote CSS color dataset and displays a simple text summary indicating the number of rows, columns, and the file size in kilobytes. The visualization leverages the `d3.csv` method with a promise to asynchronously retrieve the data, then uses `d3.csvFormat` to calculate the data's byte size. The final result is rendered as large preformatted text within an HTML page, showcasing a minimal data-import workflow.

Sep 13, 2024

Loading thumbnail…

Parsing CSV

This example demonstrates the foundational pattern for the VizHub V3 runtime environment. The main function exports a simple visualization that takes a container and options, then renders a basic chart into the provided DOM element. The code uses state management through the options object with setState for potential interactive updates, though the default state remains empty. This serves as a blank template for building more complex visualizations within the VizHub platform.

Sep 11, 2024

Loading thumbnail…

follow the cursor

A single circle follows the cursor within an SVG canvas, its position updating in real time. The visualization uses React’s `useState` and `useCallback` to manage mouse-move events, while D3.v7 supplies the SVG rendering via `d3.min.js`. The circle’s center coordinates (`cx`, `cy`) are set from the pointer’s `clientX` and `clientY` values, producing a direct, interactive response.

Sep 9, 2024

Loading thumbnail…

css color csv

This example displays a web page titled “CSS color vis” that fetches a CSV file of CSS color names and values from a GitHub gist. It uses the Fetch API to load the remote CSV, then logs the raw text data to the browser console. The visualization itself is not implemented; the code only demonstrates the initial data retrieval step without any graphical rendering or charting library.

Sep 9, 2024

Loading thumbnail…

css color data

This example visualizes CSS color names as an interactive network, mapping each color as a node with connections to its nearest neighbors based on RGB color distance. It uses d3.forceSimulation to position the nodes with collision detection, while a color swatch and the color name label are rendered for each node. The data originates from v3 and is processed in index.html, with node filtering and display logic handled through d3's selection and event methods. The graph reveals clusters of similar hues, offering a spatial view of the CSS color palette.

Sep 9, 2024

Loading thumbnail…

Fork of making a face

A grid of fifteen randomly generated faces appears, each rendered as an SVG via React. The faces share fixed eye placement and mouth dimensions, but vary in stroke width and eye radius due to `Math.random()` calls in the `range` loop. The code builds composite components from modular parts—a yellow background circle, eyes, and a mouth—using parametric props. The mouth’s arc is generated with D3’s `arc()` API, while React and ReactDOM assemble the SVG elements into the final grid.

Sep 9, 2024