El Kuelgue

100%

✓ Published0🌍 Public

Last edited Nov 12, 2019

Created on Nov 12, 2019

El Kuelgue is an interactive timeline visualization that presents the history and key events of the Argentine band El Kuelgue in Spanish. It displays a chronological sequence of narrative entries with dates, text, and media, allowing viewers to scroll through the band's trajectory. The visualization is built using the TimelineJS3 library from Knight Lab, which is embedded via an iframe and loads its data from a publicly shared Google Sheets document. The timeline uses the library's default font styling and an initial zoom level of zero, with a fixed height of 650 pixels for the embedded view.

AI-generated description

Similar vizzes

Loading thumbnail…

Noticias sobre Juan Manuel Urtubey

This visualization plots news articles about Juan Manuel Urtubey as circles on a timeline, with each article’s source on the y-axis and its publication date on the x-axis. Hovering reveals the article title, URL, and source, while clicking opens the link. The chart uses Vega-Lite 2.6.0 with the Vega-Embed library, embedding the dataset directly in the specification. Circle color, opacity, and size are fixed, and an interactive interval selection enables zooming and panning across both axes.

Aaaizemberg

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

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

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

55% match

Loading thumbnail…

XData News - Elecciones en Argentina 2019

This example displays a live feed of Google News articles about the 2019 Argentine elections, sorted by publication date in descending order. The page fetches RSS data through a CORS proxy, parses it with the RSSParser library, and renders each headline as a clickable link with its source and timestamp. Using D3 v5’s `d3.select` and `data().enter()` pattern, it appends paragraphs to the body, formatting each entry’s date and source inline with HTML. The visualization is a simple chronological list, not a chart, emphasizing recent news updates.

Aaaizemberg

54% match

Loading thumbnail…

Timeline - Proof-of-concept

This proof-of-concept demonstrates a two-band interactive timeline built with D3 v3 and SVG. Events with start/end dates (intervals) or single dates (instants) are parsed from CSV data; the upper band displays items within a selected interval, while the lower navigation band shows their overall distribution. Users can brush on the lower band to select, drag, or resize a time range, click outside the brush to reset the view, and hover over items to see tooltips. The design, inspired by SIMILE Timeline and Bill Bunkat's swimlane chart, uses d3 scales and brushes to manage time intervals, with labels showing interval start, length, and end.

ZZhengYingqian

54% match

Loading thumbnail…

Gist 752e79ef7b1d634b16a9e7020da164ff

This visualization presents a narrative chart that maps character appearances and introductions across scenes in a story. Using D3.js’s narrative layout, it positions scenes horizontally and characters vertically, encoding each character’s presence as small black ellipses within scene clusters. The code employs mxGraph to render the final graph, with curved edges connecting characters across scenes. Appearance vertices are placed at precise scene coordinates, while introduction labels sit beside the timeline, with links drawn between these points. The underlying data wrangling occurs in a dedicated function that groups scene characters by ID, and the graph is exported as XML via mxCodec.

HHugoberry

54% match

Loading thumbnail…

#TwitterforNews en 🇦🇷

This visualization plots tweets from the #TwitterforNews workshop in Argentina, with each circle positioned by favorite count (x-axis) and retweet count (y-axis). Hovering reveals the tweet’s author, date, and text, while brushing on either axis zooms the view. The data is embedded directly in the Vega-Lite specification, rendered as SVG through Vega-Embed, which loads Vega and Vega-Lite from CDN. The interactive scale-binding selection enables panning and zooming across the quantitative fields.

Aaaizemberg

54% match