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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.