Link Search Menu Expand Document
Last updated: | Permalink

D3

Below are some additional info that can help with your D3 assignments:

Table of Contents

Troubleshooting

If you’ve made edits to the local file, saved it, and refreshed your web browser view of that local file but something you expect to change does not change… Our main suggestion is to refresh bypassing the cache. That way any “stale” files will get updated. Here are instructions to bypass the cache when reloading the page for the big browsers.

Likewise, if you’ve committed and pushed to GitHub, you can see your changes on the GitHub repository online, but your GitHub pages page does not change… Also try bypassing the cache! You can also check the build status in the top right of the GitHub repository to see if there were any errors.

In-class examples

See our original base and completed examples from the in-class tutorial:

Resources

Warning: There are different versions of D3. Make sure that the tutorials that you are using are up-to-date and use the same version we are (version 7).

Function/method chaining

D3, and this assignment, use function chaining to apply several changes to the same visualization.

You don’t have to use chaining. E.g., instead of this:

d3.select('body')
  .append('p')
    .text('Hello, world!');

you can write:

let body = d3.select('body');
let p = body.append('p');
p.text('Hello, world!');

ES6 arrow functions =>

We can use ES6 Arrow functions to simplify our code. E.g., instead of writing function(d){ return d.name; } we write d => d.name or d => { return d.name; }. We would use the latter version with surrounding {...} when we need multiple lines of code vs. just a simple expression.

Note that using the arrow functions we are not able to use d3.select(this) like you see in many esp. older D3 examples. Instead, in D3v6 you can now use d3.select(event.currentTarget). See this post for an older discussion and the D3v6 migration guide for this new approach.


© 2023 Cody Dunne. Released under the CC BY-SA license.