@aquassay/d3-horizon

d3-horizon

Horizon graph for D3

Installation

npm i @aquassay/d3-horizon

Dependencies

• D3 Brush
• D3 Array
• D3 Axis
• D3 Scale
• D3 Scale Chromatic
• D3 Selection
• D3 Shape

Usage

To show your data, You have to do this :

import { horizon } from '@aquassay/d3-horizon';

const container = document.getElementById('#my-horizon-container');
const data      = [/* your data here */];
const svg       = horizon(data);

container.innerHTML = '';
container.appendChild(svg);

And, if you want to export them to SVG file, You have to do this :

import { getURL } from '@aquassay/d3-horizon';

const link = document.createElement('a');
const url  = getURL(svg);

link.href       = url;
link.download   = 'export.svg';

link.click();

If you want to make a Selection of the data, You can with this : Actually, it return only the first and last dates of the selected range.

import { horizon } from '@aquassay/d3-horizon';

const container = document.getElementById('#my-horizon-container');
const data      = [/* your data here */];
const svg       = horizon(data, {
    onSelectedEnd(range) {
        // action on select part like request more data with axios and redraw the graphics like a zoom
    },
    onSelectedStart() {
        // action on start select to force the hiding of the tooltip or other stuff if needed
    },
});

container.innerHTML = '';
container.appendChild(svg);