How to use the d3fc.extentLinear function in d3fc

To help you get started, we’ve selected a few d3fc examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ScottLogic / StockFlux / legacy / src / child / components / minichart / Minichart.js View on Github external
const height = extent.height;

        const container = select(`#${stockCode}chart`)
            .insert('svg', 'div')
            .attr('width', width)
            .attr('height', height);

        // Create scale for x axis
        const xScale = scaleDiscontinuous(scaleTime())
            .domain(extentDate().accessors([(d) => d.date])(data))
            .discontinuityProvider(discontinuitySkipWeekends())
            .range([0, width]);

        // Create scale for y axis. We're only showing close, so
        // only use that extent.
        const closeExtent = extentLinear().accessors([(d) => d.close])(data);
        const yScale = scaleLinear()
            .domain(closeExtent)
            .range([height, 0])
            .nice();

        const area = seriesSvgArea()
            .crossValue((d) => d.date)
            .baseValue((_) => closeExtent[0])
            .mainValue((d) => d.close)
            .decorate((selection) => {
                selection.attr('fill', `url(#${stockCode}-minichart-gradient)`);
            });

        const line = seriesSvgLine()
            .crossValue((d) => d.date)
            .mainValue((d) => d.close);
github finos / perspective / packages / perspective-viewer-d3fc / src / js / chartConfig.js View on Github external
export function configureScale(isSplitBy, horizontal, dataset, groupBys) {
    let mainScale;
    let crossScale;
    if (isSplitBy) {
        let mainExtent = fc
            .extentLinear()
            .accessors([a => a.map(d => d[1])])
            .pad([0, 1])
            .padUnit("domain");

        mainScale = d3.scaleLinear().domain(mainExtent(dataset));

        crossScale = d3
            .scaleBand()
            .domain(groupBys)
            .paddingInner(0.4)
            .paddingOuter(0.2);
    } else {
        mainScale = d3.scaleLinear().domain([0, d3.max(dataset, x => x.mainValue)]);

        crossScale = d3
github finos / perspective / packages / perspective-viewer-d3fc / src / js / chartConfig.js View on Github external
export function configureScaleMultiColumn(horizontal, dataset, groupedBarData) {
    const mainExtent = fc
        .extentLinear()
        .accessors([a => a.map(d => d[1])])
        .include([0])
        .pad([0, 1])
        .padUnit("domain");

    const mainScale = d3.scaleLinear().domain(mainExtent(dataset));

    const crossScale = d3
        .scaleBand()
        .domain(groupedBarData.map(entry => entry.crossValue))
        .paddingInner(0.4)
        .paddingOuter(0.2);
    let [xScale, yScale] = horizontal ? [mainScale, crossScale] : [crossScale, mainScale];
    return [xScale, yScale];
}
github finos / perspective / packages / perspective-viewer-d3fc / src / js / legend / colorRangeLegend.js View on Github external
.append("div")
                .attr("class", "legend-container legend-color")
                .style("z-index", "2")
        );
        const {width, height} = legendSelection.node().getBoundingClientRect();

        const xScale = d3
            .scaleBand()
            .domain([0, 1])
            .range([0, width]);

        const domain = scale
            .copy()
            .nice()
            .domain();
        const paddedDomain = fc
            .extentLinear()
            .pad([0.1, 0.1])
            .padUnit("percent")(domain);
        const [min, max] = paddedDomain;
        const expandedDomain = d3.range(min, max, (max - min) / height);

        const yScale = d3
            .scaleLinear()
            .domain(paddedDomain)
            .range([height, 0]);

        const svgBar = fc
            .autoBandwidth(fc.seriesSvgBar())
            .xScale(xScale)
            .yScale(yScale)
            .crossValue(0)
github ScottLogic / StockFlux / packages / stockflux-watchlist / src / components / minichart / Minichart.js View on Github external
const getCloseExtent = chartData => {
  return extentLinear().accessors([d => d.close])(chartData);
};