MOOC Certifications

100%

MOOC Certifications

✓ Published1🌍 Public

Last edited Aug 13, 2020

Created on Aug 13, 2020

This example visualizes a network of Marvel superheroes as nodes connected by links, with the force layout positioning the graph. The visualization uses the MOOC Certifications dataset, rendering each hero as an image that expands on hover and reveals text details on click. Built with D3 v3 and React, it employs `d3.layout.force` for physics-based positioning, SVG images for node representation, and smooth transitions for interactive elements. The graph loads JSON data from a remote source and uses a collapsible tree structure derived from the dataset.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

MOOC Certifications

A force-directed graph displays Marvel superheroes and their connections, rendered as an interactive network of images. Clicking a node reveals the character's name and a link to their course certificate. The visualization uses `d3.layout.force` for physics simulation and `d3.layout.tree` to derive links, with SVG elements like circles, images, and text for display. Nodes scale by a `size` attribute, and hover animations enlarge images via D3 transitions. Data is fetched as JSON from a remote GitHub URL.

NNita

94% match

Loading thumbnail…

Marvel Characters | Force layout with images

The visualization shows Marvel characters in a force-directed graph, where each hero is represented by an image node. Users can click a character to display their secret identity and a link to their Marvel web page, while hovering enlarges the image and reveals the character’s name. Built with D3 v3, the layout uses force simulation to position nodes, with images as nodes and curved links between them. The chart is interactive, allowing users to explore character connections through a collapsible tree structure.

CCBasis

73% match

Loading thumbnail…

Marvel Characters | Force layout with images

This interactive force-directed graph maps Marvel characters as circular node images connected by curved links. Built with D3 v3’s force layout, it renders an SVG network where each character is represented by a portrait. Hovering enlarges the image and reveals the hero’s name; clicking updates the header with the character’s secret identity and a link to their Marvel webpage. Node size encodes a numeric size value, while links show hierarchical relationships in a tree-like arrangement. The layout uses gravity, charge, and link distance parameters to organize the characters, with smooth transitions on hover.

IImenmaaloul

73% match

Loading thumbnail…

Marvel Characters | Force layout with images

A force-directed graph renders Marvel characters as profile images that repel and link together based on a hierarchical dataset. The visualization uses D3’s force layout to position nodes, with images serving as both nodes and interactive elements. Clicking a character updates the header to show their secret identity and a link to their Marvel webpage; hovering scales the image up to reveal the hero’s name. Links between characters are drawn as curved paths, and the root node is fixed at the top center. The animation runs in an SVG container with a clean, comic-book-inspired aesthetic.

IImenmaaloul

72% match

Loading thumbnail…

Marvel Characters | Force layout with images

This interactive force-directed graph visualizes Marvel characters, grouped by Heroes, Villains, and Teams, with each node displaying a character image. The layout uses the `d3.layout.force()` API for physics-based positioning and SVG rendering. Clicking a character reveals their real name and a link to their Marvel webpage, while hovering temporarily enlarges the image. The visualization also includes draggable nodes and animated transitions between states, powered by D3.js v3.

FFrissAnalytics

72% match

Loading thumbnail…

Hello HTML

This example shows a force-directed network graph of university courses, where nodes represent courses and links show associations between them with labels describing support and confidence values. The visualization uses D3 v3’s `d3.layout.force` for layout and computes node positions and link paths, which are rendered as SVG curves with arrowheads via a custom marker. Course names are displayed within the network, and link styling and text are set using SVG `path` and `textPath` elements. The data is hardcoded in a JavaScript array, and the page runs as a bare HTML document with React integration.

苏苏巨亮

70% match

Loading thumbnail…

D3 Test

This example shows a directed graph of university courses, with nodes representing courses and links indicating prerequisites. Users can drag nodes to reposition them; double-clicking a node releases it from its fixed position, while dragging fixes it in place. The visualization uses D3 v3’s `d3.layout.force` for physics-based layout, with `d3.json` loading the course data from `graph.json`. Node and link positions are updated during the force simulation’s `tick` event, although the tick handler itself is left unimplemented, so nodes remain static initially. Rendering is done via SVG elements styled with CSS.

NNguyễn Nhật Minh Khôi

69% match

Loading thumbnail…

Network graph of social connection

This example shows a network graph of social connections, with nodes representing characters from a fictional world and links indicating relationships between them. The graph uses D3’s force layout (d3.layout.force) to position nodes, which are rendered as purple circles with dark outlines and labeled with names. Links appear as black lines, and link thickness is set based on a numeric weight attribute when present. Users can click and drag nodes to rearrange the layout, which updates in real time. The visualization reads data from a local JSON file and renders entirely in SVG.

SSamanvitha1

68% match