3 D3 in the Console
Read IDVW2, Chapter 6: Drawing with Data. Skip pp. 89-96 as we will not be drawing bar charts with the
3.1.1 Select by tag
The ability to select elements on a page is key to being able to manipulate them.
d3.select() will select the first match;
d3.selectAll() will select all matches.
selects the first circle in the order in which circles appear in the
<svg> grouping. If there were more than one circle we could select them all with:
We can select HTML elements by tag in the same way:
3.1.2 Select by class
Classes are selected by adding a “.” before the class name:
This provides one method of selecting a certain collection of elements of the same type.
3.1.3 Select by ID
IDs differ from classes in that they are unique identifiers. IDs are selected by adding a “#” before the ID:
3.1.4 Store selections
It is often helpful to store selections for later use. Here we store the svg selection in
var; we, however, will stick with
varto be consistent with IDVW2. Of course you’re welcome to use
Store circle selection in a variable:
3.2 Modify existing elements
Try out the code in this section with a downloaded copy of five_green_circles.html opened in Chrome and the Console visible.
3.2.1 Modify attributes
3.2.2 Modify styles
It is often difficult to remember whether to use
.style()In general, properties such as position on the SVG, class, and ID are attributes, while decorative properties such as color, font, font size, etc. are styles. However, in some cases, you can use either. For example, the following both make the circle blue:
The first will add a
fill="blue" attribute to the
<circle> tag, while the latter will add
style="fill: blue;". All is well and good until you find yourself with both in the same tag, in which case the
style property will take precedence. The bottom line: don’t mix the two options because it can cause problems.
To further complicate matters,
.style()is just shorthand for
.attr("style", "...")so the following are in fact equivalent:
In other words, style is an attribute!
3.2.3 Modify text
This section is interactive. Hover over code as directed to observe effects.
Hover to execute this code (and fix the typo):
Hover on this SVG to execute the code below it (and fix the typo):
<text>tag can be tricky. It differs from HTML text tags (
<p>, <h1>, <h2>,etc.) in that it has
yattributes that allow you to position text on an SVG canvas. Unlike HTML, the fill attribute controls the color of the text. Compare:
3.2.4 Move SVG text
Hover on this SVG to execute the code below it:
3.3 Add elements
Continue trying out code with
five_green_circles.html open in Chrome.
The following adds a
<p> tag but doesn’t change how the page looks, since there’s no text associated with it.
To add text, use
To debug adding an element, go to the Elements tab to see what was added and where. If an element is in the wrong place in the HTML tree, it will not be visible.
Likewise, here we add a
<circle> to the
<svg>, but we can’t see it since it has no attributes.
Adding attributes will create visible circles:
d3.select("svg").append("rect").attr("x", "0").attr("y", "0") .attr("width", "500").attr("height", "400").attr("fill", "lightblue"); d3.select("svg").append("circle").attr("cx", "200") .attr("cy", "100").attr("r", "25").attr("fill", "orange"); d3.select("svg").append("circle").attr("cx", "300") .attr("cy", "150").attr("r", "25").attr("fill", "red");
We can use a saved selection to assist in creating a new element:
(IDVW2, pp. 97-98)
3.4 Remove elements
These methods will remove matching elements in order, starting with the first find in the document.
3.5 Exercise : green circles
Download and open a fresh copy of five_green_circles.html in Chrome. Open Developer Tools open and do the following in the Console with D3:
Select the circle with ID “henry” and make it blue.
Select all circles of “apple” class make them red.
Select the first circle and add an orange border (“stroke”), and stroke width (“stroke-width”) of 5.
Select all circles of “apple” class and move them to the middle of the svg.
3.6 Exercise : blue circles
Download and open a fresh copy of six_blue_circles.html in Chrome. Open Developer Tools and execute Steps 1-4 one at a time in the Console. After Step 4, refresh the page to go back to Step 1 if so desired. (You do not need to create a loop as in the visual.)
This exercise is provided as a challenge. It’s fine to skip this exercise and move on to the next section.
3.7 Bind data… finally!
(IDVW2, pp. 98-108)
To follow along with the code in this section, download and open six_blue_circles.html.
Check data binding:
Set x-coordinate of each circle to data value using arrow function:
We’ll bind a new set of data to the circles, this time storing the dataset in a variable:
We’ll also store a selection of all circles before binding the data:
And now, the data bind:
Nothing appears to have happened; the circles remain the same and there is no evidence of any changes looking at the circles in the DOM (see Elements tab).
We can check that the data are indeed bound with:
Modify elements w/ stored selections, bound data:
Same as above, using arrow functions:
Note that if we bind a new set of data to the DOM elements, the original set will be overwritten:
3.8 Exercise : data bind
Download and open a fresh copy of six_blue_circles.html in Chrome and practice binding data to the circles and modifying the circles based on the data as in the examples above.