Skip to main content
SimilarExport ZIP
100%

AI Research Project

✓ Published1🌍 Public
AAbdullah Al Munem
Last edited Aug 16, 2023
Created on Aug 14, 2023

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.

AI-generated description

todo:

  1. add color legend to the map
  2. add opacity on hover to the stacked bar chart
  3. add y labels to the bar charts
  4. add titles to the project
  5. make the project in tab view
MIT Licensed

Similar vizzes

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.

AAbdullah Al Munem
86% match
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.

AAbdullah Al Munem
84% match
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.

AAbdullah Al Munem
82% match
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.

AAbdullah Al Munem
81% match
Loading thumbnail…

Fork of Scatter plot for AI Research

This interactive scatter plot visualizes AI research metrics by country, allowing users to compare attributes like citations, documents, and H-index through dropdown menus. The visualization uses React with D3 v5 scales and SVG rendering, featuring a color legend that highlights individual countries on hover while fading others. Data comes from a SCImago Journal Rank CSV file, processed with D3's csv parser and sorted by citation count before display.

JJason
81% match
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.

AAbdullah Al Munem
77% match
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.

AAbdullah Al Munem
77% match
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.

AAbdullah Al Munem
75% match