How to use g-axis - 10 common examples

To help you get started, we’ve selected a few g-axis 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 ft-interactive / visual-vocabulary-templates / small-multiple-area / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        // define other functions to be called
        const myYAxis = gAxis.yLinear();// sets up yAxis
        const myXAxis = gAxis.xDate();// sets up xAxis
        const myAnnotations = areaChart.drawAnnotations();// sets up annotations
        // sets up the legend
        const myLegend = gLegend.legend(); // eslint-disable-line
        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions

        // Create the plot widths, but for each individual graph
        const widthOfSmallCharts = ((currentFrame.dimension().width / currentFrame.numberOfColumns()) - currentFrame.rem());
        const heightOfSmallCharts = ((currentFrame.dimension().height / currentFrame.numberOfRows()) - (currentFrame.rem() * 3.5));

        const tickSize = widthOfSmallCharts;// Used when drawing the yAxis ticks

        // draw the chart holders
        const chart = currentFrame.plot()
            .selectAll('g')
            .data(plotData)
github ft-interactive / visual-vocabulary-templates / small-multiple-line / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        // define other functions to be called
        const myYAxis = gAxis.yLinear();// sets up yAxis
        const myXAxis = gAxis.xDate();// sets up xAxis
        const myHighlights = lineChart.drawHighlights();// sets up highlight tonal bands
        const myAnnotations = lineChart.drawAnnotations();// sets up annotations
        // sets up the legend
        const myLegend = gLegend.legend(); // eslint-disable-line
        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions

        // Create the plot widths, but for each individual graph
        const widthOfSmallCharts = ((currentFrame.dimension().width / currentFrame.numberOfColumns()) - currentFrame.rem());
        const heightOfSmallCharts = ((currentFrame.dimension().height / currentFrame.numberOfRows()) - (currentFrame.rem() * 3.5));

        const tickSize = widthOfSmallCharts;// Used when drawing the yAxis ticks

        // draw the chart holders
        const chart = currentFrame.plot()
        .selectAll('g')
github ft-interactive / visual-vocabulary-templates / small-multiple-multi-line / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        // define other functions to be called
        const myYAxis = gAxis.yLinear();// sets up yAxis
        const myXAxis = gAxis.xDate();// sets up xAxis
        const myHighlights = lineChart.drawHighlights();// sets up highlight tonal bands
        const myAnnotations = lineChart.drawAnnotations();// sets up annotations
        // sets up the legend
        const myLegend = gLegend.legend(); // eslint-disable-line
        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions

        // Create the plot widths, but for each individual graph
        const widthOfSmallCharts = ((currentFrame.dimension().width / currentFrame.numberOfColumns()) - currentFrame.rem());
        const heightOfSmallCharts = ((currentFrame.dimension().height / currentFrame.numberOfRows()) - (currentFrame.rem() * 3.5));

        const tickSize = widthOfSmallCharts;// Used when drawing the yAxis ticks
        // draw the chart holders
        const chart = currentFrame.plot()
            .selectAll('g')
            .data(newData)
github ft-interactive / visual-vocabulary-templates / small-multiple-column-group / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
            const currentFrame = frame[frameName];

            // define other functions to be called
            const myYAxis = gAxis.yLinear();// sets up yAxis
            const myXAxis0 = gAxis.xOrdinal();// sets up date xAxis
            // const xDomain = data.map(columnNames);// sets up domain for xAxis
            const myLegend = gLegend.legend();// sets up the legend
            // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions

            // Create the plot widths, but for each individual graph
            const widthOfSmallCharts = ((currentFrame.dimension().width / currentFrame.numberOfColumns()) - currentFrame.rem());
            const heightOfSmallCharts = ((currentFrame.dimension().height / currentFrame.numberOfRows()) - (currentFrame.rem() * 2.5));

            const tickSize = widthOfSmallCharts;// Used when drawing the yAxis ticks

            // draw the chart holders
            const chart = currentFrame.plot()
                .selectAll('g')
                .data(plotData)
                .enter()
