O'Reilly logo

Practical Business Intelligence by Ahmed Sherif

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required