All Projects → Genscape → D3 Timeline

Genscape / D3 Timeline

Licence: mit
A simple D3 Timeline chart

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to D3 Timeline

chartjs-chart-timeline
Google-like timeline chart for Chart.js.
Stars: ✭ 44 (-94.08%)
Mutual labels:  chart, timeline
flame-chart-js
Component for incredibly fast viewing of flame charts
Stars: ✭ 28 (-96.23%)
Mutual labels:  chart, timeline
Mermaid
Provides a parser function to generate diagrams and flowcharts with the help of the mermaid script language
Stars: ✭ 27 (-96.37%)
Mutual labels:  chart, gantt-chart
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-74.7%)
Mutual labels:  chart, d3js
webtrees-pedigree-chart
SVG based pedigree chart module for webtrees genealogy application.
Stars: ✭ 24 (-96.77%)
Mutual labels:  chart, d3js
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 215 (-71.06%)
Mutual labels:  chart, d3js
Zeitline
A polylinear timeline with clustering, centred on interactions. — Doc and demo https://octree-gva.github.io/Zeitline/
Stars: ✭ 15 (-97.98%)
Mutual labels:  timeline, d3js
Timeline Plus
Timeline - chronological visualization of your data
Stars: ✭ 140 (-81.16%)
Mutual labels:  chart, timeline
treemap-chart
A treemap interactive chart web component for visualizing hierarchical data
Stars: ✭ 27 (-96.37%)
Mutual labels:  chart, d3js
stacked-gantt
JQuery Gantt-like chart with stacked activities/tasks, providing conciser information.
Stars: ✭ 19 (-97.44%)
Mutual labels:  chart, gantt-chart
Vis Timeline
📈 Create a fully customizable, interactive timelines and 2d-graphs with items and ranges.
Stars: ✭ 654 (-11.98%)
Mutual labels:  chart, timeline
Ngx Charts
📊 Declarative Charting Framework for Angular
Stars: ✭ 4,057 (+446.03%)
Mutual labels:  chart, d3js
D3 Layout Narrative
A d3 layout for creating XKCD style narrative charts
Stars: ✭ 168 (-77.39%)
Mutual labels:  chart, d3js
jquery-linechart
JQuery plugin for creating charts
Stars: ✭ 42 (-94.35%)
Mutual labels:  chart, timeline
Sunburst Chart
A sunburst interactive chart web component for visualizing hierarchical data
Stars: ✭ 140 (-81.16%)
Mutual labels:  chart, d3js
Simple-charts
Simple responsive charts
Stars: ✭ 15 (-97.98%)
Mutual labels:  chart, d3js
Ss Vis Component
VIS components for a security system, to monitor the state and confirm the system's health running.
Stars: ✭ 88 (-88.16%)
Mutual labels:  chart, d3js
Just Dashboard
📊 📋 Dashboards using YAML or JSON files
Stars: ✭ 1,511 (+103.36%)
Mutual labels:  chart, d3js
d3-kagi
An open source javascript library to render beautiful Kagi charts using D3.js and pure Javascript
Stars: ✭ 26 (-96.5%)
Mutual labels:  chart, d3js
Zmjganttchart
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.
Stars: ✭ 301 (-59.49%)
Mutual labels:  timeline, gantt-chart

D3 TimelineChart

Build Status

NPM

Chart example

Installing

npm install d3-timeline-chart --save

Example

'use strict';
const element = document.getElementById('chart');
const data = [{
    label: 'Name',
    data: [{
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 1, 11])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 1, 15])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 3, 10])
    }, {
        label: 'I\'m a label',
        type: TimelineChart.TYPE.INTERVAL,
        from: new Date([2015, 2, 1]),
        to: new Date([2015, 3, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 6, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 7, 1]),
        customClass: 'custom-class'
    }]
}];

const timeline = new TimelineChart(element, data, {
    tip: function(d) {
        return d.at || `${d.from}<br>${d.to}`;
    }
});

Config

Available config parameters

intervalMinWidth (8)

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.

tip (undefined)

A function that receives as parameter a data point and returns an HTML text to be displayed as a tooltip

License

The MIT License (MIT)

Copyright (c) [2016] [Commodity Vectors]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].