A

Abdul Salam Almadani

@dralmadani·51 public vizzes

Loading thumbnail…

Largest Cities by population in 2020

This chart displays the 100 largest U.S. cities by population in 2020, with blue circles sized using a square-root scale and colored by population. It uses D3’s `geoAlbers` projection to render state boundaries via `geoPath`, then overlays city locations as `circle` elements positioned through the same projection. City population data comes from a CSV hosted on GitHub, and the underlying map uses the `us-atlas` states-10m GeoJSON. The visualization is built with React and SVG.

Loading thumbnail…

Largest Cities by population in 2020

This visualization displays the largest U.S. cities by 2020 population as scaled circles overlaid on a map of state boundaries. The map uses the `geoAlbers` projection and `geoPath` to render the states, while circle radii are determined by a `scaleSqrt` function based on population values. City coordinates are projected from latitude and longitude using the same projection. The example is built with React and D3 v5, sourcing city data from a CSV file with population and coordinates, and state boundaries from the us-atlas TopoJSON dataset.

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map with a time-series histogram to explore migrant deaths reported between 2014 and 2019. The map displays circles sized by the total dead and missing, while the histogram sums the same metric by month. Brushing on the histogram filters the map’s circles to show only data within the selected date range. The visualization uses React for state management and rendering, alongside D3 APIs such as `geoNaturalEarth1` for projection, `geoPath` for map geometry, `scaleSqrt` for circle sizing, `bin` for histogram creation, and `brushX` for the interactive linking between views. Data comes from the Missing Migrants Project.

Loading thumbnail…

Largest Cities population in US 2020 with menu

A bar chart displays 2020 population data for twenty U.S. cities, with a dropdown menu to switch the x-axis metric among rank, population, density, and land area, and a second menu to toggle the y-axis between city name and state. The visualization uses React for component rendering, D3 v5 for scales and data loading via `d3.csv`, and SVG elements for the chart. Data originates from World Population Review, loaded from a GitHub gist, with bars colored blue and tooltips showing population values.

Loading thumbnail…

Largest Cities population in US 2020

This bar chart displays the populations of the top ten largest U.S. cities in 2020, allowing quick comparison of their relative sizes. The quantitative population values are encoded as bar lengths on a linear scale, while the categorical city names are listed along the vertical axis. Built with React and D3 within the v5 framework, the SVG visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data sourced from World Population Review.

Loading thumbnail…

The total number of skyscrapers in each country

This bar chart displays the total number of skyscrapers (buildings over 100 meters) per country, using a bar for each country with the bar height representing the count and a color encoding for the city. The visualization is built with the Vega-Lite API, using `markBar` and a groupby transform to aggregate the data by country. It loads data from a CSV file containing city-level skyscraper counts and uses the `vl` library with Vega-Lite’s specification to render the chart, with tooltips showing the city and its building count.

Loading thumbnail…

The number of completed highest structures in the world cities

This histogram shows the total number of completed buildings in world cities, binned by the year each city first completed a building taller than 150 meters. The chart uses D3’s `scaleTime`, `histogram`, and `timeYears` functions to bin the data, with React components for rendering the axes and marks as SVG rectangles. The data is loaded via `d3.csv` from a GitHub gist, and each bar represents the sum of all buildings across cities in that year range, with hover tooltips showing exact counts.

Loading thumbnail…

Project:Multiview for Cities Ranked by Number of skyscraper Completed Structures

This multiview visualization combines a world map with a time-series histogram to explore cities ranked by the number of completed skyscraper structures over 100 meters tall. The map uses d3.geoNaturalEarth1 projection and geoPath to render land, graticules, and triangular markers whose height reflects building counts and color encodes rank, with hover tooltips showing city details. A linked d3.brushX histogram beneath displays annual building completions, filtering the map to selected date ranges. Data comes from a CSV of city statistics, with country boundaries from World Atlas TopoJSON, all rendered as SVG within a React framework.

Loading thumbnail…

Total Departure Delay for every hour of the day

