D3

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

Table of Contents

• Troubleshooting
• In-class examples
• Resources
• Function/method chaining
• ES6 arrow functions =>

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:

• https://github.com/NEU-DS-4200-S22/D3_Examples_Base
• https://github.com/NEU-DS-4200-S22/D3_Examples_Complete

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).

• D3 Homepage
• D3 API Documentation
• D3 v4 and v6 examples on the D3.js Graph Gallery. Warning: You will need to manually click the d3 v6 button on each example, then do any conversion necessary to work with v7.
• D3 v7 examples on Observable. Warning: It is hard to copy whole examples from Observable.
• Breaking changes in D3v6
• D3 Wiki Gallery
• D3 Wiki Tutorials
• Tons of examples on bl.ocks.org. It is much easier to duplicate whole examples vs. Observable.
• D3 Tips and Tricks v7.x by Malcolm Maclean.

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.