Skip to main content
SimilarExport ZIP
100%

Time Line

✓ Published0🌍 Public
GGeolffrey S Mena
Last edited Sep 7, 2019
Created on Sep 6, 2019
Forked from 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.

AI-generated description

This is a bar chart shows population of the top 10 most populous countries. The data comes from the year 2019 estimates in World Population Prospects 2019

MIT Licensed

Similar vizzes

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

Timeline

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

MMauradion
74% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
74% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
74% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
74% match
Loading thumbnail…

Gantt Chart

This Gantt chart visualizes project tasks, including development, coding, promotion, and celebration phases, as horizontal bars positioned along a linear time scale. The chart uses D3 v5 to parse dates with `d3.timeParse`, scale time with `d3.scaleTime`, and render colored rectangles within an SVG container. Task categories are distinguished by a gradient color scale using `d3.scaleLinear` with HCL interpolation. Hovering over a task reveals a tooltip with its name and duration details, while the grid and labels are also generated with D3.

JJoker-tr
74% 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
74% match