Skip to main content
SimilarExport ZIP
100%

Career Timeline

✓ Published0🌍 Public
PPatrick Wojda
Last edited Dec 18, 2015
Created on Dec 18, 2015

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.

AI-generated description

Similar vizzes

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

Timeline

A horizontal timeline charts patient flow through stages like Waiting, Vital, and Doctor, with colored bars and labels showing durations. The chart uses a custom `d3.timeline` function built with D3 v3, rendering SVG elements. It stacks rows, applies a 15-minute time axis with `d3.time.format`, and supports custom tick formatting and interactive navigation. Colors are mapped to each stage, and the example demonstrates how to configure margins, stacking, and axis labels for a clear temporal sequence.

Zzeeeeem
71% match
Loading thumbnail…

D3-timeline in D3.js V3 ref from (jiahuang)

This example visualizes a timeline with stacked horizontal bars representing different stages of a process, such as waiting, vital checks, and doctor visits, with each segment color-coded and labeled by duration. The D3.js V3 timeline plugin renders the data as SVG rectangles on a time axis with 15-minute tick intervals and supports interactive navigation through chevron controls. The visualization uses `d3.time.format` for tick labeling and accepts data in a structured format with starting and ending times, demonstrating how to build a customizable, event-based timeline with D3.

Vvillagef
69% match
Loading thumbnail…

Time Line

This timeline visualization displays the projected start and end dates for a series of project phases, from Induction through Tag, spanning late 2019 into early 2020. The chart uses an SVG canvas with D3 v5’s `scaleBand` for the categorical phase labels and `scaleLinear` for the date range. Data is loaded from a CSV file. The code builds a horizontal bar chart, using `axisBottom` for the time axis and custom tick formatting, and applies a reusable group `g` to position elements within specified margins.

GGeolffrey S Mena
69% match
Loading thumbnail…

HeatMap: Career Data

A d3.js heatmap displays career data across two categorical axes, with each cell colored using an inferno sequential scale. The visualization maps group and variable labels to x and y coordinates, while the cell intensity reflects a numeric value. Hovering a cell reveals its exact value via a custom tooltip. Built with d3.js v4 and the d3-scale-chromatic library, the SVG chart loads data from a remote CSV file and includes axis labels, a title, and a subtitle.

SSimon Hackbert
68% match
Loading thumbnail…

Timeline

This example presents an interactive timeline visualization of temporal data, showing the start and end times for multiple entities (such as people) as horizontal bars. Users can zoom and navigate through the time range using provided controls. The visualization is built with D3.js v5, using SVG for rendering and the `scaleTime` and `scaleOrdinal` APIs for time scaling and color assignment. A dropdown menu, created with a custom D3 component, allows users to filter data, while the timeline supports stacked rows and time axis navigation.

Iianleekq
68% match
Loading thumbnail…

Categorized Timeline Using Dates

This example demonstrates a categorized timeline using the d3.layout.timeline plugin, displaying events grouped into four distinct lanes (PROD, INT, DEV, SBX) based on their sphere attribute. The visualization uses an SVG rendering with a color scale mapping each category to a distinct color, and the timeline layout automatically assigns rows to overlapping date ranges within each category. The data shown comes from a CSV of deployment events, and the timeline is filtered to a specific date range. The example highlights how d3.layout.timeline can organize categorical temporal data into swimlanes while maintaining clear visual separation between groups.

CCBasis
68% match
Loading thumbnail…

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Aannesmets
68% match