azharahmad0

HIV/AIDS Choropleth Map

A choropleth map visualizes the global share of the population infected with HIV/AIDS for 2017, encoding each country’s prevalence with a sequential yellow-to-red color scale. The map uses a natural Earth projection rendered as SVG via React, with `d3.geoPath` drawing country boundaries, graticules, and interiors. It loads TopoJSON world-atlas data, ISO country codes, and the HIV prevalence dataset through `d3.csv` and `d3.json`, coloring missing regions gray.

Mar 31, 2021

Missing Migrants on a Map

This example visualizes the locations and magnitudes of missing migrant incidents on a world map, with circle size encoding the total number of dead and missing individuals. Using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it renders landmasses, country borders, and graticules in SVG. Circles are positioned by projecting coordinate pairs and scaled with `d3.scaleSqrt`. The data is loaded from a CSV via `d3.csv`, while the world atlas comes from a TopoJSON file parsed with `topojson.feature` and `topojson.mesh`.

Mar 31, 2021

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants dataset, showing each reported incident as a circle positioned by date on the x-axis and the total dead and missing on a logarithmic y-axis. The visualization uses a log scale to accommodate the wide range of casualty counts, with hover tooltips revealing exact dates. Built with React and d3.v5, the code employs `scaleLog` for the y-axis, `scaleTime` for the x-axis, and SVG rendering for the marks and axes, with data loaded from a CSV using `csv()`.

Mar 30, 2021

Multiple views

This interactive visualization combines a bubble map and a histogram to explore data on dead and missing migrants worldwide. The map uses `d3.geoPath` with a natural Earth projection to render countries, while `d3.scaleSqrt` sizes circles proportionally to the number of casualties at each location. A bar chart below, built with `d3.scaleTime` and `d3.histogram`, aggregates the same data by month. The visualization is rendered in SVG using React, with data loaded from a CSV file via `d3.csv`.

migrant deaths over time

This bar chart shows the cumulative number of dead and missing migrants over time, aggregated monthly from a CSV dataset. The visualization uses React with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `histogram` to bin data by month, and `sum` to aggregate the death counts. SVG rectangles render the bars, with tooltips displaying the exact total for each month. The data is loaded dynamically via D3's `csv` function from a remote gist URL.

Points on a Map

This example displays a world map with points representing cities, with circle sizes scaled by population using a square-root scale. It shows a natural Earth projection with graticules and country boundaries overlaid. The visualization uses React to manage state and rendering, while D3 v5 provides `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. City data comes from a CSV file, and world geography is loaded as TopoJSON. Circles are semi-transparent teal, plotted via projected longitude and latitude coordinates.

Scatter plot of iris dataset

This scatter plot visualizes the iris dataset, displaying the relationship between petal length and sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v5 handling data loading, scaling, and axis generation through `csv`, `scaleLinear`, and `extent` utilities. Data is fetched from a CSV file stored on GitHub Gist. The chart depicts each flower as a circle, with x and y axes labeled, and a tooltip appearing on hover. The graph employs a Poppins font and a muted color scheme.

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the classic Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights all three Iris species, and hovering over a legend entry fades non-matching points while emphasizing the selected species. The visualization uses React and D3 v5, with D3’s `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG rendering. It demonstrates interactive filtering through React state management and mouse event handlers.

Scatter Plot with Color Legend

A scatter plot of the Iris dataset visualizes petal length against sepal width, with a categorical color legend encoding species. Each circle represents a flower, and hovering reveals its exact petal length via a native SVG `<title>` tooltip. The visualization is built with React components and D3 scales, using `scaleLinear` for axes, `scaleOrdinal` for colors, and `extent` for domains. Axes and legends are custom SVG components, rendered within a fixed 960×500 viewport with margins and labeled axes.

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each of the 150 flowers is represented as a colored circle, with color encoding species via d3.scaleOrdinal. The visualization is built with React and renders as SVG, using d3.scaleLinear for both axes and d3.extent to compute domains. Axes are custom components that generate tick marks and labels, while hover tooltips display petal length values using d3.format.

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attributes appear on the x- and y-axes via React dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data values to SVG circle positions, with custom axis components rendering tick marks and labels. The code also includes formatting utilities like d3.format for axis tick values and uses d3.csv to load the dataset from a GitHub gist.

Scatter Plot with Menus

A scatter plot with dropdown menus for exploring the iris dataset, allowing interactive selection of the attributes plotted on the x and y axes. The visualization uses React with D3 v5’s `scaleLinear` and `extent` functions for scaling and axis generation, rendering SVG circles as marks. The dropdowns update the selected attributes via state management, triggering re-renders of the axes and data points. Data is loaded from a remote CSV file using D3’s `csv` function.

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet, with the current choice displayed in the browser console. The app uses React’s `useState` hook to manage the selected value and a custom `Dropdown` component that renders an HTML `<select>` element. It incorporates the D3.js library (v6) for potential data handling, while React 16.9 handles the interface. The dropdown options are predefined in a JavaScript array, and the selection updates dynamically as users interact with the menu.

React starter code.

This example demonstrates a minimal integration of React with D3, rendering a simple `<div>` with the text “hi”. The code imports React and ReactDOM to mount the `App` component into the DOM’s `#root` element, while also importing the `arc` function from d3 to show how D3 modules can be included. The page loads React 16.9, ReactDOM, and D3 v6 via CDN, with CSS setting the body margin to zero and hiding overflow. It serves as a starter template for combining React’s declarative UI with D3’s visualization utilities.

World map

