Mohammed Banani | MbDev

Video Game Sales - TreeMap Diagram

A treemap visualization displays the top 100 most-sold video games grouped by platform, with each rectangular tile sized by sales value and colored by category. The interactive chart uses React for component structure and D3 v7’s `treemap` layout with the `treemapResquarify` tiling algorithm to partition the data hierarchy. A hover tooltip shows the game name, category, and sales figures, while a legend maps colors to platform categories. The visualization loads JSON data from the freeCodeCamp dataset and renders as SVG.

May 25, 2022

United States Educational Attainment - Choropleth Map

This choropleth map visualizes the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties, using data from the FreeCodeCamp education dataset. Counties are colored on a purple sequential scale, with gray indicating missing data. Built with React and D3 v5, the visualization uses `d3.geoPath` to render county boundaries from TopoJSON and `d3.scaleThreshold` to map education percentages to colors. A custom tooltip, implemented via global D3 selectors, displays county name, state, and value on hover, while a legend shows the threshold color scale.

May 25, 2022

scatter plot of the iris data set

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions across three species. Users can explore relationships between variables by dynamically selecting which attributes to plot on the X and Y axes through dropdown menus. The visualization uses D3 scales (scaleLinear, scaleOrdinal) and SVG rendering within a React framework. A color legend allows filtering by species, fading non-selected points via hover interactions. Data is loaded as CSV from a remote source using D3's csv function.

May 24, 2022

United States GDP [1947-2015] - Bar Chart

This bar chart displays the quarterly United States GDP from 1947 to 2015, with bars colored in a muted green that highlight on hover. The visualization uses D3 scales including scaleTime and scaleLinear to map dates and GDP values, while React components render the SVG elements. The chart includes axes with formatted ticks, a tooltip that appears on mouse hover showing the quarter and GDP value in trillions or billions of USD, and data loaded from a freeCodeCamp JSON source.

May 23, 2022

HIV choropleth map

This choropleth map visualizes the global share of the population infected with HIV in 2017, using a yellow-to-red sequential color scale to encode prevalence rates while gray indicates missing data. It renders countries as SVG paths using React and d3-geo, with a Natural Earth projection and graticules for geographic context. The map integrates topojson world atlas data with CSV data from the IHME, matching countries via ISO numeric codes.

May 19, 2022

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying key statistics about the CSS Named Colors dataset in a large text block. It first shows the resulting file size in kilobytes, row count, and column count. The implementation uses D3 v7’s `d3.csv` method to fetch the remote CSV from a GitHub gist, followed by `d3.csvFormat` to measure the data size. Alternative approaches using the Fetch API, async/await, and `d3.csvParse` are included as commented-out code for comparison.

May 19, 2022

Visualize Data with a Heat Map| fcc project-3

This heat map visualizes monthly global land-surface temperature anomalies from the freeCodeCamp ProjectReferenceData dataset, showing temperature variance across years and months. The visualization uses a color scale ranging from light blue to dark red to represent temperature deviations from the base temperature, with a legend indicating the temperature ranges. Built with React and D3 v7, the map uses `scaleLinear` for the x-axis (years), `scaleBand` for the y-axis (months), and SVG rectangles for each cell. Interactive tooltips display the exact year, month, temperature, and variance on mouse hover.

May 19, 2022

scatter plot with legend

This interactive scatter plot visualizes the Iris flower dataset, where users can select different attributes for the x and y axes via dropdown menus. The visualization displays the relationship between selected measurements, with each species represented by a distinct color. A native SVG legend allows users to hover over species names to highlight their corresponding data points while fading others. The visualization uses React components to build the SVG marks, axes, and legend, leveraging D3's `scaleLinear`, `scaleOrdinal`, and `extent` functions for data scaling and color mapping.

May 18, 2022

Visualize Data with a Scatterplot Graph | fcc project-2

This scatterplot graphs 35 fastest times up Alpe d'Huez, with orange and blue circles distinguishing riders with and without doping allegations. The visualization uses d3.scaleLinear for both axes, parsing race times into Date objects for the y-axis. Built with React and d3.v7, it renders SVG circles that trigger an HTML tooltip on mouse hover, displaying rider details from the freeCodeCamp cyclist-data.json dataset. A legend clarifies the color coding for doping status.

May 18, 2022

missing migrants chart

This chart visualizes the monthly totals of dead and missing migrants from the Missing Migrants Global dataset. A histogram displays aggregated counts over time, with a smooth natural curve line overlaid to highlight trends. The visualization uses React for component structure, D3 v7 for scales, binning, and SVG rendering, and includes interactive tooltips via `<title>` elements. The y-axis shows cumulative fatalities, while the x-axis represents the reported date.

May 16, 2022

Missing Migrants Log scales

