T

TousifAhamed

@TousifAhamed·19 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React with SVG rendering, leveraging d3.scaleLinear for coordinate mapping, d3.extent for domain calculation, and d3.csv for data loading. Each point is drawn as a circle with a tooltip showing its x-axis value, while axis labels update dynamically to reflect the selected measurements.

Loading thumbnail…

Menus with React

This example shows a React-based menu system for selecting a pet from a dropdown list. The interface displays a label and a select element populated with five options, with the initial value set to “parrot.” The code uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that maps over the options array. ReactDOM renders the App component into the root div, while the HTML loads React 16.9.0 from unpkg CDNs.

Loading thumbnail…

React Starter Code

This example shows a simple React application that renders “Hello React” in a full-screen window. It uses React and ReactDOM directly from UMD builds loaded via CDN, with a production configuration. The code calculates window dimensions and prepares variables for potential SVG shapes, but the actual rendered output is only the text. The app is mounted into a root div, demonstrating a minimal setup for integrating React with external libraries.

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face rendered as an SVG, drawn with yellow circles and a black stroke for the head, black eyes, and a mouth arc. The visualization uses React to manage the component structure and D3’s `arc()` generator, with explicit `innerRadius`, `outerRadius`, `startAngle`, and `endAngle` values to shape the mouth. All dimensions—face radius, eye offsets, eye radius, and stroke width—are defined as constants in code, and the entire graphic is positioned via a centered `<g>` transform. The example demonstrates a simple composition of D3 shape generators within a React rendering pipeline.

Loading thumbnail…

World Map

This visualization shows a world map with landmasses in teal, graticules, and country interiors outlined in a lighter shade. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic features. The data is loaded from the World Atlas TopoJSON file using `d3.json` and processed with `topojson.feature` and `topojson.mesh` to distinguish land from country borders. Render is done with React in SVG, applying distinct CSS classes for land, sphere, graticules, and interiors.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays population values for various countries using a horizontal layout with colored bars. It loads CSV data from an external gist URL using D3’s `csv` utility, then applies `scaleLinear` and `scaleBand` to position bars and axes. React components render the SVG elements, including custom axes and marks, with D3’s `max` and `format` functions handling data scaling and tick label formatting. The chart includes a loading state and applies a Poppins font from Google Fonts.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries for 2020, drawing on United Nations World Population Prospects data loaded via `d3.csv`. The visualization uses SVG rendering through React, with `scaleBand` positioning horizontal bars and `scaleLinear` mapping population values to bar widths. D3’s `format` helper converts large numbers into abbreviated tick labels (e.g., “1.2B”), while custom axis components generate gridlines and text. The chart uses a muted teal fill for bars and the Poppins font.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of population data for ten countries, using the United Nations World Population Prospects 2019 dataset. The chart displays each country’s population for 2020 using SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`. The React components render the axes and marks, with `d3.csv` fetching the dataset and `d3.max` determining the x-axis domain. The visualization highlights a modular refactoring approach where axis and mark components are separated for clarity.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the top 10 countries by population in 2020, rendered as SVG elements. React manages the chart's state, fetching and parsing the United Nations population CSV data with D3's `csv` utility. D3's `scaleLinear` and `scaleBand` map the data to x- and y-axis positions, while `xScale.ticks()` generates gridlines and labels. The axes, tick marks, and bars are all React-generated `<rect>` and `<text>` elements within an `<svg>` container.

Loading thumbnail…

The Margin Convention

This visualization displays the top ten countries by population using horizontal bars, with bar width representing population size and countries arranged vertically. The code loads United Nations World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and renders SVG rectangles through React components. It uses `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the y-axis country categories, with margins applied via a translated `<g>` element. The visualization is built with React 16.9 and D3 v7.

Loading thumbnail…

Barchart

This example shows the ten most populous countries in 2020 as horizontal bars, with bar length proportional to population. It uses React hooks to fetch and parse the United Nations population CSV via D3’s `csv` loader, then renders SVG rectangles scaled by `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. The chart updates once the data arrives, displaying a loading message before rendering.

Loading thumbnail…

Fork of Rendering Data with React & D3

This is a radial burst visualization of CSS named color data. It presents each color as a slice of a pie chart, with the slice’s fill color set directly from the `RGB hex value` column in the source CSV. The visualization uses React to manage the application state and render the SVG elements, while D3’s `csv`, `arc`, and `pie` utilities load the dataset and compute the pie geometry. The chart is centered and drawn with a full outer radius, creating a colorful, flower-like display of the color palette.

Loading thumbnail…

Rendering Data with React

The visualization renders CSS named-color data from a GitHub-hosted CSV file as horizontal color bars, with each row's `RGB hex value` displayed as a full-width strip. It uses React with hooks (`useState`, `useEffect`) to fetch and store the data via d3.csv, then conditionally renders a loading state or the color bars. The example demonstrates integrating D3's data-loading utilities with React's declarative component rendering, using inline styles for the background colors.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data into a React application using D3 utilities. It fetches a CSV file containing sample sales data via the `d3.csv` method and displays summary statistics—approximate file size in kilobytes, row count, and column count—in a large text element. The React `useState` hook manages the data asynchronously, showing a “Loading...” message until the fetch resolves. The visualization relies on React 16.9, D3 v7, and the raw CSV hosted on GitHub.

Loading thumbnail…

Mouse Follower

A yellow circle with a black outline follows the mouse cursor across a 960-by-500 SVG canvas. The example uses React's `useState` and a callback to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes directly on mouse movement. This demonstrates interactive SVG rendering within a React component, with the circle’s position driven entirely by user input.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of working with external tabular data in a web page: fetching a remote CSV file and printing its raw contents to the browser console. It uses the Fetch API and async/await syntax within a custom `fetchText` function to retrieve the plain-text data from a GitHub Gist URL containing sample sales records. The code then logs the entire CSV string to the console, allowing users to verify the data structure before any parsing or visualization is applied. No charting library is used; the example focuses solely on the loading mechanism.

Loading thumbnail…

Fork of Hello HTML

A fork of the v3 "Hello HTML" example, this page renders a bare HTML document with an empty body. The code consists of a minimal HTML structure with a title, and it embeds a YouTube video via an iframe in the README file. No JavaScript libraries or data visualizations are used; the page simply outputs a blank document. The example demonstrates the basic scaffolding of an HTML page, serving as a starting point for further development.

Loading thumbnail…

Fork of Hello HTML

A grid of 18 cartoon faces rendered as yellow SVG circles with black outlines, each featuring two eyes and a curved mouth. The faces are generated using React components that compose a face from reusable parts: a background circle, eyes, and an arc-based mouth. The code leverages D3’s `arc` API to draw the mouth shape and `range` to create the grid, with random parameters for eye offset, eye radius, and mouth size, producing varied expressions across the grid.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup for rendering text with D3 version 7, displaying the phrase “Hello D3 version 6” centered on a blank page. The code uses the `select` API from the `d3` module to target the document body and sets its text content via `.text()`, while the HTML file loads D3 from unpkg and includes a separate `bundle.js`. Styling relies on inline CSS for large, centered type.