I don’t know what fun sounds like to you. But data science and pretty charts are a match for me. I’m also on this quest to explore various areas of IT that I think might be a fit for where I go next. While this probably isn’t based on reality, the idea of making sense of data and telling a story from it kind of appeals to me.
Probably because I didn’t read the description that closely, I missed that this workshop included using a JavaScript library for displaying data that “sparkles.” JavaScript wouldn’t have scared me away, though. Back in my day (yes I’m that old), I spent the first decade of my IT career as a web developer. This was pre-HTML5 and when JavaScript was only for client-side scripting. JavaScript was a cross-browser support and accessibility nightmare.
JavaScript, SVG, and DOM
Fast forward to today, JavaScript libraries fuel pretty much most modern web applications with scripts that operate both client-side (think pop-up alert) and server-side (think form submission). Before I get into the magic of this JavaScript library, I need to clarify two other terms: Super Vector Graphics (SVG) and Document Object Model (DOM).
Circa 2007, you would be hard-pressed to find a browser that supported SVG without a plugin. Super Vector Graphics are an image type like logos and shapes that can scale without looking pixel-y. The other kind of image type is raster. JPG and GIFs fall into this category. We don’t care about them in the session. Maybe for hot dog/not hot dog tests, but not this.
Lastly, Document Object Model (DOM) allows you to modify web pages client-side without reloading the web page. In the olden days, to modify DOM you probably wrote browser-specific code for Internet Explorer and Netscape.
D3.js
Okay, so now for the start of this data-visualization workshop: D3.js. This JavaScript library, named for Data-Drive Documents, modifies the Document Object Model (DOM) to display charts as SVG graphics.
You can do some really fancy sh*t with it. While there are other charting libraries that you could use like Google Chart, you will trade away the flexibility and scalability that you can get from the D3.js libraries.
See more examples here at d3 Gallery on GitHub.
Getting Started
Okay, so all of this sounds cool, and you feel okay about tweaking other people’s JavaScript code, in the short-term, you need two things: a dataset and a platform to run the code.
- Dataset. In response to an attendees question about where to find some useful data to experiment with the D3.js library, the presenters recommended GitHub for datasets and also data.gov
- Platform. Where are you going to run your JavaScript code? If you have a web server, you can run it from there. However, that isn’t very efficient when you have to keep saving and reloading. In this workshop, we used Observable to run code. While Observable is jenky in Chrome, its benefits include the agile to save things in notebooks and quick start by creating forks from other people’s public notebooks
Conclusion
Upon leaving this session, I felt pretty excited that I could use D3.js and create my charts. As a sometimes mind-mapper, the collapsible tree layout appeals to me. I would love to create dynamic mind-maps based on some data in a file.
Can you think of something for which you would love to create a chart or graph?
PS — If you are interested in completing this workshop, here is the link that the presenters shared with us: https://observablehq.com/@project-essex/d3-workshop.