A histogram displays total departure delay in minutes for each hour of the day, sourced from a flight delay analysis dataset. Built with React and D3 v5, it uses `scaleLinear` for axes and D3's `histogram` binning to aggregate delays by scheduled departure hour, rendering as SVG rectangles. Axis ticks are formatted to show clock hours via `timeFormat`. The chart reveals which hours accumulate the most cumulative delay, aiding in identifying peak delay periods.

Loading thumbnail…

Map of Cities Ranked by Number of Completed Structures

This interactive map depicts cities ranked by their number of completed structures, with each city represented by a triangular marker whose height corresponds to building count and color to rank. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country boundaries from World Atlas TopoJSON, while city data comes from a CSV of ranked structures. The visualization employs `scaleLinear` for height scaling and `scaleOrdinal` with HCL color interpolation, displaying tooltips on hover.

Loading thumbnail…

Multiview for Cities Ranked by Number of skyscraper Completed Structures with improve performance optimaization

This interactive visualization combines a world map with a time-series histogram to explore skyscraper construction across cities. The map displays each city as a triangular mountain, with height encoding the total number of completed structures over 100 meters, while color distinguishes countries. A brushable histogram below filters cities by the date of their first building over 150 meters. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for the map, `scaleLinear` for heights, and `brushX` for interactive filtering. Data comes from a CSV of city building counts with coordinates added manually.

Loading thumbnail…

like submistion: Multiview for Cities Ranked by Number of skyscraper Completed Structures

This multiview visualization ranks cities by the number of completed skyscraper structures, using a global map where each city is marked by a triangular "mountain" whose height corresponds to the total building count and whose color distinguishes the country. A time-series histogram below aggregates the total number of buildings by the year the first 150-meter structure was completed. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while the histogram employs d3.scaleTime, d3.scaleLinear, and d3.histogram for binning. Data comes from a CSV of city building counts, with country boundaries from the World Atlas TopoJSON.

Loading thumbnail…

05_D3 Stock show

This example animates a small multi-line stock chart, showing three fictional symbols (AIC, Mada, VIZ) over time. The animation initially draws each line progressively, then transitions into a “horizon” view, where each series is stacked and colored to show its magnitude and direction. The code uses d3.csv to load the data, d3.nest to group by symbol, and d3.svg.line and d3.svg.area to define the shapes. Animated transitions are driven by d3.timer and the transition method, with SVG elements for rendering.

Loading thumbnail…

People affected by mental diseases over the years in American Countries - 2

This interactive chart displays the percentage of a population affected by a selected mental health disorder for a chosen American country over time. Using D3 and React, the visualization plots a single line for the selected country. The chart includes dropdown menus to filter the data by country and disorder type. A dedicated `useData` function loads a CSV file from a Gist, and the line mark is rendered as an SVG path using d3’s `line` and `curveNatural` functions. The data is sourced from the Gist dataset mentioned in the README.

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization presents migrant deaths across a world map, using a bubble map where circle size encodes the total dead and missing, and a linked time-series histogram of the same data. Users can brush the date histogram to filter the map to show only incidents within that time range. The implementation uses React with `useMemo` and `useEffect`, D3 v5 modules like `geoNaturalEarth1`, `geoPath`, `geoGraticule`, `scaleSqrt`, `scaleTime`, and `brushX`, rendering to SVG. Data comes from a CSV of Missing Migrants Global records.

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map with a time-series bar chart to explore urban building density data. Users brush over the date histogram to filter cities on the map, with circles sized by total building counts via d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses and graticules from World Atlas TopoJSON. React’s useMemo optimizes rendering, while d3.brushX links the two views for fast, responsive filtering.

Loading thumbnail…

Total Departure Delay for every hour of the day

A histogram displays the total departure delay in minutes across the scheduled departure hour of the day. The chart reveals which hours have the highest cumulative delays, with data sourced from a Flight Delay Analysis Dataset. The visualization uses React with D3 v5, applying `d3.bin`, `scaleLinear`, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render SVG rectangles and axes. Bars are colored teal, and each includes a tooltip title showing the delay value and hour.

