Before we wrap up, let’s take a second to analyze the chaining syntax that is a D3 signature.

In the previous exercise, we referenced the following code:

let dataset = [55,34,23,22,59]; d3.select("body") .selectAll("div") .data(dataset) .enter() .append("div") .text("Some text");

At first, this style may just seem like one big chain! But the key takeaway is that the methods that precede others in the chain return what is needed for the next step in the chain. By chaining, you can save some lines of code in your program.

You’ll see that the d3 community will indent some parts of the chains with four spaces, and other parts of the chain with two. The lines with two spaces indicate that the selection has changed:

var h1 = d3.selectAll("section") .style("background", "steelblue") .append("h1") .text("Hello!");



Indent the .append() method, to indicate changes to the selection from the inserted div elements, by only indenting that line two spaces and not four.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?