Introduction

Overall, it has been a bit of a challenge to get D3 working the way I wanted. Certainly, a great bit of all those struggles can be attributed to my personal level of JavaScript knowledge. And it is not only about the language itself, but rather about the whole connected ecosystem of libraries and frameworks. This site employs Next.js as the main framework, and so I wanted to make it work here. There are a couple examples of how to handle D3 within a Next.js or React environment, but that is mostly it. The rest of documentation is written from the perspective of vanilla JavaScript (from what I understand), and graphics examples in the Observable flavour, which acts differently when deployed somewhere else. I had to figure it all out on my own.

A couple of words on the actual exercise. The final solution you are seeing below took a little under three hundred lines to create and is based on this example on the official D3 site. I will not go over the code in detail, but rather bring out a couple of interesting issues I had to overcome. The underlying data describes electricity consumption of an apartment flat in Tallinn, Estonia. The challenge arose as an assignment within the Data Mining (ITI0217) course at TalTech.

Getting started

So, yeah, the first thing was to figure out how D3 works within Next.js. There is exactly one example of how to do that in the "Getting started" section of their website. Not quite the exhaustive documentation I was expecting. I started off by installing D3 within my project and then proceeded to create the actual visualization.

npm install d3

One of the important things to remember is that you need to use a useEffect hook in order for visualization to render correctly. This is how it looks for me:

export function Chart (props)  {
  useEffect(() => {
    const margin = ({top: 70, right: 0, bottom: 0, left: 40});
    const dateExtent = d3.extent(props.data, d => d.date);
    ...
    createChart(props.data, width, height, xAxis, yAxis, x, y)
    }, [props.data]);
}

And another is that the approach described in most D3 examples, where the <svg> tag is created by calling d3.create("svg") did not work for me. Instead, I had to turn to d3.select option and created the <svg> tag within a separate <div id="chart"> element like so.

const svg = d3.select("#chart").append("svg")
  .attr("viewBox", [0, 0, width, height])

Once I figured this out, the rest became a little simpler and easier to grasp. I did not deviate too much from the example code used as the basis of this visualization, but did play around with the axis, the legend and the color scheme. I did however rework the whole data import process and, as of the moment this article is being written, there still remains a bit of work to be done. The thing is that for some reason that I am yet to discover, Vercel, where this site is hosted does not allow file import from the local disc, forcing me to look for other approaches to data storage and input.

The final result

The final result is a chart with an hourly scale on the x-axis and time on the y-axis. Each cell on the chart represents a record in the dataset containing information on the actual consumption. Hovering over a cell shows the date and time and consumed electricity amount for that datetime. By looking at the chart one can spot peaks of consumption during the early morning hours and towards the evening right after the end of a regular working day. There is a presumable shift in consumption trends between the summer and winter months, but it is arguable to assume that this is a pure seasonal shift. Most probably we are dealing with consequences of a shift in behaviour for which there is no descriptive data in the electricity consumption dataset.

Conclusion

To wrap things up, I must say that it has been an exciting journey to get acquainted with the D3 library. There is certainly much more to explore and learn, but I am personally pretty satisfied with the end result and the learning curve that preceded. I am not a JavaScript person, and to get this far feels good. Data visualization wise this adds to my existing knowledge base and widens the horizon of possible solutions. Most importandly, after figuring the basis of D3, I am no longer bound by the functionality bounds imposed by large scale frameworks and software solutions which is just fantastic.