Loading thumbnail…

Bar chart #2 the margin convention

This bar chart displays the populations of the top 10 largest U.S. cities in 2020, loaded from a CSV file using D3’s `csv` utility. The visualization demonstrates the margin convention, using React to render an SVG with axes and bars scaled by `d3.scaleBand` and `d3.scaleLinear`. Gridlines and tick labels are generated from `yScale.ticks()`, while city names are rotated along the bottom axis.

Loading thumbnail…

Multiple view _Largest Population in the USA

This interactive visualization presents population data for U.S. cities in 2020, using a bar chart where each bar represents a state and the y-axis shows the population values. The chart uses color to differentiate individual cities within each state, and a tooltip reveals the city name and its 2020 population. The visualization is built with the Vega-Lite API for D3, loading data from a CSV file that includes longitude and latitude coordinates. It encodes the state on the x-axis, population on the y-axis, and city as the color field, with the data source being the World Population Review.

Loading thumbnail…

Largest Population in the USA

This visualization displays the largest cities in the USA by 2020 population using a bar chart, where each bar represents a state and shows population values on the y-axis, colored by individual city. The data comes from World Population Review via a CSV hosted on GitHub. Built with D3.js and Vega-Lite, it uses the API’s `markBar` and `encode` methods to map city and state fields, with tooltips revealing population and city names. The chart is configured with custom styling for readability, including dark text and light gray axis ticks.

Loading thumbnail…

Largest cities in the USA

This visualization displays the largest cities in the USA by 2020 population, with each city represented as a semi-transparent circle scaled by population size on a world map. The map includes land boundaries, country interiors, and graticules, all rendered as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection. Cities are plotted by latitude and longitude coordinates using `d3.scaleSqrt` for circle radii. Data comes from a CSV of city populations, while country shapes use TopoJSON from World Atlas, with React managing the component state and D3 fetching the data.

Loading thumbnail…

Fatal Police Shootings Working Copy

This interactive visualization maps fatal police shootings across the United States, using semitransparent red circles to reveal clusters of incidents and highlight regions with higher event density. The application loads CSV data from the Washington Post’s Fatal Police Shootings database and renders it atop state boundaries from a TopoJSON atlas. Built with React and D3 v5, it uses d3.geoAlbersUsa for projection and d3.geoPath to draw the geographic features, encoding each shooting as a small circle positioned by its longitude and latitude.

Loading thumbnail…

Pollution in US with counties by React and d3

This choropleth map displays PM2.5 air pollution concentrations across US counties for the year 2000, with counties lacking data rendered in grey. Built with React and d3.v5, the visualization uses `d3.geoIdentity` and `d3.geoPath` to project county boundaries from a TopoJSON atlas, while a `d3.scaleSequential` with an `interpolateYlGnBu` color scheme encodes pollution values. The data originates from a CSV file of county-level PM2.5 measurements, filtered through a custom React hook and passed as a Map to the SVG marks component.

Loading thumbnail…

Largest cities in the USA

This visualization displays the largest cities in the USA by 2020 population, with each city represented as a semi-transparent circle scaled by population size on a world map. The map includes land boundaries, country interiors, and graticules, all rendered as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection. Cities are plotted by latitude and longitude coordinates using `d3.scaleSqrt` for circle radii. Data comes from a CSV of city populations, while country shapes use TopoJSON from World Atlas, with React managing the component state and D3 fetching the data.

Loading thumbnail…

Centered US Map

This map of the United States uses an Albers equal-area projection to display state boundaries and the national border, overlaid on a sphere and graticule for context. The visualization is built with React and D3 v5, using `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` to render the geographic features as SVG paths. State data originates from the US Atlas TopoJSON, with outlines colored distinctly from the land and sphere fill, and the map is generated from TopoJSON topology for state interiors.

Loading thumbnail…

