K

Keyvan Rezaei

@Keyvan-RezaeiF·22 public vizzes

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale applied to country boundaries from the World Atlas Topojson. Built with React and D3 v5, the code uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.geoGraticule for grid lines, and d3.csv to load HIV prevalence data from the IHME dataset. Missing countries are rendered in gray, with country codes matched via the ISO-3166 repository.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

Loading thumbnail…

Fork of Polished World Map

This example displays a map of U.S. states, rendered as outlined polygons using React and SVG. The map uses the `geoAlbersUsa` projection from D3 v5 and draws state boundaries with `d3.geoPath`. Geographic data is loaded from the U.S. Atlas TopoJSON, converted via the `topojson.feature` API, and styled with a teal fill on a light gray background. Although the README mentions world country boundaries and graticules, the current code focuses solely on U.S. state shapes.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale applied to country boundaries from the World Atlas Topojson. Built with React and D3 v5, the code uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.geoGraticule for grid lines, and d3.csv to load HIV prevalence data from the IHME dataset. Missing countries are rendered in gray, with country codes matched via the ISO-3166 repository.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

A choropleth map displays the share of the population infected with HIV/AIDS for 2017, using a yellow-to-red sequential color scale. The visualization uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and a sphere. Data from the IHME is merged with ISO country codes via `d3.csv`. Missing countries appear gray. The map is built with React and D3 v5, rendering as SVG with `scaleSequential` and `interpolateYlOrRd` for color encoding.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale applied to country boundaries from the World Atlas Topojson. Built with React and D3 v5, the code uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.geoGraticule for grid lines, and d3.csv to load HIV prevalence data from the IHME dataset. Missing countries are rendered in gray, with country codes matched via the ISO-3166 repository.

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is rendered as an SVG inside a React application. The code uses D3's `arc` generator to create the mouth shape, while the face and eyes are simple SVG circles with a black stroke. The visualization demonstrates a hybrid approach, combining React for declarative component structure with D3 for calculating complex geometric paths. No data is involved, representing a purely programmatic illustration of drawing with vector graphics.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between microwave and office lighting power consumption, using a semi-transparent line mark to reveal density patterns in the data. The visualization is built with the Vega-Lite API, which translates specifications into Vega and renders as SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, with the plot dimensions automatically fitting the browser window. Visual styling for axes and labels is customized through a separate configuration object, and interactive tooltips are enabled via the vega-tooltip handler.

Loading thumbnail…

Fork of Vega-Lite API Template

This example, built with the Vega-Lite API wrapper for Vega and Vega-Lite, displays a scatter plot of automobile efficiency data. The visualization encodes engine displacement, horsepower, origin, and weight as position, color, and size for each circular mark. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset, loaded as CSV via d3.csv. The chart uses configured axis styling and a tooltip handler, rendering through Vega’s SVG output.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, where each circle represents a vehicle’s origin and horsepower, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, with D3.js (d3.csv) loading data from the UCI Machine Learning Repository’s Auto MPG dataset. The code registers Vega, Vega-Lite, and Vega-Tooltip, applies a custom configuration for axis and label styling, and renders the plot as an SVG that fits the browser window.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

Loading thumbnail…

Loading Data with React & D3

This example shows a React component that asynchronously loads a CSV file of CSS named colors and displays a message summarizing the loaded data. The visualization uses `useState` to manage the loading state, and calls `d3.csv` to fetch and parse the data from a remote URL. Once loaded, the message reports the approximate file size in kilobytes, the number of rows, and the number of columns. The interface is rendered with React DOM, using a large monospaced `<pre>` element for the text output.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics about a CSV file containing CSS named colors, including file size, row count, and column count, rendered as large text in the browser. It loads the dataset from a GitHub Gist URL using `d3.csv` and parses it with `d3.csvFormat` to compute the size. The code also demonstrates an alternative approach using the Fetch API and `d3.csvParse` in an async function. All output is shown in a `<pre>` element via the Document Object Model (DOM).

Loading thumbnail…

Fork of Mouse Follower

An interactive React application renders an SVG circle that tracks the mouse cursor across a 960×500 viewport. The component uses React’s `useState` and `useCallback` hooks to update the circle’s `cx` and `cy` attributes on every `onMouseMove` event, reading coordinates from `clientX` and `clientY`. The circle has a fixed radius of 30 pixels and starts at the viewport’s center. This minimal example demonstrates state-driven SVG positioning with React and ReactDOM.

Loading thumbnail…

Fork of Mouse Follower

A React component renders an SVG circle that follows the mouse cursor across a 960x500 viewport. The circle's center coordinates are updated through React's `useState` hook and an `onMouseMove` event handler, which captures the `clientX` and `clientY` positions. The app initializes the circle at the viewport center and redraws it with a constant radius of 30 pixels on every mouse movement, using React DOM to mount the component into the page.

Loading thumbnail…

Fork of Mouse Follower

An interactive React application renders an SVG circle that tracks the mouse cursor across a 960×500 viewport. The component uses React’s `useState` and `useCallback` hooks to update the circle’s `cx` and `cy` attributes on every `onMouseMove` event, reading coordinates from `clientX` and `clientY`. The circle has a fixed radius of 30 pixels and starts at the viewport’s center. This minimal example demonstrates state-driven SVG positioning with React and ReactDOM.

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated cartoon faces, each rendered as a yellow circle with black outline, two eyes, and an arched mouth. The example uses React to instantiate multiple `Face` components, each composed of `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, which build SVG elements. The `Mouth` component leverages d3’s `arc()` API to compute the path for a smile, with randomized dimensions for facial features.

Loading thumbnail…

Fork of Smiley Face Part II

A full-window smiley face is rendered as a scalable vector graphic, with a yellow face, two black eyes, and a missing mouth. The face automatically centers and scales based on the browser window’s dimensions using React components. The code uses React and ReactDOM to create SVG circles, positioning them with computed offsets for the eyes and calculating the face radius from the window height. The implementation relies on JSX to define the SVG elements and a `<g>` transform for central placement.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a smiley face made of overlapping SVG circles inside a React application, with a yellow outer circle for the head and two smaller black circles for the eyes. The code loads React and ReactDOM from a CDN, embeds the face directly in the HTML’s SVG markup, and also runs a React render call using `ReactDOM.render` with the `StrictMode` and `App` components. It relies on static SVG circle elements without any interactive or animated behavior.

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is drawn as three static SVG circles within a React application. The code creates a yellow head with black stroke and two dark eye circles, but no mouth is defined. The implementation uses React 16.9 via UMD builds from unpkg, rendering directly to the DOM through `ReactDOM` and JSX-like elements, though the HTML also includes a pre-rendered SVG fallback. The example demonstrates minimal SVG integration with React without any interactive behavior or data-driven features.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a classic smiley face as a single static SVG graphic using React. The drawing consists of three circles: a large yellow face with a black stroke, and two smaller black circles for eyes. The code defines the SVG dimensions and circle attributes directly in the markup. It uses React 16.9.0 and ReactDOM to inject the SVG into the page, with the rendering based on fixed coordinates and styles.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” in a large, centered font, demonstrating a minimal setup for web-based visualization. It combines inline CSS for styling and JavaScript for console interaction, logging “Hello JavaScript!” when the page loads. The page relies on no external libraries, using only the browser’s native HTML, CSS, and JavaScript APIs to illustrate a basic structure for further development, as referenced by its companion React starter example.