Here's a collection of projects that we'll be working with during the D3 workshop.

http://codepen.io/collection/DyJzWy/#

The goal is to introduce you to D3: a powerful JavaScript library for transforming datasets into visuals. It's entirely possible that you may not have much JavaScript (or even coding) experience. This is perfectly fine. I do assume a little bit of experience here but if you need to catch up on some of the principles, these projects should help you "backfill" your knowledge. The experience during our short time together may be as trivial as you just tweaking and manipulating some code that's already been written. Again, this is perfectly fine. After the fact, I hope these resources will help you further develop your knowledge if you're interested. We'll discuss D3 in the workshop however if there is something we glossed over in our session that didn't quite make sense to you, it may be further described below.

Data Sets

Working with JSON some datasets from the web (for example, Twitter, Facebook, and other services) can be fun but also requires an advanced level of skill. Accessing this data usually requires user authentication and some infrastructure and resources for handling requests. The use of authentication keys and other cross-domain issues may also make it frustrating when trying to get a hold of a dataset that is out there in the wild. That said, Socrata Open Data is an excellent starting place when finding JSON datasets that don't throw up any barriers. It requires a little bit of exploration to find good datasets but there are some thought-provoking easter eggs. Here are some interesting JSON feed to begin working with:

ES6 and Coding style

These projects make some use of more recent JavaScript ECMAScript 6 (ES6)features. It's worth noting that some of these features don't work readily in every browser. In these code pen projects, the code is being processed by a tool called Babel. Babel is responsible for taking ES6 code that might not work in all browsers and "transpiling" it so it can work in more browsers. We use a few ES6 features to make our code much less verbose and a little easier to understand. Babel makes this code backwards-compatible for us. If you're familiar with JavaScript but not ES6 then it may be worth learning more about these features:

  • Arrow Functions make our iteration code much easier to read and understand.
  • const and let are new keywords for declaring variables. We use these in place of var now as a best practice. Overwriting variables as an application runs is perfectly fine to do but as a practice it can get you into trouble and lead to some situations where it is difficult to troubleshoot your problems. Using const helps us track variables that cannot be reassigned new values while let allows us to track variables that can be overwritten. By default I like to use const as a keyword for declaring variables until you are in a situation where you need to "mutate" a variable. When the occasion arises, then use let. Here's an excellent explanation of the principle.

Here are stylistic preferences (not exclusive to ES6):

  • Stylistically, we don't use semicolons to end statements here. While this has been a practice in JavaScript for a long time, semicolons are not required. As a best practice, I usually include them in JS that I know will not be transpiled with Babel or run in an ES6 compatible environment. This helps code get parsed more quickly by the browser. However, in these code examples, Babel is adding semicolons anyway so excluding them makes the code read more cleanly and makes one less thing you need to remember to do.
  • In some cases higher-order functions are used in these examples. Higher order functions are functions that can be customized with parameters to make new functions which can then be used on their own. While they're not exclusive to ES6, they're commonly used in conjunction with ES6's new Arrow function syntax. Higher-Order functions have become a more popular pattern in the recent years. Here's are more details.

ES5 Iteration Methods

A common pattern that is used to transform data is with ES5 Iteration methods (map, forEach, reduce, filter). These haven't been around forever but they've been part of JavaScript much longer than ES6. The projects on Array and Object basics show how these can be used to transform data from their original source into something that can be more readily used. It even shows these methods alongside the traditional for loop that is still commonly used. As a personal preference I think that iteration methods read easier and as less difficult to reason about. Consider the different places you might use these methods:

  • Taking time stamp data and combining it into a valid date object.
  • Mapping a certain attribute (such as the race of an arrest) into a color value for our visualization.
  • Taking a whole collection of data and summing or averaging quantitative values down to a single number.

SVG

These D3 examples create geometry in SVG. SVG is a node-based structure for specifying shapes. It's very handy for the type of visualizations that we're doing here. One project introduces your to the principles of SVG. Essentially, D3 is used to take JSON data and use it to write SVG node structures that represent our visuals.