07_task_1_2__project_menu_ Largest Cities population in US 2020

This interactive bar chart visualizes the population of the top ten largest U.S. cities in 2020, using data from World Population Review. Users can explore the relationship between city attributes by selecting different quantitative measures (such as population or land area) for the x-axis and categorical variables (city or state) for the y-axis via dropdown menus. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical axis, `scaleLinear` for the quantitative axis, and renders bars as SVG `<rect>` elements with tooltips showing the city, state, and value.

Loading thumbnail…

07_project_task_1_Draft_Largest Population in the USA

This bar chart visualizes the population of the largest US cities in 2020, grouped by state. It shows the top 200 cities, highlighting which states have the most large cities and their population magnitudes. The visualization uses Vega-Lite API with d3.csv to load the data, encoding the state on the x-axis, population on the y-axis, and city as the color field.

Loading thumbnail…

06_ menu with Largest Cities population in US 2020

This interactive bar chart displays the top ten largest U.S. cities by population in 2020, sourced from World Population Review data. Users can toggle the x-axis between population figures from 2020 or 2010, and the y-axis between city name, rank, state, or postal abbreviation. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG rectangles and dropdown menus controlling the attribute selections.

Loading thumbnail…

05_01_Visualization Refactoring, Largest Cities population in US 2020

This bar chart displays the population of the top ten largest US cities in 2020, using a horizontal bar layout where the city name appears on the y-axis and the population count on the x-axis. The visualization uses d3.v5 utilities to load and scale the data, with React components rendering the SVG marks and axes. The chart helps viewers compare population sizes across the ten most populous cities, sourced from World Population Review data.

Loading thumbnail…

menus with react

This example shows a simple interactive menu built with React. It displays a dropdown select element with six labeled options, and the currently selected value is printed to the console. The code uses React’s `useState` hook to manage the selected value, and a reusable `Dropdown` component that renders the `<select>` and `<option>` elements. Styling is applied via inline CSS in the HTML file, and the app is mounted to the DOM using `ReactDOM.render`. The component accepts `options`, `id`, `selectedValue`, and an `onSelectedValueChange` callback to handle user input.

Loading thumbnail…

05_Mathematical Graphic Patterns

This animated canvas visualization generates shifting mathematical graphic patterns from a procedural grid of circles. Based on tutorial code from MIT, it uses raw Canvas 2D API calls like `getContext('2d')`, `fillRect`, and `arc` to render the motion. A `requestAnimationFrame` loop updates time parameters, causing sinusoidal positions, radii, and RGB color values to oscillate continuously, creating a dynamic, kaleidoscopic effect. The embedded dataset of angular and value pairs influences the pattern’s underlying structure, though the visual output is entirely algorithmic rather than data-driven.

Loading thumbnail…

Mouse Follower with d3_01

A single SVG circle responds to mouse movement across the display, with its center position updating to the cursor’s client coordinates via React state and the `onMouseMove` event handler. The visualization uses D3 v6 for its selection utilities while rendering through React’s declarative component model, with the circle’s `cx` and `cy` attributes driven by the `mousePosition` state. The example demonstrates real-time interaction mapping between pointer location and SVG geometry without additional data sources.

Loading thumbnail…

05_02_ Stylized, Largest Cities population in US 2020

This visualization displays the top ten largest U.S. cities by 2020 population as horizontal bars, with city names on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, while D3 utilities (`scaleBand`, `scaleLinear`, `csv`, `format`) handle data loading, scaling, and axis formatting. Population data comes from World Population Review, loaded via `d3.csv` from a gist. Each bar includes a tooltip showing the population value and state abbreviation. The visualization emphasizes the relationship between city name and population, with bars colored in a consistent blue tone.

Loading thumbnail…

Largest Population in the USA

This visualization displays the largest cities in the USA by 2020 population using a bar chart, where each bar represents a state and shows population values on the y-axis, colored by individual city. The data comes from World Population Review via a CSV hosted on GitHub. Built with D3.js and Vega-Lite, it uses the API’s `markBar` and `encode` methods to map city and state fields, with tooltips revealing population and city names. The chart is configured with custom styling for readability, including dark text and light gray axis ticks.

