The International Foundation for Information Technology (IF4IT)

Sample Left Menu Links

This is dummy paragraph 1 text that would go in this section of the page.

This is dummy paragraph 2 text that would go in this section of the page.

This is dummy paragraph 3 text that would go in this section of the page.

This is dummy paragraph 4 text that would go in this section of the page.

This is dummy paragraph 5 text that would go in this section of the page.

This is dummy paragraph 1 text that would go in this section of the page.

This is dummy paragraph 2 text that would go in this section of the page.

This is dummy paragraph 3 text that would go in this section of the page.

This is dummy paragraph 4 text that would go in this section of the page.

This is dummy paragraph 5 text that would go in this section of the page.

D3 Rectangles Tutorial and Cookbook

This document is meant to act as a tutorial that helps understand how draw, use, and work with D3 rectangles... all embedded within an HTML document. The page attempts to segment each example into small and contained HTML div elements, while trying to show different traits and manipulations. Hopefully, you'll find it useful in your attempts to learn and use D3.

How to use this document: If you'd like to understand the code, simply open up the source for the HTML page and search for the title of the HTML div section that you're interested in. The page source is partitioned into four distinct areas:

  1. The data that is used for examples
  2. The D3 Javascript code, each wrapped as distinct functions
  3. The HTML Body that includes each HTML div element
  4. The actual Javascript function calls that correlate with each appropriate HTML div element.

NOTE: The examples on this page are intended to grow and improve, over time, so please always feel free to check back for and provide feedback on improvements.

Simple Rectangle

Simple Rectangle; No Stroke; No Offset;

This example draws a simple rectangle. It has no offset.

Simple Rectangle; Stroke=4; No Offset;

This example draws a simple rectangle with a border stroke=4. Notice it has no offset and the border gets clipped.

Simple Rectangle; Stroke=4; Offset is x=2, y=2;

This example draws a simple rectangle. Notice it has an offset of x=2 and y=2 that ensures the whole border is visible.

Simple Rectangle With Rounded Corners

Rounded Rectangle; No Stroke; No Offset;

A rectangle with rounded corners. Notice it has no offset.

Rounded Rectangle; Stroke=4; No Offset;

This example draws a simple rectangle with a border stroke=4. Notice it has no offset and the border gets clipped.

Rounded Rectangle; Stroke=4; Offset is x=2, y=2;

This example draws a simple rectangle. Notice it has an offset of x=2 and y=2 that ensures the whole border is visible.

Multiple Rectangles

Multiple Simple Vertically Stacked Rectangles

Three simple rectangles.

Two Horizontal Transitions of Rectangles

Transitions the x-axis of each rectangle twice, based on two sequential transition methods.

Continuous Horizonal Transitions

Continuously transitions the x-axis of each rectangle.

This is the IF4IT Footer Message for this web page.

This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).