Here's a collection of projects that we'll be working with during the D3 workshop.
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:
- Baltimore Arrest Records
- Oregon Baby Names - 2012
- New Orleans PD Stop and Search
- NYC Traffic Collisions
- Berkeley Arrest Records
ES6 and Coding style
- 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
consthelps 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):
- 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 (
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.
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.