hasti khajeh

@hastikhajeh·9 public vizzes

Fork of Polished World Map

This example displays a map of U.S. states filled with a teal color, rendered as SVG paths inside a React component. It uses the `d3.geoAlbersUsa` projection and `d3.geoPath` to convert TopoJSON state boundaries from the `us-atlas` dataset into visible shapes. The map is drawn within a React app that loads the data asynchronously via `useEffect` and the D3 `json` function, while the `topojson.feature` API extracts the state geometries.

May 23, 2021

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map displays the share of the population infected with HIV/AIDS for the year 2017, using data from the IHME dataset. The visualization uses a sequential color scale with the YlOrRd interpolator, applied to states within the United States. Country boundaries and state interiors are rendered using d3.geoPath and TopoJSON, while the map projection is set to geoAlbersUsa. React manages the component state, loading data through custom hooks, and graticules are included for geographic context.

May 23, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between DenOutlets, DenOutdoorLights, and KitchenDenLights in kilowatts, using a scatter plot where each point’s color encodes the third variable. Built with the Vega-Lite API on top of D3 v5, it loads CSV data from a GitHub Gist and renders an interactive SVG chart with tooltips. The code uses `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` to encode fields, while `vega-tooltip` provides hover details. The visualization auto-fits to the window size with a custom config for axis styling and readability.

May 19, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a text-based summary of a CSV dataset loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count. The visualization uses React hooks to fetch and store the data with `d3.csv`, then displays the computed message. Built with React and D3 v6, the app renders the result as an SVG-rendered preformatted text element, with the `csvFormat` API calculating the data length and the `columns` property determining the column count.

May 19, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a minimalist text summary of the CSS named colors dataset, showing the file size in kilobytes, row count, and column count in a large monospaced font. It loads the CSV from a GitHub gist using d3.csv, then formats and calculates the dataset’s properties with d3.csvFormat and string length. The resulting message is injected into a pre element via textContent. The code also includes commented-out alternatives using fetch and d3.csvParse, highlighting the primary approach with D3’s promise-based CSV handling.

May 19, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of randomly generated cartoon faces, each with a yellow circular background, two eyes, and a half-circle mouth. The faces are rendered as SVG elements using React components. The code defines reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth drawn using the `d3.arc` API. A `range(18)` array from d3 generates eighteen faces, each with randomized stroke thickness, eye position, eye radius, and mouth dimensions, resulting in a playful variety of expressions.

May 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a static smiley face composed of three SVG circles: a large yellow filled circle with a black outline, and two smaller black circles for eyes. The component is rendered using React and ReactDOM, though the active visualization is created directly in the HTML file with hard-coded SVG attributes rather than through the commented-out React code. The page imports React 16.9.0 from a CDN and renders into a div with the id "root", while a separate SVG element appears in the body.

May 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-window smiley face using React and SVG. It displays a yellow circle with a black outline as the face, along with two solid black circles for eyes. The code uses React and ReactDOM to dynamically generate SVG elements, matching the drawing to the browser's viewport size based on `window.innerWidth` and `window.innerHeight`. All shapes are positioned relative to the center of the screen, with the face radius and stroke width derived from the window dimensions.

May 18, 2021

Loading thumbnail…

Fork of React Starter

This example displays a static “Hello React!” message centered on the page. It uses React 16.13.1 to define a functional component (`App`) that returns a `<div>` with the message class, and `ReactDOM.render` to mount that component into the `#root` element. The styling is applied via a CSS rule in the HTML file, setting the font size and text alignment. No external data or interactive behavior is present.

May 18, 2021