From the wide range of things you can do with D3, still one of the best things to make is the timeseries plot. In this post, I’ll walk through the basics of making a multi-column point plot/scatter plot. We’ll use a GISS dataset from NASA; dataset can be found here.

Setup

Loading the Dataset

First things first, let’s load the dataset into the visualization using the dashboard.dataset() function.

var data=dashboard.dataset('f88aa708e-5388-4ed8-8507-ca61c1d6fbf3'); //the function uses the file ID to import the dataset content as an object

Loading Libraries (optional)

Now that the dataset in contained in the variable “data”, let’s setup the libraries we need. In this case we only need one external library, the d3legeneds library. The legend is not an essential part of this project, but it’s considered best practice…feel free to skip it. Adding it is easy: just copy a link to a CDN containing that script by clicking on the “Add Library” button. Feel free to use this link:

https://assets.datazar.com/external/d3/d3legends.js

Defining the Columns

Since we’re not going to be using all the columns from the dataset, we need t define which columns we’re going to be plotting.

var columns=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

Once we have defined the columns, let’s also define what our x-axis is going to be; it’s the years in the dataset. And then let’s declare what our axes labels are.

var x='Year',y='';

//the variable y is going to be left blank since it's going to change for every month

var xLabel="Year",yLabel="Temperature";

Container SVG

Here, we’re defining the SVG that contains all the elements of the plot. In addition, we also define the colors we’re going to be using for the points, the margin for the svg, and the x-axis itself.