lg - draw - custom shape

100%

lg - draw - custom shape

✓ Published0🌍 Public

Last edited Dec 20, 2016

Created on Dec 20, 2016

Two small multiples illustrate the same legend layout rendered with default and custom icon shapes. The example uses the viz.js library’s `lg()` component on top of D3 v4, with an SVG output. The first chart draws the standard legend icons, while the second applies a custom `roundRect` drawing function that appends rounded rectangles with `rx` and `ry` attributes. The code sets the data to an array of browser names, adjusts inner padding, and positions the `<g>` groups via SVG transforms.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

lg - draw- line

This example shows two legend groups built from web browser names, with each entry colored by its associated brand color and rendered as a horizontal line. The left legend uses the default `viz.lg()` settings, while the right legend is customized through a `draw` callback and a `size(50)` parameter. The code relies on D3 v4 for SVG manipulation and the Viz.js `lg()` legend generator, using `d3.keys()` to extract data keys from a color-mapped object. Both legends are placed inside separate SVG `<g>` elements via `d3.select().call()`.

NNPashaP

81% match

Loading thumbnail…

lg - draw - circle

This example uses the D3 and viz.js libraries to render two horizontal bar charts of browser names as SVG shapes. The upper chart displays default rectangular bars, while the lower chart repurposes the same data with circular markers and custom padding. The code specifically calls `viz.lg().data(browsers)` and the `draw(viz.lg().circle)` method to switch the visual form. Both charts are placed inside separate `<g>` elements with explicit translations, and the styling is controlled via a shared CSS rule for rectangles and circles.

NNPashaP

80% match

Loading thumbnail…

lg - paddingInner

Two small multiples compare default and customized padding for an ordinal categorical bar chart. The top group uses the default `lg` layout, while the bottom group applies `.paddingInner(.4)` to increase the inner spacing between bars. Both charts render as SVG rectangles with a blue fill and black stroke, driven by the `viz.lg()` API from the viz.js library alongside d3.v4 selection. The static dataset lists eight browser names, and the example highlights how the `paddingInner` parameter alters bar spacing without changing data values.

NNPashaP

75% match

Loading thumbnail…

lg - size

The example displays two groups of squares, each representing a list of browser names, to compare default and customized sizing parameters. The first group uses the default size, while the second group applies a custom size of 50 pixels through the `viz.lg()` layout API from the Viz.js library. The visualization is rendered as SVG using D3 v4, with each rectangle filled with a blue color and a black stroke. The data array of browser names is passed to the layout, and the resulting groups are appended to separate SVG `<g>` elements.

NNPashaP

74% match

Loading thumbnail…

lg - Basic Example

This example visualizes a set of eight browser names arranged as a horizontal sequence of rectangles, with each bar filled in indigo and outlined in black. The chart is built using the Viz.js library’s `viz.lg()` API, which receives the browser array as its data source and sets a fixed height of 160 pixels. The SVG output is generated in a `<g>` element translated 400 pixels to the right, and the rendering is driven by D3 v4’s `d3.select()` method to apply the layout. The visualization displays the categorical labels as evenly spaced bars, with no additional encoding beyond the simple geometric representation.

NNPashaP

73% match

Loading thumbnail…

lg - fill

Two parallel groups of rectangles display the same set of browser names, with the left group using a default fill and the right group using a custom fill function that maps each browser to a distinct color. The example demonstrates the `fill` method of the `viz.lg` API, where the first call applies a uniform indigo fill via CSS and the second call uses a JavaScript function to assign per-rectangle colors from a hard-coded dictionary. Both groups are rendered as SVG rects, placed in separate `<g>` elements with transforms, and the visualization relies on the D3 v4 selection mechanism to invoke the layout generator.

NNPashaP

73% match

Loading thumbnail…

lg - width, rows

Two D3 visualizations display the string array `browsers` using the `viz.lg()` layout function from Viz.js. The first group uses default settings, while the second customizes the layout with `.rows(4)` and `.width(200)`, rendering rectangular cells filled with a blue color and black strokes. Both charts are drawn as SVG elements inside a 960×500 pixel frame, with the library loaded from a CDN and the data hardcoded in the script. The example shows how the layout parameters affect the visual arrangement of the same categorical data.

NNPashaP

73% match

Loading thumbnail…

lg - height

This example displays two bar charts comparing the heights of a list of web browsers. The left chart uses default settings, while the right chart applies a custom height of 400 pixels. Both charts are rendered as SVG rectangles filled with a blue color and black strokes. The visualization is built using the viz.js library’s `lg()` function, which is called with D3’s `select` and `call` methods. The data is hardcoded as a simple array of browser names.

NNPashaP

72% match