How to use g-legend - 10 common examples

To help you get started, we’ve selected a few g-legend 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 / extras / bar-stacked-german-election / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];
        const partyColours = d3.scaleOrdinal()
                .domain(Object.keys(gChartcolour.germanPoliticalParties_bar))
                .range(Object.values(gChartcolour.germanPoliticalParties_bar));

        const myXAxis = gAxis.xLinear();// sets up yAxis
        const myYAxis = gAxis.yOrdinal();
        const myChart = stackedBarChart.draw(); // eslint-disable-line
        const myLegend = gLegend.legend();

        // define other functions to be called
        const tickSize = currentFrame.dimension().height + (currentFrame.rem() * 1.4);// Used when drawing the xAxis ticks

        myYAxis
            .align(yAxisAlign)
            .domain(plotData.map(d => d.name))
            .rangeRound([0, tickSize], 10)
            .frameName(frameName);

        myXAxis
            .align(xAxisAlign)
            .domain([Math.min(xMin, valueExtent[0]), Math.max(xMax, valueExtent[1])])
            .numTicks(numTicks)
            .xAxisHighlight(xAxisHighlight)
            .frameName(frameName);
github ft-interactive / visual-vocabulary-templates / treemap / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
            const currentFrame = frame[frameName];

            // define other functions to be called
            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 myTreemap = treemap.draw();

            // 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');

            axisHighlight.append('rect')
                .attr('width', currentFrame.dimension().width)
                .attr('height', currentFrame.dimension().height)
                .attr('fill', '#ededee');

            myTreemap
                .plotDim(currentFrame.dimension())
                .seriesNames(seriesNames)
github ft-interactive / visual-vocabulary-templates / priestley-timeline / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];
        // define other functions to be called

        const yAxis = gAxis.yOrdinal();// sets up yAxis
        const xAxis = gAxis.xDate();
        const myChart = priestleyChart.draw();
        const myLegend = gLegend.legend();
        const myAnnotations = priestleyChart.drawAnnotations();// sets up annotations

        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions
        const tickSize = currentFrame.dimension().height;// Used when drawing the yAxis ticks

        yAxis
            .align(yAxisAlign)
            .domain(plotData.map(d => d.name))
            .rangeRound([0, tickSize], 10)
            .frameName(frameName);

        xAxis
            .align(xAxisAlign)
            .domain([Math.min(xMin, valueExtent[0]), Math.max(xMax, valueExtent[1])])
            .interval(interval)
            .fullYear(true)
github ft-interactive / visual-vocabulary-templates / choropleth / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];
        const myLegend = gLegend.legend();
        const projection = d3.geoMercator()
            .center([10.411293, 51.5]) // Middle of Germany
            .scale(currentFrame.scale())
            .translate([currentFrame.dimension().width / 2, currentFrame.dimension().height / 2]);

        // define other functions to be called
        myChart.projection(projection);

        d3.select(currentFrame.plot().node().parentNode)
            .call(currentFrame);

        currentFrame.plot()
            .append('g')
            .attr('class', 'choropleth')
            .datum(data)
            .call(myChart);
github ft-interactive / visual-vocabulary-templates / grouped-symbol-column / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
            const currentFrame = frame[frameName];
            // define other functions to be called
            const xAxis = gAxis.xOrdinal();// sets up xAxis
            const xDotAxis = gAxis.xOrdinal();// sets up xAxis
            const xTotalAxis = gAxis.xOrdinal();// sets up xAxis
            const yDotAxis = gAxis.yOrdinal();
            const myChart = groupedSymbolChart.draw();
            const myLegend = gLegend.legend();
            const maxValue = valueExtent[1];
            const maxRows = (maxValue / divisor) / numberOfColumns;
            const rowIndex = d3.range(maxRows);

            // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions
            const tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks

            myChart
                .showNumberLabels(showNumberLabels);


            xAxis
                // .align(xAxisAlign)
                .domain(plotData.map(d => d.name))
                .rangeRound([0, tickSize])
                .frameName(frameName);
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)
            .enter()
            .append('g')
            .attr('id', d => d.name)
            .attr('class', 'areas')
