Skip to main content
100%

Gist 7d726f474b5682dd4fef366031e3d5e6

✓ Published0🌍 Public
Aalexsroth
Last edited May 5, 2025
Created on May 4, 2025

This visualization presents the professional history and qualifications of Alex Roth as a UX researcher, using a force-directed graph layout rendered with D3’s `d3.forceSimulation` to position nodes representing jobs, skills, and education. The code reads the `resume.json` file to structure the network, where linked nodes show connections between roles and competencies. Interactive hover effects, implemented via D3 event handlers, highlight related nodes and adjust opacity to reveal relationships, while the graph uses SVG circles and text labels for readability.

AI-generated description

Similar vizzes

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
76% match
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
73% match
Loading thumbnail…

Gist ac577ddd4531000aaf010b4257a3bf16

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.

VVictorHom
73% 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
72% match
Loading thumbnail…

Gist d48666ba0aaed38491ff5ccd5214c9a2

This example is a resume presented as a single-page, data-driven document. It shows the candidate's professional summary, technical skills, project history, and education. The visualization is built with React and leverages the D3.js library to create a custom layout for the resume's content. The code uses `d3.forceSimulation` to position the various sections, likely creating a network or bubble-like arrangement. The data is sourced directly from the resume text, which is parsed and rendered through a React component, demonstrating a non-traditional, interactive approach to displaying structured personal information.

AAbiyMelaku
71% match
Loading thumbnail…

My JSON Resume (https://registry.jsonresume.org/violetvivirand)

This example visualizes a JSON resume as an interactive node-link diagram. It shows the resume’s structured sections—such as basics, work, education, and skills—as connected nodes, with the author’s name and summary displayed prominently. The layout is generated using D3.js’s `d3.forceSimulation` to position nodes dynamically, while `d3.zoom` enables panning and scaling. Each node renders as a colored circle with text labels, and links between sections are drawn using SVG lines. The data originates from a public GitHub gist containing the resume.json file, which is fetched and parsed directly.

VVioletVivirand
71% match
Loading thumbnail…

Gist 11145951

This visualization uses a force-directed simulation with D3’s `d3.forceSimulation` to arrange a network of linked nodes. The code loads external data (likely from a JSON or CSV file) and renders the graph as an interactive SVG, with node positions updated continuously through the simulation’s tick events. Links are drawn as simple lines, while nodes appear as colored circles, and the layout responds to mouse interactions for dragging. The example also includes a footer with social media icons, but the core graphic focuses on the dynamic network structure.

Aandybak
70% match
Loading thumbnail…

Gist 160b8b16e4775e57e6f7736c7739dfd9

This visualization uses D3.js to render a network of interconnected nodes, positioned with `d3.forceSimulation` and drawn as circles on an SVG canvas. The code applies a color scale to nodes based on their degree (number of connections), and uses `d3.drag` to make nodes interactive and movable. It reads data from a simple array defined in the script, and displays the graph without axes or geographic elements. The example demonstrates force-directed layout and basic interactivity, with node colors and link strokes providing visual encoding of network structure.

Aandrei-antal
70% match