Skip to main content
SimilarExport ZIP
100%

My CV

✓ Published0🌍 Public
SSaminu
Last edited Apr 8, 2017
Created on Apr 8, 2017

This example visualizes a resume as an interactive timeline, plotting education, work experience, and notable events on a single horizontal axis. It uses D3.js (v3) to create SVG elements, including a time scale for positioning and an axis for reference. Work and education periods are shown as colored rectangles, while events are marked with circles and dashed connector lines. The text for each item is rotated and positioned based on an index, with the data defined in JavaScript arrays containing start and end dates. The layout places events above the axis and work history below it.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/4ec83d8edb8d5add7c9e'>Timeline with 2 streams and events</a>

forked from <a href='http://bl.ocks.org/domhorvath/'>domhorvath</a>'s block: <a href='http://bl.ocks.org/domhorvath/6ccbcf4dc3fdb4e95dd60a95078b2a9f'>CV</a>

mit Licensed

Similar vizzes

Loading thumbnail…

My CV

This interactive SVG timeline presents a professional CV, charting education, work history, and notable events along a shared time axis from 2002 to the present. The visualization displays academic periods as rectangles in the lower area, while professional roles appear as colored blocks in the upper band, with specific events marked as vertical dashed lines and circles. Built with D3.js, the code manually constructs the chart using `d3.time.scale` for the date axis, `d3.svg.axis` for rendering tick marks, and custom SVG elements like `rect` and `circle` for the data marks. The visualization is generated from hardcoded JavaScript arrays containing the position, education, and event data, with the SVG output styled entirely through CSS.

TThanaporn-sk
87% match
Loading thumbnail…

Career Timeline

A career timeline displays a person’s education, work history, and professional events along a single horizontal axis. The visualization uses D3.js scales and axes to position dates, with colored rectangles for job durations, scattered text labels for roles, and dashed lines connecting event markers to the timeline. It also includes text backgrounds and uses the D3 selection API to reorder elements. The data is hardcoded in JavaScript.

PPatrick Wojda
79% match
Loading thumbnail…

CV!

A playful, interactive résumé presents the author as a data scientist, game developer, web developer, and deep-learning researcher. Prominent, fixed text cycles through these job titles with a typewriter effect and blinking cursor, while stylized SVG eyes track the mouse cursor, shifting pupil positions left or right based on the viewer's cursor location. The project uses D3 v5 for SVG selection and rendering, plain JavaScript event listeners for mouse tracking and text animation, and CSS keyframes for the caret. Interactive behavior is driven entirely by client-side code, with no external data source.

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

resume

This resume presents a two-column layout with a dark blue header and a light blue sidebar. It provides a profile summary, a left column of skills with animated progress bars and tag chips, and a right column of work experience and projects with dates and bullet points. Rendered as SVG using React and CSS, the page features hover effects on contact links and a fade-in animation on load, with data sourced from an HTML document and styled with the styles.css file.

FFanghaoMeng
75% match
Loading thumbnail…

Timeline with 2 streams and events

A hand-drawn style timeline plots education and work history as two horizontal streams on opposite sides of a central axis, with personal events marked as vertical dashes below. The SVG visualization uses D3.js for scales, axes, and data binding, while Rough.js renders the sketch-like aesthetic. Labels for each period identify employers and degrees, and event annotations include dates and short descriptions. The code defines data arrays for education, work, and events, mapping them to time-encoded positions along the x-axis.

PPatrick Wojda
74% 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
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
73% match