akiannejad123

@akiannejad123·6 public vizzes

United Nations Population Estimates

This visualization displays the top 10 countries by estimated 2020 population using a horizontal bar chart rendered as SVG. D3’s `scaleBand` and `scaleLinear` map country names and population values to screen coordinates, while React manages state through the custom `useData` hook, which loads the United Nations dataset via `d3.csv`. Axes ticks are generated with `xScale.ticks()`, and each bar’s width derives from the population value.

Apr 1, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and display a CSV dataset using React and D3. The application fetches world population data from a GitHub gist URL via `d3.csv` inside a React `useEffect` hook, storing the parsed result in component state with `useState`. While the data loads, a "RETRIEVING..." message appears. The code initializes `scaleBand` and `scaleLinear` scales for potential bar chart rendering, though the visualization itself is not completed. React 17 and D3 v6 are loaded from CDNs, with the app mounted into the root element via `ReactDOM.render`.

Mar 31, 2021

Loading thumbnail…

Fork of Rendering Data with React

This example renders a color wheel of CSS named colors using React and D3’s `arc` generator, with each color displayed as an annular sector. The visualization fetches color data from a CSV file via `d3.csv` and maps each record to a `<path>` element, sizing arcs based on index and angle. The SVG output is generated declaratively in JSX, while the arc geometry and color fill come from D3’s arc API and the hex values in the CSV. The code also includes stray Fibonacci scripts and unused smiley-face geometry, though these do not appear in the final render.

Mar 24, 2021

Loading thumbnail…

Rendering Data with React

This example renders an SVG visualization of CSS color names using React and D3. It loads a dataset of named CSS colors from a CSV file via `d3.csv`, then maps each color to an arc path using `d3.arc`. The arcs are arranged in a spiral pattern inspired by the Fibonacci sequence, with the colors displayed according to their hex values. The React component manages loading state and renders the SVG paths dynamically, demonstrating how to combine React’s component model with D3’s data utilities for declarative data-driven graphics.

Mar 24, 2021

Loading thumbnail…

Smily face part I

A smiling face made of SVG circles tracks the mouse cursor across a yellow background. The interactive visualization renders a black circular pupil that follows the pointer, while two white eye outlines and a grey-bordered yellow face remain fixed. Built with React and D3.js v6, the app uses React's `useState` and `useCallback` hooks to handle mouse movement events, updating the circle's `cx` and `cy` attributes. The SVG output is generated by React components for the background, eyes, and moving pupil.

Mar 24, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset. The scatter plot encodes miles per gallon on the x-axis, horsepower on the y-axis, color by origin, and point size by weight. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG chart. Data is loaded asynchronously via D3’s `csv` function, while the visualization code uses `vl.markCircle`, `.encode`, and `vl.x().fieldQ()` to define the marks and scales.

Mar 23, 2021