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 use to create dimensions for the canvas that we will be working with inside of the browser. Similar to previous examples, it will be a 500 x 500 square. The barHeight variable is the data that we will use to assign a specific...
