From the course: D3.js Essential Training

How browsers make sense of HTML - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

How browsers make sense of HTML

“

- [Instructor] Before we dive into beautiful charts and interactive visuals, there's something you need to know. D3 doesn't exist in a vacuum, it needs a home, and that home is an HTML page. If you've ever built with Lego, think of HTML as the base plate. Without it, your D3 bricks have nowhere to go. So in this video we'll explore how HTML pages work, not just so that you can learn D3, but so that you can build the home for the D3 to sit in. You can't have D3 without HTML because D3 creates graphics within an HTML page. So let's look now at how HTML pages work so you understand where D3 fits into the kind of kit of web tools that you need to visualize data on the web. An HTML page can be edited in a text editor. It's called a text editor, but really it contains code. Here we have a text editor on the left and a browser on the right, and the browser is displaying the same file that we are looking at the code of. So this file is called 01_01.html, and it has a title oh 01_01 - D3.js Essential Training if we scroll over it. And over here you can see it says 01_01 - D3.js Essential Training. Okay, it's the same file and it's locally stored. If the content of the HTML file conform to a set of rules, browser software can interpret them and transform your HTML file into a webpage with images, tables, and text. The basic rules of an HTML page are doc type declaration, which tells the browser that it's dealing with HTML5, HTML tags, head tags, and body tags. A tag is a hidden keyword contained within angle brackets. It tells the browser what to display or how to display it, but you don't actually see what's inside these tags displayed on the webpage itself. You don't see the word body, for example, but the elements are there. There are opening tags which have angle brackets, such as this one, and then there are closing tags which have an additional forward slash such as this one. The closing tag tells the browser to end the element given by the opening tag. We also need a character set and a title to make our template page here complete. Now since HTML5, you can omit some of these HTML head and body tags. Technically speaking, you don't need them, but the structure is useful for us within this course, so we are keeping them. The head tags contain information about the page and are not shown in the browser. So you can see it says 01_01 - D3.js Essential Training, that is shown up here as the title, but it's not shown within the white part, the webpage. The body tags have the bits we can see called elements. At the moment there are no elements, I've just written the text, "Hello world." When we add code in between the body tags and view the file in the browser, the browser has to work out how to arrange the parts. The first element will typically appear top left and the browser will draw the following element to the right and down. So here I've added a div element, which just means division. And as we add these, in this case, they are organizing straight down. Now you can see that these rectangular division elements are aligning left first and then making a fresh row, so they're working over time from the top left of the page down towards the bottom right of the page. So webpages are generally drawn in this direction. You can change it with style, as you may have just noticed I was doing. But generally speaking, your elements are arranged top left to bottom right. And different browsers like Chrome and Firefox often apply slightly different rules if you don't set them explicitly as to how you want things to lay out, much to the annoyance of web developers. But the important thing to note when learning D3 is this general direction from top left to bottom down because when we're drawing charts, we often want to draw them from bottom left to top right in the opposite direction and that can make for some interesting calculations. Now, HTML elements fall into two categories, block and inline. Our text editor is showing a div element, which is block by default. Then if we were to add a paragraph element, the paragraph element itself is a block type element. That is to say, it takes up rectangular space, and the span element that we see there is what's called inline. Inline elements, as the name suggests, occur within a body of text. We can use formatting to change the location and size of the block elements to produce any kind of layout. If we get rid of this line, for example, we're using the style to change the layout. There are nearly 140 HTML elements. The one we are going to be most interested in in this course is called SVG because you can't create a D3 visualization without an SVG or Scalable Vector Graphic. All right, we've looked a little at how browsers make sense of HTML and seen that different browsers interpret HTML files differently on occasion. We've also discussed that we can't use D3 without an HTML page to put it in, nor can we use D3 without an SVG element, which we look at more in the next video.

Contents