100%

Exploring FANTOM5 Phase 2 Time Course Data

✓ Published0🌍 Public

Last edited Mar 11, 2015

Created on Feb 16, 2015

This interactive SVG visualization maps FANTOM5 Phase 2 time-course samples, organizing gene expression series by time point and donor. Each series is sorted by its final time value to reveal temporal trajectories, with samples color-coded by species and plotted as small circles along a shared time axis. D3 handles the hierarchical nesting and animation, while hover states reveal sample details via links to the FANTOM5 SSTAR database. The chart is rendered entirely client-side from tab-separated data, with time-course series arranged vertically to facilitate comparison of expression patterns across different experimental conditions.

AI-generated description

Exploring FANTOM5 Phase 2 Time Course Data

Visualization of FANTOM5 Phase 2 Time Course samples. Based on a work at fantom.gsc.riken.jp. Live version hosted on FANTOM5 SSTAR.

License

FANTOM5 data by RIKEN is licensed under a Creative Commons Attribution 4.0 International License.

How to cite

Please cite the following paper for using data obtained from the FANTOM5 site: Lizio M, et al. Gateways to the FANTOM5 promoter level mammalian expression atlas. Genome Biol 16: 22 (2015). 10.1186/s13059-014-0560-6

Similar vizzes

Loading thumbnail…

Untitled

An interactive scatterplot displays F3 against F4 coordinates from a CSV dataset, with each point representing an Epoch value. The chart includes zoom and pan functionality via d3.zoom, allowing users to rescale both axes and update circle positions dynamically. The visualization uses d3.v4, renders as SVG, and demonstrates clip-path implementation to contain drawn elements. Axis scales are linear, with circles colored teal and semi-transparent for overlapping point visibility.

HHariprashanth75

66% match

Loading thumbnail…

Time Series Bar Chart!

This time series bar chart visualizes hierarchical grouping and temporal spans across categories. The SVG visualization uses D3 v5’s scaleLinear and scaleBand to map start and end times along the x-axis, while grouping data points by category on the y-axis. Bars respond to mouseover with a transition that expands their height and displays a tooltip, implemented via d3.select and event listeners. The code loads data from windows.csv using d3.csv, applying a linear scale for time intervals and styling with CSS classes for layout and interactivity.

Ffoomoon

65% match

Loading thumbnail…

Time Line

This timeline visualization displays the projected start and end dates for a series of project phases, from Induction through Tag, spanning late 2019 into early 2020. The chart uses an SVG canvas with D3 v5’s `scaleBand` for the categorical phase labels and `scaleLinear` for the date range. Data is loaded from a CSV file. The code builds a horizontal bar chart, using `axisBottom` for the time axis and custom tick formatting, and applies a reusable group `g` to position elements within specified margins.

GGeolffrey S Mena

65% match

Loading thumbnail…

Fork of Fork of Fork of MedData - TimeLine 222 NESTED WITHOUT AREA

This example displays time-series medical data for a single patient, filtering the dataset to show only the selected metric (Diastolic pressure) across time. The visualization uses nested line charts and area fills, with each line representing a data category and color-coded via `scaleOrdinal` and `schemeSet1`. The chart is built with D3 v5, using `nest()` to group data, SVG rendering for paths, and includes interactive tooltips and a listening rectangle for mouse events. Data is loaded from a CSV file containing patient measurements.

Ppplomith

65% match

Loading thumbnail…

Time based moving graph with no labels

Four time-series data columns—Partner, PCL, GOLAN, and DriveU—scroll horizontally across the SVG canvas, updating continuously. The animated chart uses D3's `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with lines drawn via `line` and `curveBasis` geometry. A `transition` with `easeLinear` animates the sideways movement, clipped by a `clipPath` to reveal new data points. Each line has a distinct color from a `scaleOrdinal` range, and the visualization loads data from a CSV file.

PPiotr Paszek

65% match

Loading thumbnail…

connect the dots

This animated scatterplot visualizes a time series of 50 data points, connecting them in chronological order with a smooth line. Each dot represents a moment in time, with its vertical position encoding the "rate" value while the x-axis maps temporal progression. The visualization uses D3 v4's SVG rendering to draw a continuously-updating path that links each point to the next, creating the sense of drawing a connected line through the data. As time advances, the line extends to incorporate new points while earlier segments remain visible, producing a dynamic "connect-the-dots" effect. The animation highlights the temporal flow and changing values across the dataset, with the line's movement revealing patterns in the rate changes over time. The visualization uses a minimal, uncluttered aesthetic that focuses attention on the trajectory of the data points.

EEranM6

65% match

Loading thumbnail…

Fork of Time series - labels

This example visualizes temporal data as rectangular marks on a time-based scatterplot, encoding registration and validity periods along the x- and y-axes. Hovering a rectangle displays a tooltip with its associated label value. Built with D3.js (version 7.8.1), the visualization uses `scaleTime`, `axisLeft`, `axisBottom`, and pointer events to map date ranges to screen coordinates. Input data is parsed from ISO date strings into JavaScript `Date` objects. The SVG rendering fills the browser viewport, with rectangles styled via CSS and a custom tooltip appended to the DOM.

BBart van Pelt

65% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst visualizes hierarchical sequence data from a CSV file, using a D3 v3 partition layout to show the relative sizes of taxonomic paths. It displays a breadcrumb trail and percentage labels on hover, highlighting the ancestry of a selected node while fading others. The code uses `d3.layout.partition`, `d3.svg.arc`, and `d3.csv.parseRows` to build the chart, with custom color mapping and smooth opacity transitions on mouseleave. A legend toggle and clickable elements enhance exploration of the data.

GGeneExplorer

64% match