github ft-interactive / visual-vocabulary-templates / strip-plot / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
            const currentFrame = frame[frameName];
            // define other functions to be called
            const yAxis = gAxis.yOrdinal();// sets up yAxis
            const xAxis = gAxis.xLinear();
            const myChart = dotPlot.draw();
            const myQuartiles = dotPlot.drawQuartiles();
            const myLegend = gLegend.legend(); // eslint-disable-line no-unused-vars
            const tickSize = currentFrame.dimension().height; /* Used when drawing the yAxis ticks */ // eslint-disable-line no-unused-vars
            // const plotDim=currentFrame.dimension(); // useful variable to carry the current frame dimensions

            yAxis
                .align(yAxisAlign)
                .domain(plotData.map(d => d.group))
                .rangeRound([0, currentFrame.dimension().height])
                .frameName(frameName);

            xAxis
                .align(xAxisAlign)
                .logScale(logscale)
                .domain([Math.min(xMin, valueExtent[0]), Math.max(xMax, valueExtent[1])])
                .numTicks(numTicks)
                .xAxisHighlight(xAxisHighlight)
                .frameName(frameName)
github ft-interactive / visual-vocabulary-templates / germanyelex-bar / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
        const currentFrame = frame[frameName];
        // define other functions to be called

        const yAxis0 = gAxis.yOrdinal();// sets up yAxis
        const yAxis1 = gAxis.yOrdinal();// sets up yAxis
        const xAxis = gAxis.xLinear();
        const myChart = barChart.draw();
        const myLegend = gLegend.legend();

        // const plotDim=currentFrame.dimension()//useful variable to carry the current frame dimensions
        const tickSize = currentFrame.dimension().height;// Used when drawing the yAxis ticks
        yAxis0
            .align(yAxisAlign)
            .domain(plotData.map(d => d.name))
            .rangeRound([0, currentFrame.dimension().height])
            .frameName(frameName);

        yAxis1
            .paddingInner(0.06)
            .align(yAxisAlign)
            .domain(seriesNames)
            .rangeRound([0, yAxis0.bandwidth()]);

        xAxis
github ft-interactive / visual-vocabulary-templates / strip-plot / index.js View on Github external
Object.keys(frame).forEach((frameName) => {
            const currentFrame = frame[frameName];
            // define other functions to be called
            const yAxis = gAxis.yOrdinal();// sets up yAxis
            const xAxis = gAxis.xLinear();
            const myAnnotations = annotation.annotations();// sets up annotations
            const myChart = dotPlot.draw();
            const myQuartiles = dotPlot.drawQuartiles();
            const myLegend = gLegend.legend(); // eslint-disable-line no-unused-vars
            const tickSize = currentFrame.dimension().height; /* Used when drawing the yAxis ticks */ // eslint-disable-line no-unused-vars
            // const plotDim=currentFrame.dimension(); // useful variable to carry the current frame dimensions

            yAxis
                .align(yAxisAlign)
                .domain(plotData.map(d => d.group))
                .rangeRound([0, currentFrame.dimension().height])
                .frameName(frameName);

            xAxis
                .align(xAxisAlign)
                .logScale(logscale)
                .domain([Math.min(xMin, valueExtent[0]), Math.max(xMax, valueExtent[1])])
                .numTicks(numTicks)
                .xAxisHighlight(xAxisHighlight)
                .frameName(frameName)
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')
        .data(plotData)
            .enter()
        .append('g')
        .attr('id', d => d.name)
        .attr('class', 'lines')

g-legend

{DESCRIPTION}

BSD-3-Clause
Latest version published 6 years ago

Package Health Score

40 / 100
Full package analysis

Popular g-legend functions