github ft-interactive / visual-vocabulary-templates / candlestick / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        // define other functions to be called
        const myYAxis = gAxis.yLinear();// sets up yAxis
        const myXAxis = gAxis.xDate();// sets up xAxis
        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions
        const tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks
        const myChart = candlestick.draw();
        const myHighlights = candlestick.drawHighlights();// sets up highlight tonal bands
        const myAnnotations = candlestick.drawAnnotations();// sets up annotations


        // .seriesNames(seriesNames)
        // .highlightNames(highlightNames)

        // create a 'g' element at the back of the chart to add time period
        // highlights after axis have been created
        const axisHighlight = currentFrame.plot().append('g');

        // create a 'g' element behind the chart and in front of the highlights
github ft-interactive / visual-vocabulary-templates / waterfall / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        const myXAxis = gAxis.xOrdinal();// sets up yAxis
        const myYAxis = gAxis.yLinear();
        const myChart = waterfallChart.draw(); // eslint-disable-line no-unused-vars
        const myLegend = gLegend.legend();

        // define other functions to be called
        const tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks
        myChart
            .yRange([currentFrame.dimension().height, 0])
            .plotDim(currentFrame.dimension())
            .rem(currentFrame.rem())
            .colourPalette((frameName))
            .invertScale(invertScale);

        myYAxis
            .scale(myChart.yScale())
            .numTicks(numTicksy)
            .tickSize(tickSize)
github ft-interactive / visual-vocabulary-templates / column-stacked-diverging / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
            const currentFrame = frame[frameName];

            const myXAxis = gAxis.xOrdinal();// sets up yAxis
            const myYAxis = gAxis.yLinear();
            const myChart = stackedColumnChart.draw(); // eslint-disable-line
            const myLegend = gLegend.legend();

            const divergingScaleColours = d3.scaleOrdinal();
            let setColourScale;

            // check number of categories to determine the right palette
            const getColourScale = function getColourScale(series) {
                if (series.length === 5) {
                    setColourScale = gChartcolour.diverging_5;
                } else if (series.length === 3) {
                    setColourScale = gChartcolour.diverging_3;
                } else {
                    setColourScale = gChartcolour.categorical_bar;
                }
                return setColourScale;
github ft-interactive / visual-vocabulary-templates / column-stacked / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        const myXAxis = gAxis.xOrdinal();// sets up yAxis
        const myYAxis = gAxis.yLinear();
        const myChart = stackedColumnChart.draw(); // eslint-disable-line
        const myLegend = gLegend.legend();

        // define other functions to be called
        const tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks

        myChart
            .yRange([currentFrame.dimension().height, 0])
            .plotDim(currentFrame.dimension())
            .rem(currentFrame.rem())
            .colourPalette((frameName));

        myYAxis
            .scale(myChart.yScale())
            .numTicks(numTicksy)
            .tickSize(tickSize)
github ft-interactive / visual-vocabulary-templates / line / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        // define other functions to be called
        const myYAxis = gAxis.yLinear();// sets up yAxis
        const myXAxis = gAxis.xDate();// sets up xAxis
        const myHighlights = lineChart.drawHighlights();// sets up highlight tonal bands
        const myAnnotations = annotation.annotations();// sets up annotations
        const myLegend = gLegend.legend();// sets up the legend
        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions
        const tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks
        const myChart = lineChart.draw()
          .seriesNames(seriesNames)
          .highlightNames(highlightNames)
          .markers(markers)
          .annotate(annotate)
          .interpolation(interpolation);
        const myHighLines = lineChart.draw()
          .seriesNames(seriesNames)
          .highlightNames(highlightNames)
          .markers(markers)
github ft-interactive / visual-vocabulary-templates / sterling-predictor / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];

        // define other functions to be called
        const myYAxis = gAxis.yLinear();// sets up yAxis
        const myXAxis = gAxis.xDate();// sets up xAxis
        const myHighlights = lineChart.drawHighlights();// sets up highlight tonal bands
        const myAnnotations = annotation.annotations();// sets up annotations
        const myLegend = gLegend.legend();// sets up the legend
        const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions
        const tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks
        const predictions = lineChart.draw()
          .seriesNames(seriesNames)
          .highlightNames(highlightNames)
          .markers(markers)
          .interpolation(interpolation)
          .lines(dotLinks);
        const myChart = lineChart.draw()
          .seriesNames(seriesNames)
          .highlightNames(highlightNames)
          .markers(false)

g-axis

Module for rendering axes FT-style

BSD-3-Clause
Latest version published 5 years ago

Package Health Score

36 / 100
Full package analysis

Popular g-axis functions