Skip to main content
SimilarExport ZIP
100%

Plot

✓ Published0🌍 Public
Eendlesstory
Last edited Jan 31, 2021
Created on Jan 31, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Plot

This visualization shows the degree distribution of nodes in a large citation network, plotted as a histogram with a logarithmic y-axis. Users can adjust the number of bins via an input field, which rebuilds the histogram in real time using d3.histogram and d3.scaleLinear. The plot supports zooming and panning through d3.zoom. Data is loaded as a binary buffer, parsed with Uint32Array, and rendered as SVG rectangles. The code uses d3.axisBottom, d3.axisLeft, and d3.format to display clean, ticked axes over a light gray background.

Eendlesstory
75% 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
74% match
Loading thumbnail…

Plot

This scatter plot visualizes the relationship between X and Y values across multiple datasets. The visualization uses color coding to distinguish different datasets, with circles rendered at low opacity to reveal overlapping points. Users can click a legend item to highlight a specific dataset's points at higher opacity, and double-click to reset the view. The plot also supports zooming via the d3.zoom API. Data is loaded from CSV files and rendered as SVG circles using D3 v5 within a React framework. The axes include gridlines and formatted tick labels.

Eendlesstory
74% match
Loading thumbnail…

D3 Tutorial

This example demonstrates a D3.js network graph visualizing a force-directed layout of research papers, with nodes sized by their citing patents count. The chart uses the `d3.forceSimulation` API to position nodes and render them as SVG circles on a 960x500 canvas, with forces for charge and centering. Data is loaded asynchronously from a static JSON file using `d3.json`. The visualization highlights the strongest-cited works through larger radii, making publication impact immediately apparent.

SShivansh Mathur
74% match
Loading thumbnail…

D3 viz

A force-directed graph displays a network of academic papers, where each node represents a cited work and its size reflects the number of citing patents. The visualization uses `d3.forceSimulation` to position nodes and `d3.drag` for interactive dragging. Yellow circles are rendered as SVG elements within a fixed 600x600 viewport. The data, containing paper titles and patent counts, is supplied locally in the script.

AArmin van Eldik
74% match
Loading thumbnail…

Fork of Reusable Scatter PLot

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

Sserebryanaya.n@gmail.com
73% match
Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes a dataset of academic metrics, allowing users to switch between variables like citations, research, and teaching for both axes. Built with D3 v6, it uses reusable chart and menu components, with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for rendering. The plot animates transitions via `d3.transition` when axes change, with circles growing on entry and repositioning smoothly. Data loads from an external CSV, and menus dispatch change events to update the plot’s x and y value accessors.

AABCDB15
72% match
Loading thumbnail…

IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes a sample of 200 defensive asylum cases, plotting wait times in days against the date cases entered the system. A dropdown menu filters data by year, and hovering over the color legend highlights points by decision code. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and coloring. The SVG visualization includes custom React components for axes, marks, and an interactive color legend that adjusts opacity on hover.

Nnouralkhoury
72% match