Loading thumbnail…

03_02 Draft for Heart Attack possibility

This scatter plot explores factors linked to heart attack risk, plotting age against maximum heart rate achieved. Each point’s color indicates the patient’s gender, with opacity revealing overlapping points. The visualization uses the Vega-Lite API with D3.js to render interactive marks, pulling data from a UCI Heart Disease dataset. Tooltips display precise values for age and heart rate, aiding in pattern identification across demographic groups.

Loading thumbnail…

Data set on Heart attack possibility

This visualization plots serum cholesterol against resting blood pressure, with each point representing a patient from the Heart Disease UCI dataset. Circle size encodes age, while color distinguishes gender, and tooltips reveal heart attack risk classification. Built with Vega-Lite and D3.js, the scatterplot uses quantitative scales for both axes and nominal color encoding for sex, drawing data from a CSV fetched via d3.csv.

Loading thumbnail…

Draft Heart attack dataset

This scatterplot uses a heart disease dataset from Kaggle to explore the relationship between maximum heart rate achieved and resting electrocardiographic results, with age on the vertical axis. Each circle represents a patient, colored by gender. The visualization is built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, `extent`, and `format` from D3, with SVG rendering via custom `AxisBottom`, `AxisLeft`, and `Marks` components. Axes are drawn with D3’s tick generation, and hovering shows tooltips via SVG `<title>` elements.

Loading thumbnail…

Total Number of Rockets Throughout The Years

This visualization displays the count of heart attack cases by target status, distinguishing between patients with a lower or higher chance of a heart attack. The bar chart uses a dark color scheme from a custom config object, with the y-axis labeled “heart attack” and color encoding the target field. It reads heart disease data from a CSV file via `d3.csv`, then aggregates and counts occurrences using Vega-Lite’s `groupby` and `aggregate` transforms. The chart is rendered with Vega-Lite API and Vega, configured to fit the full viewport.

Loading thumbnail…

Covid-19 total number of death in each Country

This bar chart displays the total number of COVID-19 deaths attributed to each country, with the height of each bar representing the cumulative death count and the color encoding the country name. The visualization aggregates the raw daily data using a `groupby` transformation in Vega-Lite, which counts the number of reported deaths per location. The resulting chart is rendered through the vega-lite-api, which leverages D3 for SVG output, and the underlying data is loaded via D3’s `csv` function from a GitHub-hosted CoronavirusDailyData file.

Loading thumbnail…

Covid-19 Total Number of death caused

A bar chart shows the total number of COVID-19 deaths per country, with each bar’s height and color mapped to the `total_deaths` field and bars sized by the same value. Using the Vega-Lite API, the visualization groups the raw data by `location` and encodes death counts on the y-axis, with tooltips revealing exact values. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV (originally from Data World), and the chart is rendered with Vega-Lite’s mark-bar, using a custom config for axis styling.

Loading thumbnail…

02_Covid-19 Daily data

This example displays basic metadata about the COVID-19 daily dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a large pre-formatted text block. The visualization loads a CSV file from a remote GitHub gist using `d3.csv` and formats the data with `d3.csvFormat` to compute the byte size. It uses D3 v5 and is limited to textual output, providing a quick summary of the dataset's structure rather than a graphical chart. The data covers daily COVID-19 cases and deaths per country from December 2019 to September 2020.

Loading thumbnail…

02Data for Corona Virus Daily data Covid-19

This example displays basic metadata about a COVID-19 daily dataset, showing the file size, row count, and column count. The code loads the CSV file from a GitHub gist using `d3.csv`, then computes and displays these three values in an HTML pre element. The dataset, sourced from Data World, contains daily case and death figures with attributes like new cases, total cases, and weekly counts. The visualization confirms the data has been loaded and measures its dimensions using `d3.csvFormat` and array properties.

