Get started with d3kit-timeline CDN

Apache-2.0 licensed

D3kit-timeline is a library for creating interactive, customizable timelines using D3.js.

Tags:
  • d3kit-timeline
  • d3kit

Stable version

Copied!

How to start using d3kit-timeline CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with d3kit-timeline CDN - cdnhub.io</title>
    <style>
        .timeline {
            list-style-type: none;
            padding: 0;
        }
        .timeline li {
            position: relative;
        }
        .timeline li::before {
            content: '';
            position: absolute;
            width: 2px;
            background-color: #ddd;
            left: 50%;
            top: 0;
            margin-left: -1px;
        }
        .timeline li:first-child::before {
            content: '';
            display: none;
        }
        .timeline li.vertical .timeline-panel {
            border-left: 2px solid #ddd;
            border-right: none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 5px;
            left: -1px;
        }
        .timeline li.vertical .timeline-panel:before {
            content: '';
            position: absolute;
            width: 2px;
            background-color: #ddd;
            left: 50%;
            top: 25px;
            margin-left: -1px;
        }
        .timeline li.vertical.timeline-inverted .timeline-panel {
            border-left-width: 0;
            border-right-width: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 5px;
            right: -1px;
        }
        .timeline li.vertical.timeline-inverted .timeline-panel:before {
            left: auto;
            right: 50%;
            margin-right: -1px;
        }
        .timeline li.timeline-inverted > .timeline-panel {
            right: 0;
            left: auto;
        }
        .timeline li.timeline-inverted > .timeline-panel:before {
            left: auto;
            right: 50%;
            margin-right: -1px;
        }
        .timeline-panel {
            width: 300px;
            padding: 15px;
            margin-left: 20px;
            margin-right: 15px;
            position: relative;
            border: 1px solid #ddd;
            background: #fff;
        }
        .timeline-panel:before {
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #007bff;
            position: absolute;
            left: -7px;
            top: 26px;
        }
        .timeline-panel h4 {
            margin-top: 0;
            color: inherit;
        }
        .timeline-panel p {
            margin: 0;
        }
        .timeline-panel p+p {
            margin-top: 5px;
        }
        .timeline-panel.timeline-inverted h4 {
            text-align: right;
        }
        .timeline-panel.timeline-inverted p {
            text-align: right;
            margin-left: 0;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <div id="timeline"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="https://cdn.cdnhub.io/d3kit-timeline/2.0.1/d3kit-timeline.min.js"></script>
    <script>
        const data = [
            { start: new Date(2015, 1, 1), end: new Date(2015, 1, 3), title: 'Event 1' },
            { start: new Date(2015, 1, 5), end: new Date(2015, 1, 7), title: 'Event 2', vertical: true, inverted: true },
            { start: new Date(2015, 1, 10), title: 'Event 3' },
            { start: new Date(2015, 1, 12), end: new Date(2015, 1, 14), title: 'Event 4', vertical: true },
        ];

        d3.select('#timeline')
            .datum(data)
            .call(d3kit.timeline()
                .size([500, 400])
                .range([[50, 0], [550, 350]])
                .x(d => d3.timeDay)
                .xUnits(d3.time.days)
                .y(d => d3.scaleLinear()
                    .domain([0, d3.max(data, d => (d.vertical ? d.end : d.start).getTime()]))
                    .range([0, 350]))
                .on('timelineMouseover', function(d) {
                    d3.select(this)
                        .select('rect')
                        .style('opacity', 0.5);
                    d3.select(this)
                        .select('div')
                        .style('visibility', 'visible');
                })
                .on('timelineMouseout', function(d) {
                    d3.select(this)
                        .select('rect')
                        .style('opacity', 1);
                    d3.select(this)
                        .select('div')
                        .style('visibility', 'hidden');
                })
            );
    </script>
</body>
</html>
Copied!

All versions