Skip to main content
SimilarExport ZIP
100%

Gist af2ebfb61ff58df18497b60494e7ecc0

✓ Published0🌍 Public
NN0taN3rd
Last edited May 12, 2017
Created on May 12, 2017

This example visualizes the co-occurrence of JavaScript libraries across top websites, mapping which frameworks appear together on the same pages. It uses a force-directed graph layout to position library nodes, with edges representing shared site usage. The data is collected via concurrent HTTP requests using `FuturesSession` and `ProcessPoolExecutor`, parsed from Libscore API responses and Wappalyzer HTML, then aggregated into a combined JSON dataset. The visualization is built with React, rendering the network of library relationships derived from real site rankings and script tags.

AI-generated description

Similar vizzes

Loading thumbnail…

Java Script Libraries

This example visualizes popular JavaScript libraries as circles arranged along a horizontal axis. Each circle’s area corresponds to the library’s GitHub star count, while its lightness reflects the minified file size in kilobytes, with darker colors indicating larger codebases. Hovering reveals a tooltip with the library name, star count, and size. The code uses D3’s `csv`, `scaleSqrt`, `scaleLinear`, and `max` to load and scale data from a remote CSV, then renders SVG circles with appended `title` elements for interactivity.

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

Gist f0ea84b0d4d50604c405f5b74db1b498

This example visualizes the relationships between a set of JavaScript frameworks and their descriptions using a force-directed graph built with Vue.js and D3’s `d3.forceSimulation`. The graph reads from an inline `category.csv` dataset, mapping each of the three categories—Node.js, Vue.js, and Angular.js—to its respective description. Nodes are rendered as circles, with labels displayed alongside, while the simulation drives their positions through charge and link forces. The visualization demonstrates a compact, interactive network layout, though it does not include drag behavior or hover interactions beyond the static arrangement. The code relies on Vue’s reactivity to update the DOM as the simulation runs.

WWill Carter
71% match
Loading thumbnail…

In Archive, Alexa, Twitter Sample

This visualization presents a comparative analysis of the DOM and network complexity of seven popular websites, based on JSON snapshots captured by a web crawler. Each site is represented as a distinct point, with its position determined by aggregated metrics such as total node count, the number of clickable elements, and the diversity of resource types loaded. The tool, built with React, ingests these raw JSON files and uses a custom layout algorithm to project the multi-dimensional data onto a two-dimensional plane. Hovering over a point reveals a detailed breakdown of a site's specific DOM attributes, framework detection results, and the distribution of network requests by MIME type.

NN0taN3rd
71% match
Loading thumbnail…

Hello VizHub

A scatterplot maps the popularity of seven JavaScript frameworks, plotting years in use against GitHub stars, with circle size representing fork counts. The visualization is divided into four quadrants by reference lines, labeling categories like "In Fashion" and "Rock Stars." Built with D3 v5 and React, the code uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG elements rendered via `d3.select` and data joins. Static HTML, CSS, and a pre-bundled JavaScript file load the chart.

JJoker-tr
70% match
Loading thumbnail…

Gist db32a113f546aa03b43c0e1f84f80d28

The visualization shows a force-directed network graph of GitHub gist data, with nodes representing individual gists and links showing relationships between them. It uses d3.forceSimulation to compute the layout, with node size encoding gist size and color indicating file type or language. The rendering relies on SVG elements updated per tick via the simulation’s tick event. The code loads a static JSON file containing preprocessed gist metadata, and does not use canvas or WebGL. The visualization highlights clustering patterns among related gists, revealing emergent communities in the dataset.

335degrees
69% match
Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM
68% 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
68% match
Loading thumbnail…

Gist 43d5f0151f0331137a2d258ba06dfa0c

This interactive visualization renders the free-programming-books.md index as a three-dimensional WebGL scene using React and Three.js. The list of programming languages and topics is displayed as floating text nodes in a 3D space, allowing users to explore the hierarchical structure of the book collection. The code utilizes the react-three-fiber library to manage the WebGL canvas, with camera controls for navigation and a starfield background to enhance depth perception. The visualization provides an immersive way to browse the extensive index of free programming resources.

JJastor11
67% match