Loading thumbnail…

02_Data for Heart Attack possibility

This example displays a summary of the Heart Disease UCI dataset, showing the file size in kilobytes, row count, and number of columns. The code loads the CSV data from a GitHub gist using the d3.csv method from D3 v5. It then computes the byte size of the formatted data with d3.csvFormat and presents the statistics in a large text element. The dataset includes 14 attributes such as age, cholesterol, and chest pain type, which can be used to analyze factors contributing to heart attack risk.

Loading thumbnail…

02_Loading and Parsing Data for color

This example demonstrates the size and structure of a CSV dataset containing CSS color keywords by displaying the file size, number of rows, and number of columns in a large text block. It uses D3 v5’s `d3.csv` method to load and parse the remote CSV file from MDN web docs, then formats the data with `d3.csvFormat` to calculate its size. The code also includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, as well as a nested promise approach. The visualization simply presents these summary statistics as text.

Loading thumbnail…

02_Data for Largest Cities population in US 2020

This example introduces a dataset of the largest US cities by 2020 population, displaying basic metadata such as file size, row count, and column count. It loads a CSV file from a GitHub gist using D3 v5’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate the byte size. The interface simply presents these summary statistics in a large `<pre>` element, offering a minimal preview of the data’s structure. The dataset originates from World Population Review, with attributes including rank, city, state, population, and density.

Loading thumbnail…

Hello HTML world

This example shows a minimal HTML page displaying the text “Hello World” in large, centered type, with a secondary message logged to the browser’s developer console. It demonstrates the basic structure of an HTML document using a `<style>` block for presentation and a `<script>` tag for embedded JavaScript. No external libraries or data sources are used; the page relies solely on native HTML, CSS, and the browser’s `console.log` API to communicate its output.

Loading thumbnail…

smiley face with D3

A yellow smiley face with blue eyes and an animated mouth is rendered as SVG. The face uses D3 selections to append circles, while the mouth is drawn with a D3 arc path that transitions from a filled semicircle to a curved smile over three seconds. The example leverages the React framework and D3 v6’s `arc` and `transition` APIs.

Loading thumbnail…

Making face with D3.js

This example shows a yellow smiley face drawn with D3.js v6, including animated eyebrows that move up and down over three seconds. The face is rendered as SVG inside a 960×500 viewport, centered via a translation group. The code uses D3’s `select` and `arc` APIs to build the mouth path, while circles and rectangles form the eyes and brows. Eyebrow movement relies on chained `transition().duration()` calls that shift the eyebrow group’s `transform` attribute between two vertical offsets, creating a looping bounce effect.

Loading thumbnail…

01_03 face part 2 from scratch

A static smiley face rendered with SVG primitives. The face consists of a large green circle for the head, white and black circles for the eyes, and red and yellow circles for the nose and mouth, all positioned via absolute coordinates. The code includes both plain SVG markup in the HTML file and a React component in `index.js` that renders the same circle elements using `React.createElement` via JSX, with `ReactDOM.render` mounting it to the root div.

Loading thumbnail…

01_02_Face Part I

This example shows a simple cartoon face constructed with nested SVG circle elements. A large green circle forms the head, with white and black circles for the eyes, a red circle for the nose, and a yellow circle for the mouth. The static composition uses raw SVG markup embedded directly in an HTML file, with coordinates positioned along a 1000 by 500 canvas. The code relies on basic SVG shape elements—primarily `circle` and `line`—with attributes controlling fill color, stroke color, and stroke width. No external data source or JavaScript library is used; the visualization is purely declarative HTML/SVG markup.

Loading thumbnail…

01_First Face

This example presents a simple, static SVG face composed of a large yellow circle with a black outline and two smaller black circles for eyes. It shows how basic geometric shapes can be combined to create a recognizable figure. The visualization is built using raw SVG elements directly in an HTML file, with coordinates explicitly set for each circle’s center and radius, demonstrating a low-level, manual approach to positioning without any JavaScript libraries or data source.