D3 plots and SVG Size

D3 Dabbler Series: Experiences with Angular 2+ and D3 Part 1 of 2

A few useful things to know early on... 

I have heard on a number of occasions in the last year or so that D3 is a great option for data visualisation. D3 (or D3.js) is a JavaScript library for visualising data using HTML, CSS and SVG (scalable vector graphics). A dive into learning D3 and attempting some visualisations with real data made me realise just how powerful it is as a visualisation tool, specifically when it comes to creating interactive visualisations. 

My “D3 dabbling” happened in a slightly back-to-front way in that I first attempted to draw plots using online examples and then, only weeks later, went through the formal process of learning D3 through an official online course¹. My main use of D3 currently is to visualise usage data (using bar and line charts) on the dashboard page of an Angular 6 application. I hit a few stumbling blocks in my initial attempts at integrating D3 plots into the Angular code. They are things that took me a while to figure out and might be useful to other first-time “dabblers in D3” who want to draw some plots quickly and easily without first doing a course.

The first issue I encountered was with the size of my SVG element. When trying to view my first D3 plot by opening up the index.html file in a browser and later when trying to place my plot in the appropriate Angular component, I was left hopeful that I was on the right track (because I had managed to correctly draw a y-axis as seen in the image below), but also somewhat despondent as only part of my plot was visible. When drawing D3 plots, they are appended to SVG elements inside the HTML document used to create the page. SVG elements have an advantage over normal HTML in that they are able to render very sharp objects – a useful feature for visualisations. The visibility issue that I faced lay in the fact that the size of the SVG element to which the plot was appended was too small (the size of the dotted border in the image below to be exact).   

Well, that’s unexpected. Example of an SVG sizing issue truncating a D3 plot.

It needs to be set to have an appropriate height and width to comfortably fit the entire plot. This can be done in one of two ways: 

a) Setting height and width attributes when the SVG element is defined: 

let svg = d3.select(“#chart_1”)
.attr(“height”,height) 
.attr(“width”, width) 

In this example, height and width variables are set at the start to values of the user’s choice. 

b) Adding styling attributes for all SVG elements in the CSS file: 

svg { 
  height:100%; 
  width: 100%; 
} 

A useful addition to this is to also set the overflow to visible to ensure that no edges are cut off. This should be done with caution though so that the plot and its axes or legend don’t overlap with another part of the page.   

let svg = d3.select(“#chart_1”)
  .attr(“width”, width) 
  .attr(“height”,height) 
  .attr(“overflow”, “visible”) 

// alternatively

svg { 
  hight:100%; 
  width: 100%; 
  overflow: visible; 
} 

The result was a fully visible plot! Part 2 will follow shortly where I will look into the issue faced when trying to display multiple plots on a single page.

---

1. A useful course to get started is Information Visualization: Programming with D3.js on Coursera.

Written By Liesl Hendry