Erdogan Onur Eroglu

@eoeroglu·3 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using d3.csv and d3.csvParse, displaying summary statistics about the dataset. It fetches a remote CSV file containing CSS named colors from a GitHub gist and reports the file size in kilobytes, the number of rows, and the number of columns. The visualization uses d3.v7’s asynchronous fetch and parsing methods, alongside the native Fetch API’s response.text() function. The results are rendered as large text in a pre element, showcasing the parsed data structure without any graphical chart.

Aug 6, 2023

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the pointer's movement. The React component tracks mouse coordinates through the `onMouseMove` event handler, storing them in state with the `useState` hook and updating via `useCallback`. The circle is rendered as an SVG `<circle>` element, with its `cx` and `cy` attributes driven by the current mouse position.

Aug 6, 2023

Loading thumbnail…

Smily Face with D3

A grid of procedurally generated smiley faces appears, each composed of a yellow circle with black outline, two offset eyes, and a mouth drawn as an arc. The faces are rendered using React components that compose SVG elements, while the mouth shape is generated with the D3 `arc` function, using inner and outer radii and start and end angles. Randomized parameters for stroke width, eye size and position, and mouth dimensions create variation across the grid, with a total of 18 faces arranged in a 6-by-3 layout. The SVG output is produced for each face using the `Face`, `BackgroundCircle`, `Eye`, and `Mouth` React components, with the `FaceContainer` providing the overall SVG wrapper and coordinate translation.

Aug 6, 2023