This example displays a world map using an equal-area natural Earth projection. The map visualizes country landmasses in a teal color, with interior borders in a lighter tone and graticule lines representing the coordinate grid. The visualization is built with React and renders SVG paths generated by D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions, using TopoJSON data from the world-atlas package to derive land and interior boundaries.

Stylised Line Chart

This stylised line chart displays temperature over time for a week in San Francisco, with a smooth natural curve connecting circular data points. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the CSV data, while `line` with `curveNatural` creates the curved path. SVG renders the axes, gridlines, and color-coded marks, with native `<title>` elements providing hover tooltips formatted via `timeFormat`.

Scatter plot, temperature over time.

A scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization uses React with D3 v5’s `scaleTime` and `scaleLinear` to map data points, rendered as SVG circles. Each circle includes a tooltip showing the day of the week. Data is loaded asynchronously from a CSV file via the `csv` function.

Stylised Bar Chart

This stylised bar chart displays the top ten countries by population, using a D3 scaleBand and scaleLinear to map categorical country names and quantitative population values onto SVG rectangles. The React application loads CSV data from a GitHub gist via D3’s csv utility, formats tick labels with D3’s format function (converting “G” to “B”), and renders custom SVG axes and marks. Styled with the Poppins font and teal marks, the chart includes interactive tooltips that show the exact population on hover.

Refactored Bar Chart

A horizontal bar chart displays population estimates for the ten most populous countries in 2020, sourced from UN population data loaded as CSV via `d3.csv`. The React app uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles through reusable `AxisBottom`, `AxisLeft`, and `Marks` components that map over scales and accessor functions.

Axes with React & D3

This example presents a horizontal bar chart of the top ten most populous countries for 2020, rendered as SVG via React. It uses D3 v5 utilities (`d3.csv`, `scaleBand`, `scaleLinear`, `max`) to load and transform data from a GitHub-hosted CSV, then draws axes and bars with JSX elements. The x-axis ticks are generated from the linear scale, while y-axis labels align with band positions, all translated inside a margin group.

The Margin Convention

This example displays a horizontal bar chart of the ten most populous countries in 2020, with each bar’s length proportional to its population. The visualization uses React to render SVG rectangles, while D3 v5 utilities (`d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.max`) handle data loading and scaling. The data originates from a UN population CSV fetched via URL. The chart defines margins for the plotting area, translating the SVG group accordingly to position bars within the inner dimensions.

World Population Prospects Visualisation

This example shows a horizontal bar chart of the top ten countries by population in 2020. It loads UN population data via `d3.csv`, transforms the numeric population column, and sorts by filtering the first ten rows. The visualization uses React with `useState` and `useEffect` to fetch data asynchronously, while D3's `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles. The chart renders as a clean, unlabeled bar list against a white background using ReactDOM.

Rendering Data with React and adding D3 Arcs

This example renders CSS named colors as a pie chart, with each slice filled by its corresponding RGB hex value. Using React hooks to fetch and store data from a CSV file, the chart leverages D3’s `pie` generator to compute angles and the `arc` generator to draw SVG paths. The data source is a gist containing named colors, and the visualization updates once the asynchronous CSV load completes. While React handles the component lifecycle and rendering, D3 provides the geometric calculations, demonstrating a clean separation between data-driven layout and UI logic.

Rendering Data with React

This example renders the 148 CSS named colors from a CSV file as a vertical stack of horizontal color swatches. The React component uses the `useState` and `useEffect` hooks with D3’s `csv` method to load the data asynchronously, showing a “Loading…” message until the fetch completes. Once loaded, the app maps each data row to a `<div>` whose background color is set to the hex value from the CSV, with dimensions of 960 by 4 pixels. The visualization demonstrates a simple, declarative approach to binding data to SVG-like DOM elements using React’s rendering model.

Loading data with react & d3

This example demonstrates how to load external CSV data with d3.csv and manage it through React state. It displays a text summary showing the dataset’s row count, column count, and approximate file size in kilobytes. The visualization uses React hooks (useState and useEffect) to fetch and store the data, while the d3.csv utility retrieves the named colors from a GitHub gist. The result renders as plain text in a pre element using ReactDOM.

Loading and parsing CSV data.

This example demonstrates the basic mechanics of loading and parsing a remote CSV file using D3.js. It fetches a dataset of CSS named colors from a GitHub gist and reports three key metrics: the total number of data rows, the number of columns, and the approximate file size in kilobytes. The code uses the `d3.csv` method to retrieve and parse the data, then leverages `d3.csvFormat` to measure the formatted output's size. Results are displayed as large text within a styled `<pre>` element using D3 v6.

Vega-Lite API Template

This example presents a horizontal bar chart of population by country, with bars colored by religion and tooltips displaying the religion attribute. It is built using the Vega-Lite API along with Vega, Vega-Lite, and D3’s CSV loader, rendering to SVG via Vega’s view system. The chart fetches data from a GitHub-hosted CSV file and configures axes and label styling through a shared configuration object.

Mar 21, 2021

Mouse Follower

A single black circle follows the mouse cursor across an empty SVG canvas. The circle's position is updated in real time as the cursor moves, using React's `useState` and `useCallback` hooks to track `clientX` and `clientY` coordinates. The example renders with `ReactDOM.render` and imports `arc` from D3 v5, though the visible output is purely a responsive circle.

Mar 21, 2021

Fork of Smiley Face Part IV

A grid of randomized smiley faces is rendered as React components, each face generated with slightly different eye positions, mouth curvature, and stroke thickness using D3's `arc` generator for the mouth path. The `Face` component composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, all rendered as SVG elements via React's JSX. D3's `range` function creates eighteen faces, and `Math.random` varies each face's visual properties, while the overall layout is fixed rather than data-driven.

Mar 17, 2021