Fork of Fork of Fork of TP_dataviz only timeline

100%

Fork of Fork of Fork of TP_dataviz only timeline

✓ Published0🌍 Public

Last edited Nov 30, 2022

Created on Nov 30, 2022

This example displays a horizontal timeline of an artist's albums, with each album represented by a circle positioned along a line according to its release date. The visualization uses a D3.js v4 SVG, with circle size mapped to the time span between the album's start and release date. Interacting with a circle by hovering enlarges it, while clicking it expands the circle to fill the chart, fades out other elements, and reveals a details panel. The data is fetched from the Wasabi API and rendered using D3's `select`, `scaleLinear`, and `append` methods.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of TP_dataviz Projet

This example visualizes album data for a specific artist, retrieved from the Wasabi API, as a bar chart showing the number of Deezer fans for each album. Users can sort the bars either by fan count in descending order or by release date in ascending order using the two provided buttons. The visualization is built with D3 v4, featuring SVG rendering with animated transitions, tooltips on mouseover, and scales including `scaleBand` and `scaleLinear` for positioning the bars.

BBaptisteJarry

82% match

Loading thumbnail…

Fork of TP_dataviz

This interactive visualization explores the music of Metallica through two synchronized views: a radial stacked bar chart showing the top genres by song count, and a zoomable timeline plotting album releases. The radial chart uses D3’s scaleBand, scaleRadial, and arc generators, with hover and click interactions revealing songs via custom tooltips. The timeline, built with d3.scaleTime and d3.zoom, filters data from a local CSV or API fetch. D3 version 4 and 5 are loaded via CDN, with data sourced from the Wasabi API.

Eemilienbf

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

78% match

Loading thumbnail…

Fork of TP_dataviz Projet

This visualization displays the number of Deezer fans for each album by a specific artist, fetched from the Wasabi API. Users can click the Ascending or Descending buttons to reorder the bar chart by fan count or release date. The bars appear sequentially via a staggered transition with `delay`. The code uses D3 v4’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the SVG chart, with data loaded using `csv` and `fetch`.

DDIANJING FAN

78% match

Loading thumbnail…

Fork of Fork of Fork of TP_dataviz stacked

This radial bar chart visualizes the frequency of song genres across Rihanna's albums, using data fetched from the Wasabi API. Each colored arc represents a genre, with its length proportional to the number of songs. Hovering reveals the genre name, while clicking displays a pop-up list of matching song titles. A separate timeline chart below plots album release dates, with circles sized by time since release. The visualization is built with D3 v4, using `d3.scaleBand`, `d3.scaleRadial`, `d3.arc`, and SVG rendering, with animations for transitions and interactions.

BBaptisteJarry

77% match

Loading thumbnail…

Fork of TP_dataviz Projet

This bar chart displays the number of Deezer fans for each album by the band Metallica, retrieved from the Wasabi API. Users can click the Ascending and Descending buttons to re-sort the bars by fan count or release date. The visualization uses D3 v4 with SVG and animated transitions, featuring a tooltip that shows album titles and fan numbers on hover. Data loads asynchronously via `fetch` and is processed with `scaleBand` and `scaleLinear` axes.

BBaptisteJarry

76% match

Loading thumbnail…

Fork of TP_dataviz Projet

This example shows a lollipop chart comparing the number of Deezer fans per country, with each country represented by a vertical line and a green circle marker. The chart uses D3 v4 to load JSON data from `data.json`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG elements using `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to determine the domain.

GGinnWG

75% match

Loading thumbnail…

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

This example demonstrates a color-coded timeline visualization of patient wait times, vitals checks, and doctor visits using stacked horizontal bars. The chart renders SVG elements through D3.js v3, utilizing the `d3.timeline` plugin to map time intervals with custom colors and labels. It shows a 15-minute tick axis with formatted time labels, and includes a legend for the three activity categories. The data is hardcoded as JavaScript objects containing starting and ending times parsed with `Date.parse`.

Ffilipwydra

75% match