The Framework for D3 Elements

This chapter is intended to provide an overview of some of the simpler things that D3.js can do but in a way that may improve understanding of how images can be added to a web page and how they can be manipulated.

Loosely speaking, we will look at how objects (elements like circles, rectangles, lines, and even text) can be declared and added to a page, how their attributes in relation to the page (position, size, shape, and actions) can be changed, and how their style (color, width, and transparency) can be applied.

As we go through the explanation of different changes that can be applied to different elements, there will be a small amount of repetition where there is cross-over with related drawing features. Please be patient. The aim is to have each section complete and practical in its own right.

The framework

To be able to demonstrate how these three related aspects of drawing objects work, we will have to use a small and simple script to draw them in your web browser.

We will just take a moment to explain the script that draws a circle.

Here are the contents of the file in its entirety.