Articles Timeline

100%

Articles Timeline

✓ Published0🌍 Public

Last edited Feb 11, 2021

Created on Feb 10, 2021

This example displays a timeline of articles about Donald Trump, plotting each article as a point based on its modification date and allowing the user to aggregate the data by time intervals from seconds to years. It uses the d3-milestones library to render the timeline, with a dropdown menu in the HTML form controlling the aggregation granularity. The bundled JavaScript (bundle.js) supplies the article data, which includes titles, URLs, timestamps, and text snippets, and the visualization updates to reflect the selected time grouping.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Timeline

This timeline visualization shows the growth of VizHub users from its launch in August 2018 through March 2021, with each user count plotted as a circle along a time axis. The code loads articles.csv containing New York Times COVID-19 and climate articles, using their publication dates to position cyan circles in the same timeline. Built with D3 v6, it uses `d3.scaleTime`, `d3.axisBottom`, and `.tickSize` to render the grid, while mouseover events display article URLs via appended text elements. The SVG canvas resizes responsively using `document.body.clientWidth` and `clientHeight`.

JJoyce Robbins

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

64% 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…

Trump Topics Streamgraph

A streamgraph visualizes search interest in Trump-related news events from January to September 2017, using Google Trends data indexed to 100. The chart stacks 40 topics as colored, wiggling areas, with labels positioned via `d3.areaLabel` and wrapped using a custom `wrap` function. Built with D3 v4, it applies `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut`, renders SVG paths via `d3.area` and `curveBasis`, and includes major and minor time axes.

CCurran Kelleher

63% match

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

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

62% match

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

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

61% match