Skip to main content
Log in
H

Hamza Abdirashid

@hamzaabde·13 public vizzes

Loading thumbnail…

d3 Line Chart with React and D3

This example visualizes temperature readings over time as a red line chart rendered with SVG. The chart uses React for the interface and d3.scaleBand and d3.scaleLinear to map time and temperature values to coordinates. The line path is generated with d3.line, while vertical grid lines and oversized circles mark each data point. The underlying data is a small array of temperature/time pairs.

Jul 27, 2021
Loading thumbnail…

Bar Chart

This bar chart visualizes United Nations World Population Prospects 2019 data, showing the 2020 population estimates for 12 countries as horizontal bars. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, rendering SVG rectangles. The chart includes custom axes with tick labels, and each bar is assigned a random HSL fill color generated via `randomHue`. Data is loaded asynchronously using D3's `csv` parser.

Jul 7, 2021
Loading thumbnail…

Fork of Vizualizing Data with React & D3

This example visualizes CSV data about UN world population as a grid of solid red rectangles, where each cell corresponds to a row in the dataset. Built with React and D3, it uses the `d3.csv` function to load and parse the external CSV file. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, rendering a “Loading…” message until the data arrives, then mapping each record to a flex-wrapped div with computed width and height dimensions.

Jul 7, 2021
Loading thumbnail…

Vizualizing Data with React & D3

This example visualizes the 148 CSS named colors as a donut chart, where each arc segment represents a color and is filled with its corresponding RGB hex value. The visualization is built using React for the component structure and D3.js v5 for data loading and pie chart geometry. The code fetches the color data from a GitHub Gist using `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the SVG paths, which are rendered inside a React `<svg>` element.

Jul 7, 2021
Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a grid of small colored boxes representing CSS named colors, loaded from a remote CSV file via D3's `csv` utility. After fetching the data asynchronously, React's `useState` and `useEffect` hooks trigger the load and render a loading message until the dataset arrives. The `createBox` mapping function uses each row’s `'RGB hex value'` field to set the inline `backgroundColor` style of a `div`, producing a visual swatch for every color, laid out with CSS `display: grid` and `flexFlow: 'row wrap'`. The code integrates React with D3 v5 and invokes `ReactDOM.render` on the `#root` element.

Jul 6, 2021
Loading thumbnail…

Fork of loading and parsing csv data using react

This example demonstrates how to load and parse CSV data in a React component using D3’s `text` and `csvParse` functions. After fetching the file from a GitHub gist, it displays the file size in kilobytes alongside the total row and column counts of the parsed dataset. The code uses React hooks (`useState`, `useEffect`) with promises, showing a "Loading..." message until the asynchronous request completes.

Jul 2, 2021
Loading thumbnail…

React Mouse Follower

A React component renders an SVG circle that follows the mouse cursor across a 960×500 viewing area. The application uses React’s `useState` and `useCallback` hooks to track mouse coordinates via an `onMouseMove` event handler on the SVG element, updating the circle’s `cx` and `cy` attributes in real time. D3 v5 is loaded but not directly used; rendering relies solely on React’s declarative SVG output with a fixed 100-pixel radius circle.

Jul 2, 2021
Loading thumbnail…

Loading and parsing csv data

This example demonstrates fetching and logging the raw text of a CSV file containing CSS named colors. The code uses the `fetch` API to request the remote CSV from a GitHub gist, then chains a `.then()` call to extract the response as text with `response.text()`. It illustrates both the current async/await pattern and the older promise-based approach in commented code, with the result written to the browser console.

Jul 2, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS to center and scale a large emoji-style font, though the body remains empty and no data is rendered. The code relies on standard HTML, CSS, and JavaScript, with no external libraries or frameworks. The styling sets the body to `text-align: center` and `font-size: 13em`, but no content or visualization is generated. It serves as a bare template for further development, showing how to structure a basic page with inline styles and an empty body.

Jun 29, 2021
Loading thumbnail…

CSS Named Colors

This example displays the title “CSS Named Colors” centered on a blank page using HTML, CSS, and JavaScript. The page uses a 13em font size for the body text and fetches a CSV file of CSS named colors from a GitHub gist via the `fetch` API. The JavaScript logs the retrieved text to the console, demonstrating a simple data-loading workflow without any visualization library or chart rendering.

Jun 25, 2021
Loading thumbnail…

React viz

A grid of randomly generated SVG smiley faces demonstrates how D3's arc generator creates each mouth shape within a React component. The faces use varying stroke widths, eye placements, and mouth radii, all rendered as vector graphics. The code combines React's declarative component structure with D3's `arc()` API to produce the curved mouth paths, while ReactDOM renders the resulting SVG elements into the page.

Jun 25, 2021
Loading thumbnail…

SVG Smily Faces

This example displays a grid of 32 randomly generated smiley faces, each with varying stroke widths, eye sizes and positions, and mouth dimensions. The grid is built by mapping over a range of indices, and each face is rendered as a composite of React components for the background circle, eyes, and mouth. The SVG output is generated using React’s declarative JSX syntax, while the mouth’s arc path is computed with D3’s `arc()` generator. All faces share the same SVG viewport and are positioned via a central transform.

Jun 25, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles on a yellow background. The code uses plain SVG elements—a large yellow circle for the head and two smaller black circles for the eyes—rendered directly in the browser with no JavaScript libraries. The rendering relies on static SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`, with the face drawn at a 960 by 500 pixel canvas size. It is a minimal demonstration of basic shape composition and SVG styling.

Jun 24, 2021