How to use the d3fc.autoBandwidth 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 finos / perspective / packages / perspective-viewer-d3fc / src / js / legend / colorRangeLegend.js View on Github external
.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)
            .baseValue((_, i) => (i > 0 ? expandedDomain[i - 1] : 0))
            .mainValue(d => d)
            .decorate(selection => {
                selection.selectAll("path").style("fill", d => scale(d));
            });

        const middle = domain[0] < 0 && domain[1] > 0 ? 0 : Math.round((domain[1] + domain[0]) / 2);
        const tickValues = [...domain, middle];

        const axisLabel = fc
            .axisRight(yScale)
            .tickValues(tickValues)
github finos / perspective / packages / perspective-viewer-d3fc / src / js / chartConfig.js View on Github external
export function configureBarSeries(isSplitBy, orientation, dataset, groupBys) {
    let barSeries;
    if (isSplitBy) {
        let stackedBarSeries = fc
            .autoBandwidth(fc.seriesSvgBar())
            .align("left")
            .orient(orientation)
            .crossValue((_, i) => groupBys[i])
            .mainValue(d => d[1])
            .baseValue(d => d[0]);

        barSeries = [...dataset.map(() => stackedBarSeries)];
    } else {
        barSeries = fc
            .autoBandwidth(fc.seriesSvgBar())
            .align("left")
            .orient(orientation)
            .crossValue(d => d.crossValue)
            .mainValue(d => d.mainValue);
    }

    return barSeries;
}
github finos / perspective / packages / perspective-viewer-d3fc / src / js / chartConfig.js View on Github external
export function configureMultiColumnBarSeries(orientation, color, dataset) {
    return fc
        .autoBandwidth(fc.seriesSvgGrouped(fc.seriesSvgBar()))
        .align("left")
        .orient(orientation)
        .crossValue(d => d[0])
        .mainValue(d => d[1])
        .decorate((sel, data, index) => {
            sel.enter()
                .select("path")
                .attr("fill", color(dataset[index].key));
        });
}
github finos / perspective / packages / perspective-viewer-d3fc / src / js / series / heatmapSeries.js View on Github external
export function heatmapSeries(settings, color) {
    let series = fc.seriesSvgHeatmap();

    series.decorate(selection => {
        tooltip().settings(settings)(selection);
        selection.select("path").attr("fill", d => color(d.colorValue));
    });

    return fc
        .autoBandwidth(series)
        .xValue(d => d.crossValue)
        .yValue(d => d.mainValue)
        .colorValue(d => d.colorValue)
        .colorInterpolate(color.interpolator())
        .widthFraction(1.0);
}
github finos / perspective / packages / perspective-viewer-d3fc / src / js / series / barSeries.js View on Github external
export function barSeries(settings, color) {
    let series = settings.mainValues.length > 1 ? fc.seriesSvgGrouped(fc.seriesSvgBar()) : fc.seriesSvgBar();

    series = series.decorate(selection => {
        tooltip().settings(settings)(selection);
        selection.style("fill", d => color(d.key));
    });

    return fc
        .autoBandwidth(minBandwidth(series))
        .crossValue(d => d.crossValue)
        .mainValue(d => d.mainValue)
        .baseValue(d => d.baseValue);
}