So why use web technologies?
The most prominent reason that comes to mind is that when you make something with web technologies it’s accessible by anyone with a web browser. You don’t need to install anything locally like you would with other types of platforms like R, or Python, or Java.
But what are web technologies?
HTML. Hypertext Markup Language. This is, you could say, the backbone of the web. All web pages are HTML documents, meaning they’re text files that contain this markup that’s called HTML hypertext markup language. Here’s an example of a page created with just HTML. With HTML, you can make large text with paragraphs with the H1 tag. Links with the “a” tag on any page. If you right-click and look at view page source with Ctrl + U, you can see the HTML source code behind it. Every HTML page starts with this doctype HTML to signify to the browser that okay, this is HTML5 that we’re dealing with, and then begin <html> tag corresponding to an end <html/> tag. A head that loads things that are not really visible on the screen, but have some effect, and then the <body> tag that loads things that you see on the screen. For example, an <h1> tag that makes text large and the <a> tag makes links. A <p> tag that makes paragraphs, and a <strong> tag that makes text bold. So that’s an example of a simple HTML page.
But HTML by itself has its limitations. That’s pretty much all you can do with HTML but if you want to make it look pretty you can add CSS to the mix. Cascading Style Sheets. This is one of my favorite websites that showcases the power of CSS. The CSS Zen garden. On this page, you can click on different CSS themes that load this exact same HTML, but it looks totally different just because the CSS changed. Let’s take a look at this other design. Can you believe that it’s the exact same HTML? The only thing that’s different is the CSS so you can sort of think of HTML as the skeleton and CSS as the skin you can use CSS to do this kind of skinning or theming to HTML you can do quite a bit of static web pages with HTML and CSS.
But once you want to add some cool graphics you need to turn to a graphics technology like SVG. Scalable Vector Graphics. This is what we’re going to use to make our data visualizations. I like to refer to the Wikipedia page on Scalable Vector Graphics because it has this really nice illustration of raster versus vector. A raster image means that the image is comprised of pixels. These little squares that make up the image. It’s just a listing of colors that should be on each pixel. Raster image formats include JPEG, TIFF, and PNG, and also the ancient BMP – bitmap format. Raster images are in contrast to vector images like SVG – Scalable Vector Graphics. Vectors meaning the image is defined in terms of the shapes that comprise it, it’s not defined in terms of pixels. It’s defined in terms of shapes and paths. So when you scale it up, it remains crisp. It doesn’t get pixelated like raster images do. By the way, there are other graphics technologies for the web including HTML5, Canvas, and WebGL. Those are ultimately raster graphics technologies. They do give you better performance than SVG, but they don’t have that scaling aspect that SVG has. I find them more difficult to work with, so that’s why I’m choosing to use SVG for this course.
The Ghostscript Tiger is a popular image that people show when you know talking about SVG. Here’s a version of that image that’s actually a .PNG file, and notice that if you zoom in, it gets blurry. See? It’s actually defined by the pixels, and when you zoom in, the browser tries to make it look better by blurring in a little bit.. but it’s actually just a bunch of little rectangles. Here is the SVG version of that image. It doesn’t get blurry at all. As you zoom into it, we can inspect this SVG image, and see what its DOM elements look like. DOM meaning Document Object Model. See, it’s comprised of the elements that make up the image. Like here’s one whisker, for example. It’s a group element that has a path inside of it. And see, if I delete this path, that whisker disappears. So this is how SVG images are defined. They’re defined in terms of the elements that make up the graphic, not by pixels.
Review and Recap:
Why use web technologies instead of Python, R, or Java?
What’s the difference between a raster and vector-based image.
Try to pull the whiskers off the Ghostscript Tiger in Chrome Developer Tools.