My CV

100%

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Apr 17, 2017

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.

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>

forked from <a href='http://bl.ocks.org/Saminu/'>Saminu</a>'s block: <a href='http://bl.ocks.org/Saminu/93fc2416862f859e92b8d4f33d4ee836'>My CV</a>

mit Licensed

Similar vizzes

Loading thumbnail…

My CV

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.

SSaminu

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

76% 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

73% 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

71% 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

68% match

Loading thumbnail…

Skills sunburst

This interactive skills sunburst visualization combines a radial hierarchy of technical proficiencies with an overlaid line chart, showing how proficiency in each skill category evolves over time from 1999 to 2013. The sunburst segments, rendered with D3 v3 and SVG, use color intensity to indicate proficiency levels, while hovering over a segment triggers an animated breadcrumb trail and updates the corresponding line graph showing proficiency trends. The visualization uses `d3.selectAll` for mouseover interactions, `d3.transition` for smooth opacity animations, and `d3.svg.axis` for chart axes. The hierarchical skill data comes from a pre-generated JavaScript file (`skillsdata.js`), which is derived from a user-populated Excel spreadsheet, with the sunburst layout and line chart both rendered as SVG elements.

TThanaporn-sk

68% 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

66% match

Loading thumbnail…

circular calendar

This circular calendar visualizes a year of events as concentric rings, with each month occupying a colored arc segment and individual days marked along the circumference. Event markers, color-coded by project (DS, N, S, special), appear as highlighted points on their corresponding dates. The visualization is built with D3 v4, using SVG paths and arcs generated via `d3.arc()` with computed start and end angles derived from each day-of-year. The code also defines custom arc segments for months and spring/summer/autumn color schemes, with a large “middle” text element at the center.

TThanaporn-sk

66% match