A scatter plot of the Missing Migrants Dataset shows each reported incident as a circle, with the reported date on the x-axis and the total dead and missing count on a logarithmic y-axis. The visualization uses d3.scaleTime and d3.scaleLog to map the data, with SVG circles rendered via React components. Axes are drawn using custom AxisBottom and AxisLeft components that leverage d3's tick generation, while the data is loaded asynchronously from a CSV file using d3.csv.

May 14, 2022

Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, where each circle represents a single migration event, plotted by reported date on the x-axis and total dead and missing on the y-axis. The visualization uses React with D3 v5 scales and tick generators, rendering marks as SVG circles with hover tooltips showing the exact date. The y-axis uses a linear scale to show casualty counts, while the x-axis employs D3's time-based `scaleTime` for chronological ordering. Data is loaded asynchronously from a CSV file using D3's `csv` parser.

May 14, 2022

multiple views of map + chart D3/react

This visualization combines a natural Earth projection world map with a time-series bar chart to display global migrant fatalities. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render country boundaries and graticules, with circle sizes scaled by d3.scaleSqrt based on reported deaths. The histogram below aggregates monthly death totals using d3.bin and d3.timeMonths, drawing both bars and a smooth curve via d3.curveNatural. React manages the component structure, while data comes from a CSV of missing migrant incidents and TopoJSON world atlas boundaries.

May 13, 2022

missing migrants on a Map

This visualization maps missing migrant incidents worldwide using a natural Earth projection rendered with SVG via `d3.geoPath` and `d3.geoNaturalEarth1`. Circle marks, sized with `d3.scaleSqrt` based on the total dead and missing count, are positioned at incident coordinates, with graticules and land boundaries from the World Atlas TopoJSON. The React app loads CSV data from the Missing Migrants Project and displays tooltips via SVG `<title>` elements on each circle.

May 12, 2022

world map with points

This example visualizes global population distribution using a natural Earth projection, plotting cities as semi-transparent circles sized by population. The map renders SVG paths for land, graticules, and sphere outlines via `d3.geoPath`, while React hooks load world atlas TopoJSON and city CSV data, with `d3.scaleSqrt` mapping population to circle radii.

May 12, 2022

line chart with react and d3

This line chart visualizes temperature over time, using a smooth natural curve to connect data points from a CSV of weekly San Francisco temperatures. Built with React and D3 v5, the SVG rendering displays a time-scaled x-axis with day abbreviations and a linear y-axis for temperature, with data points as circles. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.curveNatural` to create the visualization.

May 12, 2022

scatter plot with menus polished

This interactive scatter plot lets users explore the Iris flower dataset by selecting which measured attributes (sepal length, sepal width, petal length, petal width) to plot on the x- and y-axes via dropdown menus. The visualization uses React with a functional programming style, rendering SVG circles through a custom `Marks` component. D3's `scaleLinear`, `extent`, and `scaleOrdinal` calculate the axes and color mapping for species. Axes are generated by custom `AxisBottom` and `AxisLeft` components, and each data point includes a tooltip via an SVG `<title>` element.

May 10, 2022

scatter plot with menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four measurements (sepal length/width and petal length/width). Two dropdown menus, built with React's useState hook and a custom Dropdown component, dynamically select which attributes map to the x-axis and y-axis. The visualization uses d3.scaleLinear for scales and d3.extent for domain calculation, rendering SVG circles with native `<title>` tooltips. Axes are generated manually through d3 scale ticks, with data loaded asynchronously via d3.csv.

May 10, 2022

Menus with React

This example demonstrates how to build interactive dropdown menus in React. It renders a pet selector with options for goldfish, dog, cat, and parrot, using React’s `useState` hook to track the selected value and update the UI on change. The `Dropdown` component maps over a hardcoded options array, creating `<select>` and `<option>` elements, with an initial value set to “cat.” The code uses React 16.9 and ReactDOM from unpkg, with the dropdown styled via CSS in the HTML file.

May 10, 2022

world map with react and d3

This example presents an interactive world map rendered with SVG using React and D3. It visualizes land masses, country interiors, graticules, and the sphere using `d3.geoNaturalEarth1` and `d3.geoPath`. Geographic data comes from the world-atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh` in a custom `useData` hook. The map uses distinct colors for land, interiors, and sphere, with a muted graticule overlay, all styled through CSS.

May 9, 2022

scatter plot with react and d3

This scatter plot displays the relationship between sepal length and sepal width from the classic Iris dataset, with each point representing a flower specimen. Built with React and D3 v5, the visualization renders as an SVG using `scaleLinear` for both axes, with `extent` computing the domains from the CSV data loaded via `csv`. The implementation separates axes and marks into reusable components, while a native SVG `<title>` element provides tooltip functionality.

May 7, 2022

Bar Chart with react and d3

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019, with a horizontal layout and axes for comparison. The visualization is built with React and D3 v5, rendering SVG elements via React components. It uses `scaleBand` for the categorical country axis and `scaleLinear` for the population scale, with formatted tick labels converting billions to “B” notation. The chart includes a bottom axis and left labels, styled with the Nunito font, and omits gridlines beyond the axis ticks.

