Skip to main content
SimilarExport ZIP
100%

google timeline

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jun 14, 2019
Created on Jun 14, 2019

This example shows a timeline chart for U.S. presidential and cabinet positions, using the Google Charts loader with the `timeline` package and `google.visualization.Timeline`. The data table includes positions, person names, and start/end dates, with rows grouped by row label disabled via the `groupByRowLabel` option. The chart renders into a fixed-height div, using the Google Charts API rather than D3 directly, though D3 v4 is loaded in the page.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sonbe/'>sonbe</a>'s block: <a href='http://bl.ocks.org/sonbe/fa32b4195e25eba2dd4714e9d7272785'>google timeline</a>

mit Licensed

Similar vizzes

Loading thumbnail…

timeline

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.

5534N
66% 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
64% match
Loading thumbnail…

Timelines Chart

This timelines chart shows multiple parallel time-series, grouped into distinct sections, with each segment colored to represent a value. The visualization supports both heatmap-style continuous coloring and categorical qualitative coloring. Users can explore the data by zooming and panning, or scrubbing through a timeline brush at the bottom. The example uses the `timelines-chart` D3 component, populating it with randomly generated data via the `getRandomData` function, which constructs groups, labels, and time ranges.

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

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
63% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
63% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
63% 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
63% match