The mechanics of web-based charts

Today, I suggest we go through the quickest introduction on how a website works. And more importantly, how a graph on a website is built.

If you're interested, you can read a long-form version of this on the d3 graph gallery!

If you enjoy charts (I guess you do), chances are you've seen a ton of them on the web.

So, it's worth knowing just a tiny bit about how this magic happens!

Let's break it down:

1. HTML - The Foundation

Try this:

1. Create a file on your laptop and name it index.html
2. Add this content in the file
3. Double-click the file to open it in your browser.

Congrats, you just built a minimalist website!

<p> stands for paragraph. HTML has a lot of attributes like this, like <h1> for titles, and <img> for images.

Every webpage you visit is, at its core, just an HTML file. Just like the one you made!

2. CSS - The Styling

A website with plain black text? Pretty boring. CSS is here to fix that.

It lets you change the look of your page. For example, you can turn your paragraph red with this rule:

Here the CSS is included directly in the HTML file, but it is often provided in an external stylesheet.

CSS seems simple at first... but trust me, it gets tricky fast. If somebody tells you CSS is easy, they just don't know much about it.

3. SVG - The Drawing Tool

To make a chart, we need to draw shapes: circles, rectangles, lines... That's where SVG comes in.

SVG lets you create graphics directly in your HTML file. Let's place three circles on our page. That's almost a scatterplot!

The only difference? In a real chart, we'd use data to position the points at specific locations and draw axes (with more SVG!).

4. JavaScript - The Brains

JavaScript makes things interactive.

It lets you say for instance: "When the user clicks a circle, make it purple!" This is how the JavaScript code for that looks like, wrapped in a <script> tag:

You don't need to understand exactly how it works, it's just to give you an idea of what happens when you show a tooltip, click on a button or zoom on a chart.

What's really important to understand is the JavaScript runs in your browser.

That means if your site needs to do something complex, like running a regression or plotting thousands of points, it's your computer doing the work, not some remote server.

So, Why Should You Care?

First, I hope I demystified interactive graphics! Look at the interactive scatterplot we've made in 4 minutes! We're not that far from creating a real chart, and d3.js can help us on many of the steps.

Second, if you use R or Python, you're already working with these technologies, whether you realize it or not!

• When you use Plotly (R/Python) or Bokeh (Python), these libraries are secretly writing the HTML, CSS, and JavaScript for you.
• When you build reports in Quarto or Jupyter, you're actually generating an HTML file. Just like the one you made earlier! This is why you can create stunning interactive effects with Quarto.

Perhaps this does not sound of any interest for you. But trust me, understanding the basics of dataviz on the web will change the way you think about your tools.

Next week, I'll show you how this knowledge helps you pick the right tools for your projects. And why I'm always skeptical when someone says they need an R Shiny app.

PS: Once you have an HTML file like the one we just built, you can host it for free on GitHub and get a public URL. Just like any other website! I cover exactly how to do this in Module 4 of my Productive R Workflow course.

PPS: I'm a web developer and there are a couple of posts like this I would like to write. Are you interested in web-related stuff? Drop me an email and let me know.

See you then!
Yan