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.
ft-interactive / visual-vocabulary-templates / extras / bar-stacked-german-election / index.js View on Github 
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);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)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)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);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);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')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)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()]);
xAxisObject.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)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')