May 7, 2022

Fork of Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using React hooks and D3 v5. It loads population data from a CSV file hosted on GitHub, sourced from the United Nations World Population Prospects 2019. The visualization uses `d3.csv` to fetch and parse data, `d3.scaleBand` for the y-axis positioning, and `d3.scaleLinear` for the x-axis scaling. Rendered as SVG, it includes gridlines and tick labels from `xScale.ticks()`, with bars drawn as `<rect>` elements and country names as `<text>` labels.

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a pathetic bar chart with no axes, using React and D3 v5. It renders SVG rectangles positioned with `d3.scaleBand` and `d3.scaleLinear` to map population values to widths. The data is loaded asynchronously from a CSV file via `d3.csv`, sourced from the United Nations World Population Prospects 2019. The chart updates with a loading indicator until the dataset arrives, and bars fill the full browser viewport.

Pathetic Bar Chart

This example visualizes the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset using a bar chart with no axes. Each country is rendered as an SVG rectangle, with its width proportional to its 2020 population value. The visualization leverages React for component structure and state management, while D3 v5 utilities like `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The bars are positioned vertically with no labels or ticks, emphasizing the raw proportions between countries.

Rendering data with d3 - react

A radial burst of color fills the browser window as a dataset of CSS named colors is loaded via `d3.csv` and rendered with React. Each color from the CSV becomes a wedge in a pie chart, using the `d3.pie` and `d3.arc` APIs to compute the SVG paths. The visualization demonstrates how D3's data-loading and geometry utilities can be combined with React’s declarative component model to produce a full-screen, SVG-based chart, with the pie centered at the viewport’s midpoint.

Vega-Lite API Template

A red-green-yellow horizontal bar chart visualizes the 2022 popularity share of programming languages, sourced from a CSV via `d3.csv`. Each bar is encoded using the Vega-Lite API’s `.markBar()`, with x-position sorted descending by share, y-axis representing percentage, and color mapped to language name. The visualization uses `vl.x().fieldN()`, `vl.y().fieldQ()`, and `vl.color().fieldN()` for encoding, with a tooltip on language. The rendered SVG, configured with custom axis and label styles from `config.js`, spans the full window, built with `vega-lite-api` and `vega-tooltip`.

May 5, 2022

loading data with d3 - react

This example demonstrates how to load and summarize CSV data in a React application using D3 v7. It fetches a CSS named colors dataset from a GitHub gist and displays the file size, row count, and column count in large text. The code uses React hooks `useState` and `useEffect` to manage asynchronous data loading via the `d3.csv` function, while a separate `message.js` module formats the summary using `d3.csvFormat` and `data.length`/`data.columns.length`. Output renders as SVG-sized text in a `<pre>` element.

May 4, 2022

circle that follows mouse move

A yellow circle follows the mouse cursor across a full-window SVG canvas. The React component tracks pointer position using the `onMouseMove` event and updates state via `useState` and `useCallback`, re-rendering the circle's `cx` and `cy` coordinates. The viewport dimensions are set from `window.innerWidth` and `window.innerHeight`.

May 4, 2022

loading and parsing CSV

This example demonstrates loading and parsing CSV data from a remote URL, specifically the CSS Named Colors dataset. It fetches the raw text file using the Fetch API within an asynchronous function and logs the parsed content to the browser console. The visualization itself is not rendered; instead, the focus is on the data acquisition and parsing pipeline, utilizing JavaScript’s `fetch` and `async`/`await` patterns to handle the HTTP request and text response.

Fork of Smiley Face Part II

Nineteen SVG smiley faces display in a grid, each with a randomly generated pastel background, offset eye positions, and a mouth drawn as a D3 arc path. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose the structure, while `d3.range` generates the count of faces and `d3.arc` creates the curved mouth geometry. Each face’s fill color results from a random hexadecimal value computed in the component code.

Fork of Fork of Smiley Face Part 5

A grid of 18 randomly generated smiley faces fills the viewport, each rendered as a scalable vector graphic with a light blue background circle, black-outlined eyes, and a mouth shaped by an arc generator. The code builds each face from reusable React components, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, and uses D3's `arc` API to compute the mouth path. Each face randomizes its eye radius and fill color using `Math.random` within the `App` component, while all faces share fixed dimensions and offsets.

Fork of Fork of Smiley Face Part II

A dynamic smiley face graphic fills the browser window using React and D3 v7, rendering SVG elements sized to the viewport. The face consists of three yellow and black circles for the head and eyes, plus an arc-generated mouth created with the `d3.arc()` API. Built with React 16.9, the component computes dimensions from `window.innerWidth` and `window.innerHeight`, then positions elements relative to the screen center. The mouth path is defined using `innerRadius`, `outerRadius`, and angular bounds from `Math.PI`, demonstrating a reusable D3 shape generator within a React component structure.