AchilleasTyrnenopoulos

@AchilleasTyrnenopoulos·8 public vizzes

Fork of Victory!

A bar chart displays annual footfall data loaded from a remote CSV via `d3.csv` and rendered with Victory Charts’ `VictoryBar` and `VictoryChart` inside a React component using the `useState` and `useEffect` hooks. The code parses numeric values, trims the dataset to the last 360 rows, and visualizes the time series with a date-picker available in the layout. React and Victory render the chart in the browser, with D3 handling asynchronous data fetching.

Nov 17, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width with circular marks. Built with React and rendered as SVG, it uses d3.scaleLinear for both axes and d3.extent to set domains. The code implements custom AxisBottom and AxisLeft components that generate ticks via xScale.ticks(), while Marks component renders circles with tooltips. The chart includes axis labels and styling with the Poppins font, showcasing a straightforward React-D3 integration pattern.

Nov 13, 2021

Loading thumbnail…

Footfall Data with React & D3

This example displays summary statistics about a yearly footfall dataset, presenting file size, row count, and column details as plain text. It fetches CSV data asynchronously using the `csv` function from D3 v7, stores the result in React state with `useState` and `useEffect`, and renders the output using ReactDOM. The code demonstrates a minimal React integration with D3, where a custom module (`msg.js`) formats the data metrics for display in a large `<pre>` element.

Nov 13, 2021

Loading thumbnail…

Footfall

This visualization reads a CSV file from a GitHub gist and displays basic metadata about the dataset as plain text in a large HTML `<pre>` element. Using D3 v7’s `d3.csvParse` and the Fetch API, it counts the number of rows, columns, and approximate file size in kilobytes. The output is then rendered into the page via `document.getElementById`, presenting a concise summary of the data’s structure without any graphical charts.

Nov 13, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset from a GitHub gist using React and D3. It shows a text-based report of the data's size, row count, and column count, rendered with a large `<pre>` element. The `App` component uses React hooks—`useState` and `useEffect`—to fetch the data asynchronously via `d3.csv`, then displays the results using a custom `msg` function that calls `d3.csvFormat`. The visualization uses SVG for rendering, with D3 v7 and React 16.9 loaded from CDNs.

Nov 13, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a CSV file from a remote URL using the Fetch API and D3 v7’s `d3.csvParse` method. It displays the parsed dataset’s total row count, file size in kilobytes, and column names in a large `<pre>` element. The data source is a GitHub Gist containing a list of CSS named colors. The code defines an asynchronous `fetchText` function to retrieve the raw text before parsing it into a JavaScript array of objects.

Nov 13, 2021

Loading thumbnail…

Mouse Follower

A yellow circle rendered in SVG follows the mouse cursor as it moves across a 960 by 500 pixel canvas. Built with React and ReactDOM, the application tracks cursor coordinates through the `onMouseMove` event handler and updates the circle's position via the `useState` hook. The circle's center is set to the current `clientX` and `clientY` values from the event, providing immediate visual feedback.

Nov 13, 2021

Loading thumbnail…

Fork of Smiley Faces

The gallery displays a grid of eighteen smiley faces, each constructed from a yellow circle with black eyes and a mouth. Faces are randomly varied in stroke width, eye radius, mouth width, and mouth radius, creating a playful ensemble. The visualization uses React components to assemble each face, with D3’s `arc` API generating the mouth path and `range` producing the layout. Rendered as SVG, the code sets explicit width, height, center coordinates, and random parameters per face.

Nov 11, 2021