Bahamas flag (how to make rectangles and polygons)

100%

Bahamas flag (how to make rectangles and polygons)

✓ Published0🌍 Public

Last edited Mar 15, 2016

Created on Mar 15, 2016

This example builds the Bahamas flag from basic D3.js shapes, using three horizontal rectangles and one overlaid triangle. The code appends three `<rect>` elements to an SVG, each with a distinct fill color—cyan for the top and bottom bands and yellow for the middle—and then adds a black `<polygon>` to represent the triangular hoist side. The polygon’s coordinates are explicitly defined in the `points` attribute, connecting the left edge’s top and bottom corners to a central point, while the rectangles use simple x, y, width, and height properties. Rendering relies on D3’s selection and attribute methods to construct the SVG elements directly.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Fork of Exercise 1

This example displays the flag of the Seychelles as a static SVG graphic, constructed from five colored polygon shapes within a 300-by-150 viewBox. The code uses raw JavaScript and inline SVG elements, including `<svg>` and `<polygon>` tags, to render the flag’s diagonal bands of blue, yellow, red, white, and green. No external libraries or data processing are involved; the visual is defined entirely by hardcoded coordinate points and CSS style properties for fill colors. The page is a minimal HTML document that demonstrates direct SVG manipulation without any framework or dynamic behavior.

Wwgloss

66% match

Loading thumbnail…

US Flag with d3.

This example uses D3.js to render the US flag as an SVG. The code calculates the flag’s proportions from an arbitrary base length, drawing the 13 red and white stripes with `rect` elements and the blue canton with a filled rectangle. Fifty white stars are created using D3’s `symbol` and `symbols` for a five-pointed star path, placed in alternating rows of six and five across the canton. The visualization is built entirely with D3’s low-level selection and joining APIs, scaling to fill the browser window.

Wwgloss

65% match

Loading thumbnail…

other flag

The visualization depicts a stylized national flag composed of three horizontal bands: a dark cyan field, a yellow central stripe, and a black-edged triangle on the left. It shows the flag’s geometric layout using basic SVG shapes—a large rectangle, a smaller yellow rectangle, and a polygon for the triangle—all positioned within a fixed 960 by 500 pixel canvas. Built with D3 v4, the code appends these shapes directly to the SVG container using `d3.select` and shape methods like `append` and `attr`. The rendering relies solely on static SVG attributes, with no data binding or interactive behavior.

CCraftbd

65% match

Loading thumbnail…

French Flag

This example draws the French flag as three vertical rectangles, each with a solid color: blue, white, and red. The visualization uses D3 v4 to append three `rect` elements to an SVG canvas, setting explicit `x`, `y`, `width`, and `height` attributes to position the stripes side by side. No data is loaded; the rectangles are hardcoded, and the flag occupies the top 300 pixels of a 960 by 500 pixel viewport. The code demonstrates basic SVG shape creation with D3’s selection and append methods.

CCodincamper

65% match

Loading thumbnail…

fresh block

This example shows a simple geometric composition of three stacked rectangles in alternating blue and yellow, paired with a black diagonal line that cuts across them. The visualization is created using the D3.js library, version 3.5.5, to append SVG elements to the page. Specifically, the code uses `d3.select` to add `rect` shapes with explicit pixel coordinates and fills, and `d3.svg.line()` to generate a path from three data points. The line is drawn with zero stroke width and a black fill, making it a solid triangle-like shape. The rendering relies entirely on static SVG attributes, with no data loading or interaction.

BBrandonStroud

64% match

Loading thumbnail…

french flag

This example draws the French flag as three vertical SVG rectangles with the national colors: blue, white, and red. Each rectangle is 100 pixels wide and 200 pixels tall, appended directly to an SVG canvas using D3 v4’s `svg.append` and `.attr` methods. The code uses `d3.select` to create the SVG container, with the rectangles’ positions and fill colors set explicitly. The visualization demonstrates a simple, static rendering of a flag without data or interactivity, built from hard-coded dimensions and color values.

BBrieLewis

64% match

Loading thumbnail…

D3 Rectangle Examples

This example demonstrates the creation of six SVG rectangles using D3.js, each illustrating different visual properties such as fill color, stroke width and alignment, offset positioning, and corner radii. It also includes a seventh set that arranges three colored rectangles with varied dimensions and placements. The code uses D3’s selection and append methods to build SVG elements, with data defined as inline JavaScript objects specifying attributes like width, height, and style. The page is rendered at a fixed size and relies on D3 2.4.5.

GGuerino1

64% match

Loading thumbnail…

Question 2

This example displays the Italian national flag as three vertical rectangles in green, white, and red. The code uses raw D3 v4 selection and append operations to create the fixed shapes, with hardcoded attributes for color, size, and position. Unlike a typical data-driven chart, it directly assigns fill, width, height, x, and y values to each rectangle rather than mapping from a dataset. The rectangles are appended to an SVG selection, demonstrating a simple static graphic without interaction or animation.

KKerchoo

64% match