AnthonyAl-Rifai

@AnthonyAl-Rifai·10 public vizzes

Stylized Bar Chart

This stylized bar chart visualizes the population of ten countries using horizontal bars, with a clean, modern aesthetic set against a Poppins font and teal color palette. The chart leverages React for state management and rendering, D3 utilities such as `scaleBand` and `scaleLinear` for axes, and SVG for output. Data is loaded via D3’s `csv` function from a UN population dataset, and the x-axis formats large numbers with a custom `format` function that abbreviates values as billions.

Feb 20, 2023

Loading thumbnail…

Refactored Bar Chart

This example presents a horizontally oriented bar chart displaying the top 10 countries by population for 2020, as loaded from a CSV file of UN population data using D3’s `csv` function. React state manages the fetched data via a custom `useData` hook, and the chart is rendered as SVG with components for the axes and marks. The y-axis uses a D3 `scaleBand` for categorical country labels, while the x-axis uses a `scaleLinear` for population values. The `AxisBottom`, `AxisLeft`, and `Marks` components are built with React, passing scales and data as props, with tick and bar geometry computed using D3 utilities.

Feb 20, 2023

Loading thumbnail…

The Margin Convention

This visualization displays population data for the top ten countries in 2020 using a horizontal bar chart. The chart employs the margin convention to position axes and labels within an SVG canvas. The code loads data via `d3.csv` and manages it with React state hooks. D3 scales, including `scaleBand` and `scaleLinear`, map the data to coordinates, while custom tick marks are generated using `xScale.ticks()`. React renders the SVG elements, with D3 utilities handling data parsing and scaling.

Feb 20, 2023

Loading thumbnail…

Pathetic Bar Chart

This bar chart visualizes the top 10 most populous countries in 2020 using data from the UN Population 2019 dataset. A horizontal bar encodes each country’s population with a rectangle, positioned along a band scale and scaled by a linear scale from D3. The React app loads the CSV via `d3.csv`, stores it in state with `useState`, and renders the SVG bars through React’s DOM. Once loaded, the chart appears, replacing an initial “Loading…” text.

Feb 20, 2023

Loading thumbnail…

Rendering Data (Radial Burst) with React

This example displays a radial burst visualization of CSS named colors, loading data from a CSV of color names and their hexadecimal RGB values. The React component uses the `useState` and `useEffect` hooks to fetch the data with `d3.csv` and store it in state, then renders SVG paths generated with `d3.pie` and `d3.arc` functions. Each slice of the pie chart is filled with its corresponding color, creating a dramatic circular spectrum that spans the full width of the 960x500 viewport. While loading, the app shows "Loading..." text until the data arrives.

Feb 20, 2023

Loading thumbnail…

Rendering Data with React

This example demonstrates how React can render data-loaded visual elements, displaying CSS named colors as horizontal color swatches fetched from a CSV file. The code uses React hooks like `useState` and `useEffect` to manage state and asynchronously load the data via D3’s `csv` utility. Once the data arrives, it maps each row to a colored `div` element, creating a stacked bar chart-like visualization. The rendering uses inline styles for background colors and SVG is not utilized, relying entirely on React’s virtual DOM for output.

Feb 20, 2023

Loading thumbnail…

Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting horsepower against weight while encoding country of origin by color and miles per gallon by point size. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render an SVG view. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is configured with custom axis styles and tooltips via vega-tooltip. The vega-lite-api’s method chaining defines the encoding and mark specifications.

Feb 20, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the fundamental process of loading and parsing CSV data using D3.js v5. It displays a summary of the CSS Named Colors dataset, showing the file size, row count, and column count in large text. The code uses `d3.csv()` to fetch and parse the remote CSV URL, then `d3.csvFormat()` to calculate the data size. It also includes commented-out alternatives using `fetch()`, `async`/`await`, and `d3.csvParse()` for comparison. The visualization communicates the structure and scale of the dataset through a simple textual output.

Feb 17, 2023

Loading thumbnail…

Mouse Follower

A single dark circle tracks the cursor’s movement across a 960×500 SVG canvas. The circle’s center is repositioned directly to the mouse’s client coordinates on every move event, using React state updates triggered by the SVG’s `onMouseMove` handler. Built with React and ReactDOM, the example renders purely through SVG elements, with the circle maintaining a constant radius of 30 pixels while following the pointer smoothly across the viewport. The code initializes the circle at the canvas center before any mouse activity occurs.

Feb 12, 2023

Loading thumbnail…

Smiley Face Pt 1

A grid of randomized smiley faces demonstrates how parameterized SVG components can be composed into a reusable face. Each face uses a yellow circle for the head, two circles for eyes, and a D3 arc-generated path for the mouth. The React app maps over a D3 range to render eighteen faces, varying stroke width, eye position, eye radius, and mouth dimensions via random values. The SVG is built with React components, and the mouth’s arc is created using d3.arc with inner and outer radii, achieving a half-circle smile.

Feb 11, 2023