Blending D3 and data

The ultimate goal with any visualization is to incorporate actual data elements within the components. Earlier examples showed D3 elements with data points set up inside of the attributes. The next example will highlight creating the same visualization of four bar charts while assigning the height to a variable.

Visualizing hardcoded data

We will start with a new blank template for D3, with only a <body> tag and a <script> tag. All coding will now be inside the <script> tag.

First off, we will assign a couple of variables that will come into play as we put together the bar chart:

var svgHeight = 500; 
var svgWidth = 500; 
var barHeight = [100,200,300,400]; 
var barDistance = 25;

svgHeight and svgWidth are two variables that we will ...

Get Practical Business Intelligence now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial