Gist 2f2eacadf93dfd159da1

100%

Gist 2f2eacadf93dfd159da1

✓ Published0🌍 Public

Last edited Jun 3, 2015

Created on Jun 3, 2015

This visualization shows journal impact data from the 2012 Journal Citation Reports, rendered as an interactive scatter plot. Each point represents a journal, with position encoding impact factor versus total citations and point size mapping the Article Influence Score. The view is implemented with React managing the component state and D3.js handling the layout and scales. Points are drawn using WebGL for efficient rendering of hundreds of journals, and the animation smoothly transitions points when the underlying data or filters change. SVG is used for axes, labels, and interactive hover effects, while the WebGL layer renders the data points themselves. The visualization enables exploration of relationships between citation metrics across physics, chemistry, and biology journals.

AI-generated description

Similar vizzes

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

74% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

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

72% match

Loading thumbnail…

Gist c91b7cdf3a65a705ef48

This example visualizes earthquake activity using a force-directed particle layout. Each circle is an earthquake, positioned by its longitude and latitude and scaled by magnitude; the particles are animated with a gentle jitter to reveal clustered events. The visualization is rendered with D3 v3 using SVG, mapping the `data.csv` fields—such as depth, magnitude, and location—to visual variables. A shared timeline and smooth transitions help the user explore the relationship between location, time, and earthquake strength across the dataset.

BBenHeubl

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

71% match

Loading thumbnail…

Gist c8fa96678eda5a2e92a93b8777bf1e1a

This example uses a custom JavaScript implementation with the D3.js library to render a small collection of user-supplied x,y coordinates as a scatterplot. The code computes an attraction-repulsion force simulation via a bespoke `d3.forceSimulation`-like routine, drawing nodes and connecting edges on an SVG canvas. The five data points (100,100; 130,120; 80,180; 180,80; 180,40) are displayed without axes or labels, clearly showing their relative spatial arrangement and the network structure formed by the force-directed layout. The rendering relies on SVG `<circle>` and `<line>` elements, with interaction limited to the static initial placement.

JJuannovo

71% match

Loading thumbnail…

Gist cf01c80643e72e5a9fc0

This visualization, titled “Evidence for Meditation and Mindfulness,” plots research findings on a scatterplot where the x-axis shows the publication year and the y-axis rates the amount of scientific evidence from 1 (little) to 4 (much). Each point represents a study outcome, colored by category (e.g., cognitive, cognitive + emotional) and encoded with a tooltip that reveals the plain-language claim, full description, and source link on hover. The chart is rendered with D3 v3 as an SVG with animation, set against a dark background for contrast.

BBenHeubl

70% match

Loading thumbnail…

Plot

This interactive scatter plot visualizes a downsampled subset of citation network data, with each point representing a patent edge across multiple temporal slices. Colors encode different data files, and opacity highlights the selected category while dimming others. Built with React and D3 v5, the visualization uses `Promise.all` with `d3.text` to load CSV data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping, and `d3.zoom` for panning and zooming. SVG rendering includes custom axes, gridlines, and interactive legend ticks.

Eendlesstory

70% match