d3.layout.timeline - A layout for band-style timelines

  •        1

Timelines come in all shapes and sizes. One of the most common and popular is the kind that represents the duration of events as bands and tries to efficiently pack them into discrete lanes (sometimes called a swimlane chart). This layout takes an array of data with start and end points and creates the data necessary to draw the data as bands on a timeline. #timeline(data) Returns an array of objects based on data with drawing instructions.

https://github.com/emeeks/d3.layout.timeline

Dependencies:

d3-array : 1.2.0
d3-scale : 1.0.6

Tags
Implementation
License
Platform

   




Related Projects

d3-dag - Layout algorithms for visualizing directed acyclic graphs

  •    Javascript

Often data sets are hierarchical, but are not in a tree structure, such as genetic data. In these instances d3-hierarchy may not suit your needs, which is why d3-dag (Directed Acyclic Graph) exists. This module implements a data structure for manipulating DAGs that mimics the API of d3-hierarchy as much as possible, while allowing layouts of acylic DAGs. The update from 0.1 to 0.2 includes a few small backwards incompatible changes.

WebCola - Javascript constraint-based graph layout

  •    TypeScript

JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries. Note: While D3 adaptor supports both D3 v3 and D3 v4, WebCoLa's interface is styled like D3 v3. Follow the setup in our homepage for more details.

Vue.D3.tree - Vue component to display tree based on D3.js layout.

  •    Vue

Update documentationVue components to display graphics based on D3.js layout. For all these events, the argument passed is {element, data} where element represents the node build by D3.js and data is the node raw data.

ember-timetree - Visualize hierarchical timeline data. Built with Ember.js and D3.js

  •    Javascript

##As this component is no longer in development inside Crowdstrike we are providing this code for illustrative purposes only. Please feel free to use and fork but be aware we will no longer be updating this repository to support newer versions of Ember or fixing issues. Visualize hierarchical timeline data. Built with Ember.js and D3.js.


d3-timeline - Simple JS timeline plugin for d3

  •    Javascript

#d3-timeline A simple d3 timeline plugin. Works with circles. In case the rectangular edges are too pointy.

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

d3-flame-graph - A D3.js plugin that produces flame graphs from hierarchical data.

  •    Javascript

A D3.js plugin that produces flame graphs from hierarchical data. If you don't know what flame graphs are, check Brendan Gregg's post.

d3kit-timeline - A simple timeline component that labels do not overlap.

  •    Javascript

If you want to have a simple timeline that labels do not overlap, but too lazy to implement one from scratch, this library is for you. Below is a screenshot of four timelines of the same data, each can be created via ~10 lines of code. See demo. The use case of this library is not limited to temporal data. You can change the scale to be d3.scale.linear() or something else to support x-value that is not time.

d3-timeline - A simple D3 Timeline chart

  •    Javascript

This allows you to define a minimum width for an interval element. Sometimes, when you zoom out too much you might still want to be able to visualize the interval. It defaults to 8.

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

react-d3-library - Open source library for using D3 in React

  •    Javascript

An open source library that will allow developers the ability to reroute D3 output to React’s virtual DOM. Just use your existing D3 code, and with a few simples lines, you can now harness the power of React with the flexibility of D3! React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.

d3.compose - Compose complex, data-driven visualizations from reusable charts and components with d3

  •    Javascript

Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. See http://CSNW.github.io/d3.compose/ for live examples and docs.

d3-extended - Extends D3 with some common jQuery functions and more

  •    Javascript

d3 Extended is compatible with d3 v4. If you are looking for the v3 compatible module you can find it on the v3 branch. This module extends d3-selection with helpful functions which are similar to the jQuery API. If you want to get to know more about this project, feel free to read the blog post: Replacing jQuery with d3.

d3act - d3 with React

  •    Javascript

d3 has been the de facto standard when it comes to data visualisations for a while now and React has recently emerged as the go-to library for building user interfaces. d3 and React are both data-centric libraries, making them a natural fit; d3 takes a data-driven approach and React aims to solve the problem of data changing over time in the context of building large applications. Nicolas Hery's "Integrating D3.js visualizations in a React app" talks about letting d3 do all the work after React has finished rendering components in the DOM. d3act is inspired by @nicolas_hery's approach; create a lightweight React component wrapper that maps React's lifecycle methods componentDidMount, componentDidUpdate and componentWillUnmount into a d3 chart's create, update and unmount methods respectively.

angular-nvd3 - AngularJS directive for NVD3 reusable charting library (based on D3)

  •    Javascript

This thing is designed to make it easier to work with nvd3.js re-usable charting library. This directive allows you to easily customize your charts via JSON API.The key feature is that the original hierarchical structure of nvd3 models is completely preserved in directive JSON structure. This means that while you creating a complex chart that containing multiple elementary chart models (such as line, bar, axis, ...), you can in turn customize the properties of each internal elementary models as well as the global charting properties the way you want. This can be done as usual, but it becomes quite easily to customize while applying JSON approach to.

Blueprint-VerticalTimeline - A responsive vertical timeline layout with icons and example media queries

  •    CSS

A responsive vertical timeline layout with icons and example media queries.

d3-carto-map - A mapping API that uses D3 geospatial functionality

  •    Javascript

d3.carto is a library for creating layer-based maps using D3. It allows you to easily make tile and vector maps that take advantage of D3's amazing geospatial functionality. Take a look at the wiki to get started or if you'd prefer to see what d3.carto can do, there are some examples here and more as blocks.

lyra - An interactive, graphical Visualization Design Environment (VDE)

  •    Javascript

Lyra is an interactive environment that enables custom visualization design without writing any code. Graphical “marks” can be bound to data fields using property drop zones; dynamically positioned using connectors; and directly moved, rotated, and resized using handles. Lyra also provides a data pipeline interface for iterative visual specification of data transformations and layout algorithms. Lyra is more expressive than interactive systems like Tableau, allowing designers to create custom visualizations comparable to hand-coded visualizations built with D3 or Processing. These visualizations can then be easily published and reused on the Web. This is the working branch for Lyra 2 and does not contain all functionality. A deployed version of Lyra 1 is available online. For more information, check out the Lyra wiki.