What Do We Need to Get Started?
Explore the essential tools and foundational concepts required to start creating interactive data visualizations with D3.js. Understand the roles of HTML, JavaScript, CSS, and web servers to comfortably begin coding and experimenting with D3 visualizations.
We'll cover the following...
Intended audience
This course is intended to be useful to an absolute beginner to D3.js and JavaScript. Its aim is to allow the reader to implement practical examples of data visualization and graphics in a way that develops knowledge and skills by “doing” rather than rote learning. After working through the book, the reader should be comfortable with being able to develop their own code and be set to explore advanced topics.
Prerequisites
Let’s be honest with each other; D3 is not the simplest way to draw a graph.
However, that doesn’t mean that it’s beyond those with a little computer savvy and a willingness to experiment. Remember, failure is your friend. Just learn from your mistakes, and it’ll all work out.
So, in no particular order, here is a list of good things to know. None of which are essential, but any one (or more) of which will make life slightly easier.
- HyperText Markup Language (HTML)
- JavaScript
- Cascading Style Sheets (CSS)
- Web Servers
HTML
HTML stands for HyperText Markup Language. It is the stuff that web pages are made of. Just remember that all we’re going to use HTML for is holding the code that we will use to present our information. This will be a .html (or .htm) file, and they can be pretty simple. But do not worry for now, we’ll look at some in a moment.
JavaScript
JavaScript is what’s called a “scripting language”. It is the code that will be contained inside the HTML file that will make D3 do all its fanciness. In fact, D3 is a JavaScript library. It’s the native language for using D3.
Knowing a little bit about this would be really good, but to be perfectly honest, I didn’t know anything about it before I started. With some trial and error, you can figure out what’s going on.
In fact, most of what this collection of information’s about is providing examples and explanations for the JavaScript components of D3.
Cascading Style Sheets (CSS)
Cascading Style Sheets is a language used to describe the formatting (or the “look and feel”) of a document written in a markup language. Most people shorten the name to “Style Sheets” or “CSS.” The job of CSS is to make the presentation of the components we will draw with D3 simpler by assigning specific styles to specific objects.
One of the cool things about CSS is that it is an enormously flexible and efficient method for making everything on the screen look more consistent, and when we want to change the format of something, we can just change the CSS component and the whole look and feel of our graphics will change.
Web server
Web servers can go one of two ways. If you have access to a web server and know where to put the files so that you can access them with your browser, you’re in a good place. If you’re not quite sure, continue to read on.
What is this web server thing?
A web server will allow us to access our HTML files and will provide the structure that allows them to be displayed on a web browser.
Throughout this document, I will be describing the files and how they’re laid out in a way that has suited a local web server, but they will work equally well on a remote server. I will explain a little more about how I arrange the files later in the “Getting D3” section.
In this course, we will be using a Python web server.