A

Abdullah Al Munem

@abdullah-al-munem·20 public vizzes

Loading thumbnail…

AI Research Project

This interactive visualization explores global AI research output using a multi-tab interface. The main view presents a world map with points sized by total publications and colored by a sequential blue scale via `d3.scaleSqrt`, `d3.scaleSequential`, and `d3.geoPath`, alongside a linked histogram with a `d3.brushX` selection to filter data by year. Additional tabs feature a bar chart, stacked bar chart, line chart, and scatter plot, all built with React and D3 v5 that display top countries by metrics like citations, documents, and H-index from a Scopus country rank dataset. The visualizations are rendered as SVG elements.

Loading thumbnail…

Scatter plot for AI Research

This interactive scatter plot visualizes AI research metrics across countries, drawing data from the SCImago Journal & Country Rank dataset. Users can select different attributes such as Citations, Documents, or H-index for the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeTableau10 for country color encoding, and shows a color legend with hover interactions that filter the displayed points. React renders the SVG elements, and the plot includes formatted axis labels and tooltips showing exact values.

Loading thumbnail…

Stylized Line Chart for AI Research

This interactive line chart visualizes trends in AI research publications from 1996 to 2022, allowing users to explore data for different countries via a dropdown menu. The visualization uses React for component structure and D3 v5 for scales, axes, and curve generation, with data loaded from a CSV file. SVG rendering displays a stylized line path with data points, implemented through the `line()` generator with `curveNatural` interpolation, while interactive tooltips provide detailed publication counts on hover.

Loading thumbnail…

React DropDown

This example displays an interactive dropdown menu for selecting an X-axis attribute, sourced from the Iris Dataset. Built with React and the `react-dropdown-browser` library, it uses `useState` to manage the selected attribute. The interface includes a labeled menu container with a custom Poppins font, rendering a scatter plot where users can change the X-axis variable.

Loading thumbnail…

Fork of Stylized Line Chart

This chart displays China’s annual publication counts from 1996 to 2022, extracted from the Scimagojr dataset. A smooth line with circular points marks each year’s total. Built with React and D3 v5, it uses `scaleLinear` for both axes, `line` with `curveNatural` for the path, and SVG circles with `<title>` for hover tooltips. Axis components generate tick marks and labels, with formatting applied via `format('.2s')`.

Loading thumbnail…

Fork of AI Research Project (initial backup)

This interactive visualization combines a choropleth map with a linked time-series histogram to explore global AI research publications from 1996 to 2022. The map colors countries by publication totals using a sequential blue scale, with bubble sizes reflecting aggregated output for a selected year range. Users can brush the time-series chart to filter the map, dynamically recomputing summed data across years. Built with React and D3 v5, the example uses `geoNaturalEarth1` and `geoPath` for map projections, `scaleSequential` with `interpolateBlues` for coloring, and `brushX` for interactive selection, with data sourced from a CSV and world-atlas TopoJSON.

Loading thumbnail…

Fork of Stylized Bar Chart for AI (backup)

This visualization displays a stacked bar chart of the top 15 countries by citations, plus Bangladesh, using data from the Scimago Journal & Country Rank dataset. The chart breaks down each country’s total citable documents into three stacked segments: citations, self-citations, and non-cited documents. Built with React and D3 v5, it uses `d3.stack`, `scaleBand`, and `scaleLinear` to compute the stack layout, while SVG `<rect>` elements render the bars with `d3.scaleOrdinal` for color encoding and tooltips for precise values.

Loading thumbnail…

Stylized Bar Chart for AI (way to go more)

This interactive bar chart visualizes publication metrics for fifteen countries, breaking down each country’s total citations into stacked segments for citations, self-citations, and non-cited documents. The visualization uses React with D3.js’s scaleBand and scaleLinear for positioning, while d3.stack organizes the data layers, and scaleOrdinal assigns distinct colors. The chart highlights Bangladesh’s data by appending it to the sorted dataset, with tooltips showing each segment’s exact count and percentage. Data comes from the Scimago Journal & Country Rank dataset spanning 1996–2022.

Loading thumbnail…

Fork of Scatter plot for AI Research (almost done)

This interactive scatter plot visualizes research productivity metrics for countries from the SCImago Journal & Country Rank dataset, showing relationships between attributes like citations, documents, and H-index. Users can dynamically select which attributes appear on the x and y axes via React dropdown menus, while a color legend enables hovering to highlight specific countries and fade others through opacity adjustments. The visualization uses D3 v5 scales and SVG rendering within a React framework, with custom axis components, a color legend for the ordinal country scale, and D3’s CSV parsing to load and sort the underlying data.

