TimeLine

100%

✓ Published0🌍 Public

Last edited Feb 5, 2018

Created on Jun 24, 2019

A tweet's retweet cascade is visualized as an animated timeline, showing each retweeter as a node positioned by when they retweeted and sized by their follower count. The visualization begins with the original tweet's author, profile image, and reply text at the top, with a horizontal time axis beneath. Arcs connect the original tweet to each retweeter, revealing the spread pattern over time. Built with D3.js (version 3.5.5), the visualization uses `d3.json` to load the tweet data, `d3.scale.ordinal` and `d3.scale.linear` for positioning, plus an SVG-based timeline with a custom tooltip showing user details on hover.

AI-generated description

A snippet from ta.virot.me/tweettimeline

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/tvirot/'>tvirot</a>'s block: <a href='http://bl.ocks.org/tvirot/c0fc3e8bb09d3dd68a68'>TweetTimeline</a>

mit Licensed

Similar vizzes

Loading thumbnail…

2018: Smiley Face

This example visualizes a timeline of tweets as a scatterplot, where each tweet’s vertical position reflects its impact (number of favorites) and its horizontal position reflects the time it was posted. Circle size and color also encode impact, using a linear scale for both radius and a color range from white to purple. The visualization uses D3 v5 to load the tweet data, map time with `d3.scaleTime`, and map impact with `d3.scaleLinear`. It renders circles and text labels as SVG elements, then filters out tweets with zero impact by removing their corresponding nodes.

YYasara Peiris

71% match

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

68% match

Loading thumbnail…

timeline - trend

The visualization demonstrates how a single outlier or a user-dragged point dramatically alters a least-squares trend line. It shows a scatter plot of a 20-point time series, where each blue dot can be moved with the mouse to immediately recalculate and redraw the steel-blue regression line. A timeline path connects the points, and buttons allow inverting the trend or creating an outlier. Built with D3.v3, it uses `d3.behavior.drag`, `d3.svg.axis`, and `transition` functions to animate updates, with data loaded from a CSV via `d3.csv`.

KKcnarf

68% match

Loading thumbnail…

Interactive scatterplot

This interactive scatterplot visualizes Twitter user activity by plotting tweets based on quantitative dimensions on logarithmic x and y scales, with each point colored and sized by tweet type and a related metric. The visualization includes a custom legend with lines and circles to explain the size mapping. Built with D3.js version 3.5.5, the code uses d3.svg.axis, d3.scale.log, d3.scale.ordinal, and d3.scale.linear to construct the axes and scales, with SVG rendering for all graphical elements. The dataset is loaded from a CSV file containing tweet samples, and the graph includes a title and axis labels.

AAndresAnayaIsaza

68% match

Loading thumbnail…

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

A fork of jiahuang's d3-timeline, this example demonstrates a stacked, interactive timeline built with D3.js v3 and rendered as SVG. The chart visualizes labeled time intervals for patient statuses like "Waiting," "Vital," and "Doctor," with each segment colored and optionally labeled, and an accompanying legend. The code creates the timeline via `d3.timeline()` with stacked item rows, custom tick formatting using `d3.time.format`, and margins. SVG elements are appended manually for the legend, while the timeline itself handles axis and row rendering through its internal API.

JJason

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

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

67% match

Loading thumbnail…

RETWEET NETWORK

This example visualizes a retweet network as a force-directed graph, where each node represents a user and links represent retweet interactions weighted by frequency. It shows clusters of users based on their retweet connections, with node color indicating party affiliation. The visualization uses D3.js v5 with a Canvas rendering approach, employing `d3.forceSimulation` with forces for centering, collision, charge, and link constraints. Users can drag nodes to explore the network structure, with the simulation updating continuously to reflect the weighted relationships from the Higgs Twitter dataset.

Ssalwa191

67% match