nourfahmy2003

@nourfahmy2003·7 public vizzes

work

This visualization demonstrates a React-based web application that logs and displays the user agent string from the browser. The code imports the user-agents npm package to generate a random user agent and outputs both the generated data and the actual navigator.userAgent to the console. The page uses React 18, D3.js v7, and Axios libraries loaded via CDN, though the main render is currently commented out, leaving the visualization primarily as a console-based diagnostic tool.

Aug 15, 2022

Loading thumbnail…

neww

This example displays a static HTML page with the large text message “Hello HTML!” centered on the screen. The visualization is built using React 18 and D3 v7, with styles defined in CSS. It demonstrates the basic setup of a React application within a VizHub environment, using external libraries loaded via CDN links. The page includes Axios for potential data fetching, though no data is currently loaded or rendered.

Aug 1, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with populations shown in billions along the x-axis and country names along the y-axis. A tooltip reveals the exact population value for each bar. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders bars as SVG rectangles via the `Marks` component. Data comes from the 2019 United Nations World Population Prospects.

Aug 1, 2022

Loading thumbnail…

smily face 1

A grid of 32 randomly generated smiley faces, each with varying stroke widths, eye offsets, eye radii, and mouth dimensions, fills the viewport. The faces are rendered as SVG circles with a yellow fill and black stroke, using React components to compose the face, eyes, and mouth. The mouth is drawn with a d3 arc path, while the faces are positioned via SVG group translations.

Jul 27, 2022

Loading thumbnail…

Loading data with d3 and react

This example demonstrates how to load a CSV dataset and display its summary statistics as oversized text in a React application. The app fetches data from a GitHub Gist URL using the `d3.csv` method, then formats a message with file size in kilobytes, row count, and column count using `d3.csvFormat` and the data’s metadata. Rendered inside a `<pre>` element, the result updates from “loading…” to the computed statistics once the data arrives. The code uses React hooks (`useState`, `useEffect`) and the `ReactDOM.render` API with D3 v7.

Jul 27, 2022

Loading thumbnail…

Loading and parsing CSV

This example demonstrates how to load and parse a CSV file using D3.js, displaying the resulting dataset’s size in kilobytes, row count, and column count as large text on a plain HTML page. The code fetches a remote CSV file from a GitHub gist via `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its size. It also reads the `data.length` and `data.columns.length` properties to report the number of rows and columns, updating the page’s `<pre>` element with `textContent`.

Jul 27, 2022

Loading thumbnail…

mouse follower

A circular SVG element follows the cursor as it moves across a 960x500 viewport. The visualization uses React's `useState` hook to track the mouse position via the `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The D3.js library is loaded but not used in the core interaction; the rendering relies entirely on React's declarative SVG output. This demonstrates a simple, direct mapping between pointer coordinates and a graphic element's position.

Jul 27, 2022