Loading thumbnail…

Stylized Bar Chart for AI

This stylized bar chart displays the top 15 countries by citation count, using a dataset of scientific publications from Scimago (1996-2022). The visualization sorts the data in descending order and renders bars with a teal fill on a clean, minimal grid. Built with React and D3 v5, the chart uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and SVG `rect` elements for the marks. The y-axis formats large numbers with an SI prefix (e.g., "B" for billions), and the chart includes a hover tooltip showing each value.

Loading thumbnail…

Fork of Stylized Bar Chart

This stacked bar chart displays the population distribution across multiple subgroups for each group, using a stylized, color-coded design. Built with React and D3 v5, the visualization renders SVG rectangles through a custom `Marks` component, with axes generated by `d3.axisBottom` and `d3.axisLeft`. A d3 ordinal scale assigns distinct colors to each stacked series, while mouseover events trigger a tooltip showing subgroup names and values. The chart pulls data from the United Nations World Population Prospects 2019 CSV, demonstrating a stacked layout with interactive labeling.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two React Dropdown menus let viewers dynamically select which quantitative attributes to display on the x and y axes. The visualization uses d3.scaleLinear for scaling, custom React components for axes and marks, and renders SVG circles with tooltips. Data is loaded asynchronously via d3.csv from a GitHub gist, with the interface built using React hooks and styled with the Poppins font.

Loading thumbnail…

Fork of Add something new (almost done)

This interactive choropleth world map visualizes scientific publication counts by country, with bubble sizes representing publication totals for selected time periods. A color legend allows hovering to highlight specific publication ranges while fading others. The visualization includes a linked histogram showing total publications over time, featuring brush controls that filter the map data by year range. Built with React and D3 v5, the project uses `geoNaturalEarth1` and `geoPath` for geographic rendering, `scaleSequential` with `interpolateBlues` for the color scale, and `brushX` for time filtering. Data comes from a CSV dataset of publication records.

Loading thumbnail…

Add something new (will be continue..)

This interactive visualization combines a bubble map and a time-series histogram to explore global publication trends from 1996 to 2022. The map displays countries colored by publication totals using a sequential blue scale, with circles sized proportionally to publication counts via `scaleSqrt`. A brush on the histogram filters the map by date range, dynamically updating the displayed data. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` for geographic rendering, alongside `brushX` for interactive filtering.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis, sepal width on the y-axis, and coloring each point by species. Hovering over a species in the color legend highlights only that species' data points while fading others to 20% opacity. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` from d3 for scales, with SVG circles rendered from the dataset loaded via `csv`.

Loading thumbnail…

mine Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a choropleth world map with a brushable time-series histogram to explore migrant deaths. The map displays aggregated death counts by country, using a blue sequential color scale to encode totals and circle sizes to represent the sum over a selected time range. Users brush the histogram to filter the map, dynamically updating country colors and bubble radii. Built with D3 (v5) and React, it uses d3.geoNaturalEarth1 projection, geoPath, geoGraticule, and geoCentroid for cartographic rendering, with data from a custom CSV dataset.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing origin

This interactive visualization links a world map of migrant deaths with a time-series histogram, enabling users to brush over time to filter the map by date range. The map uses a natural Earth projection with proportional circle sizes based on total dead and missing, while the histogram aggregates monthly totals. Built with React and D3 v5, it employs `geoNaturalEarth1`, `geoPath`, `brushX`, and `scaleSqrt` for rendering and interaction. Data comes from the Missing Migrants Project CSV and World Atlas TopoJSON.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This fork of the HIV/AIDS choropleth map displays the percentage of the population aged 15-49 infected with HIV in 2017 across countries. A sequential color scale using `d3.scaleSequential` and `interpolateYlOrRd` encodes prevalence, with gray for missing data. Built with React and d3.v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for the map projection, with country boundaries from World Atlas TopoJSON and graticules rendered via `d3.geoGraticule`. Data comes from an IHME CSV loaded with `d3.csv`.

Loading thumbnail…

Fork of React Starter

This example displays the text “Hello React!” centered on the page at a large font size. It uses the React 18.2.0 UMD builds for the core library and React DOM, along with the `createRoot` API to render the application into the `#root` element. The custom message styling is defined in an embedded style block within `index.html`.

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, with population values multiplied by 1000. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG with customized axes that omit unnecessary lines and apply a custom tick format converting G to B. The chart includes axis labels and a title, with styling applied via CSS for tick text, lines, and the title.