Skip to main content
100%

Gist ac577ddd4531000aaf010b4257a3bf16

✓ Published0🌍 Public
VVictorHom
Last edited Jul 2, 2025
Created on Jul 2, 2025

This visualization scrapes Victor Hom’s public LinkedIn profile to display his career history as an interactive timeline. It uses the `fetch` API to load the JSON data, then renders each position and education entry with D3.js, applying `d3.forceSimulation` for node placement and `transition.attrTween` for smooth animations. Company logos are loaded from URLs, and tooltips reveal details like titles and dates. The layout highlights his progression from Bridgewater Associates through Affirm, with follower count and verification badge shown as supplementary stats.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e4ad04560d14bf59d0642b48bf3e436b

This example visualizes a job-search and interview-preparation checklist as a network diagram. It shows the relationships between job applications, interview tasks, and study resources using a force-directed layout. The visualization uses D3.js’s `d3.forceSimulation` to position nodes and links, with each node representing a task or company and edges showing dependencies. The code renders custom SVG elements, and hover interactions highlight connected nodes. Data comes from a Markdown checklist, parsed and converted into graph form. The rendering approach emphasizes task progression, with completed items visually distinct, and uses transition tweens for smooth layout updates.

FFrankieFabuloso
71% match
Loading thumbnail…

Gist 484101

This visualization shows an interactive network of interconnected nodes, with each node representing a person and links showing connections between them. It reveals the structure of social ties, likely from a GitHub collaboration graph, by grouping related clusters. The rendering uses a canvas-based `d3.forceSimulation` with custom collision and link forces to position nodes, while a custom `d3.geoPath`-style projection maps node positions onto a projected sphere. The code also employs Canvas `getImageData` to detect node boundaries for hover interactions, and uses `transition.attrTween` for smooth link animations. The underlying data is loaded from a Gist, and the visualization runs entirely client-side without external data files.

DDylanFM
71% match
Loading thumbnail…

Gist 8a97689739c217f28474d80c89013628

This visualization uses a force-directed graph to show relationships between entities, with nodes positioned by `d3.forceSimulation` and links drawn as curved paths. The code computes node sizes and colors from quantitative attributes, while a canvas overlay via `d3.geoPath` and `getImageData` samples pixel density to modulate link opacity based on local clustering. It employs a custom `transition.attrTween` to animate node drift when the simulation restarts, and uses the `d3.hierarchy` API to flatten nested data from a JSON file. The visualization reads credentials from an `env.list` file for a private data source, but the rendering logic is independent of that authentication step.

CConorAspell
71% match
Loading thumbnail…

Gist 0e2d25c5a6ad6d6449636f60b210e178

This interactive resume visualizes Abiy Melaku’s career history and technical skills using a custom React and D3.js interface. The view presents a network-style layout where each professional role and project appears as a distinct node, with connectors linking to relevant technologies and keywords from the resume. Built with React for component state and D3’s force simulation for spatial arrangement, the visualization lets viewers hover over nodes to reveal detailed descriptions of responsibilities and tools. The code directly parses the resume’s structured text data, mapping each bullet point and section into interactive, color-coded elements that update in real time.

AAbiyMelaku
69% match
Loading thumbnail…

Gist bdbc9e7fea0925a8a7abac0066804aef

A React component builds an interactive curriculum vitae where a force-directed graph represents professional experience and skills. Using d3.forceSimulation, the layout positions connected nodes for each role, skill, and technology, with links showing relationships between them. The visualization reads from embedded CV data, allowing users to explore career history and technical expertise through an animated, zoomable network.

SSleepyHarry
69% match
Loading thumbnail…

Gist 6db8115f185f7e57cb4395da0474fbf6

This example presents an interactive visualization of a network graph, where nodes are connected by curved links and can be dragged by the user. The code builds the layout using `d3.forceSimulation` for physics-based positioning and renders the scene with `d3.select` and SVG elements, including `transition.attrTween` for smooth link animations. It reads a JSON dataset of node and edge data from an external file, and uses `d3.zoom` for panning and scaling the view. The visualization shows how force-directed algorithms distribute connected nodes while user input adjusts the simulation in real time.

11wheel
68% match
Loading thumbnail…

Gist e5b685ab28be02728c48

The visualization charts seventeen potential next-platform technologies as nodes in a force-directed network, with node size and link thickness reflecting candidate prominence. It uses `d3.forceSimulation` to position the labels and `d3.drag` for interaction, while each node’s circular shape and grayscale shading derive from SVG circles styled via CSS. The underlying data is a static array of strings from the author’s gist, rendered without external datasets or geographic mapping. All elements respond to mouse events, but no filtering or temporal transitions are present.

TTheLady
68% match
Loading thumbnail…

Gist dbe8122ef6678bc81c0628ce7b6020f9

This example tracks a job-search progress checklist in a GitHub gist, visualizing task completion across categories like personal projects and applications. The code renders each checklist item as a node in a force-directed graph, using d3.forceSimulation to position items by category and status (checked or unchecked). A custom SVG rendering layer draws links between related tasks and colors nodes by completion state, while the layout derives directly from the gist’s markdown structure. The visualization shows how a simple to-do list can be reimagined as an interactive network, with hover tooltips revealing task titles and URLs from the source data.

FFrankieFabuloso
68% match