Skip to main content
SimilarExport ZIP
100%

timeline

✓ Published0🌍 Public
5534N
Last edited Jul 18, 2013
Created on Jul 18, 2013

The timeline example displays a vertical list of years, from 2013 down to 1981, with the most recent year labeled "Now." It shows a sequence of dated entries, each linked to a map zoom level and some with geographic coordinates. The visualization uses a custom HTML template with list items, where each entry carries attributes like `zoom`, `lat`, and `lon`. The code relies on plain HTML and CSS classes for styling and interaction, with no external JavaScript libraries like D3 or Three.js evident. The data source is a Gist, and the rendering approach is a static list of clickable year labels.

AI-generated description

Similar vizzes

Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

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

timelines

This example demonstrates a versatile D3 timeline component built with SVG, offering over a dozen variations including simple timelines, circular markers, stacked layouts, and interactive features like hover, click, and scroll events. The code implements a custom `d3.timeline` function that supports configurable axes, colors, labels, tick rotation, relative timepoints, backgrounds, and navigation controls. It uses D3 v3's time scales and formatting, along with jQuery for event handling, to render timelines with rectangles or circles as visual elements. The component also handles complex layouts with stacked rows, axis positioning, and color mapping from data.

IIan
73% match
Loading thumbnail…

Timeline

A stretchable timeline visualization using GoJS v3 displays a horizontal bar with tick marks and date labels, along with event nodes positioned above it. Users can resize the bar by dragging its right handle, which dynamically updates the tick and label intervals. The code implements a custom `TimelineLayout` and `BarLink` (not shown) to connect event nodes to the timeline, using graduated shape features for ticks and `graduatedFunction` for date formatting. Event data includes Persian-language meeting titles with corresponding dates in 2016.

JJoker-tr
72% 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
72% match
Loading thumbnail…

Timeline Points

This example shows a simple timeline visualization with a horizontal line representing the date range from December 27, 2019, to February 12, 2020. The React and D3 code uses `d3.scaleTime` to map the date domain to pixel coordinates within an SVG. A `VizContainer` component, created with the margin convention, renders the framework, and a single `<line>` element is drawn across the inner width to mark the timeline base.

WWaseem Medhat
71% match
Loading thumbnail…

Timeline

This example shows a web page titled “Timeline” that displays the text “Hello HTML” in large, centered type, alongside a “Hello JavaScript!” message logged to the browser’s console. The page loads D3 v5 and Moment.js from CDNs, but the code does not yet implement any visualization or timeline functionality. It uses plain CSS for styling and JavaScript for console output, serving as a minimal scaffold for future data-driven timeline work. The React starter project is referenced as a related alternative.

Eetypeemos
70% match