Stylized Bar Chart for AI (way to go more)

100%

Stylized Bar Chart for AI (way to go more)

✓ Published1🌍 Public

Last edited Aug 14, 2023

Created on Aug 14, 2023

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.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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

93% 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

90% 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

79% 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

77% match

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.

AAbdullah Al Munem

77% 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

76% 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

75% match

Loading thumbnail…

Stylized bar chart with React & D3

This stylized bar chart displays the population of 15 countries, with horizontal bars scaled proportionally to their 2020 population estimates and a custom tooltip showing the formatted value on hover. Built with React and D3 v7, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG elements via React components for axes and marks. The styling employs a light gray grid and dodgerblue bars, with the data loaded from a remote CSV using D3's `csv` parser and formatted with the `format` function.

Rrvdv

74% match