Storing and displaying "Big Data" can be very difficult to present clearly.Data ranges from simple storage of exam results to looking at the data in a stock market and prices of shares constantly increasing or decreasing throughout the year. How do we find a way to visually present Data in a interactive environment? One amaing solution to this is using Data visualisation. Visualisation can present large amounts of information into a format which engages the viewer and can be more easily absorbed and understood.
Simply, D3 stands for Data-Driven Documents. D3.js is a Javascript library for producing interactive data visualisations in browsers. We haven't used libraries till now, but they're a simple concept. Libraries allow us to use methods designed by other coders, rather than reinventing them ourselves. By using libraries we can focus our development on what we want to achieve, rather than having to spend a lot of time setting up the infrastructure necessary. By making our webpages dynamic, we can create responsive interfaces which produce any number of incredible, captivating effects which engage our viewers and communicate our messages! Additionally, with the rise in popularity of JavaScript, most popular browsers have invested a lot into making sure that JavaScript is able to run very quickly and very securely. As a result, libraries like D3 have become even more effective and powerful at displaying content and data, and the cost on browsers has become much smaller than it used to be. Above all, D3 is designed to be a flexible and easy to use library, facilitating the easy manipulation and presentation of Data on a web page in a huge variety of ways.
Working with D3 means that you need to be familiar with a few concepts. We've already covered these, but we're just going to briefly describe them to jog your memory!
We use HTML Hypertext Markup Language to structure content for web browsers.
Cascading Style Sheets are used to style the visual presentation of HTML pages.
Remember, it's best to save CSS in an external file and reference it using the head tags in the HTML document!
We use JavaScript to introduce dynamic content to our webpages, which reacts based on input and structure.
We're going to start by introducing a new idea. Scalable Vector Graphics (SVG)
We also have one new concept to introduce!
D3 is at its best when rendering visuals as Scalable Vector Graphics. SVG is a text-based image format. You
can therefore manipulate how a SVG image should look like by writing a mark up code. This can also be
directly implemented into a HTML document.
Technically it's not necessary to use SVG with D3 but it gives us a lot more flexibility in terms of scaling
than regular HTML image elements can! We hope you'll learn to love SVG,
it's very straightforwards!
Start by creating a new folder for your project. Within that folder, create a sub-folder called d3. Then either download the latest version of d3.js into that sub-folder by searching online , or use the copy provided by your teacher.
To start out, the initial document you should start with is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your code will go here!
</script>
</body>
</html>
One of the most important things to know from the start with D3, is that you can group methods together to achieve different effects. Although you don't have to, method chaining allows you to create more expressive, readable code!
By “chaining” methods together with periods, you can perform several actions in a single line of code.
d3.select("body").append("p").text("D3 is awesome!");
d3 is the D3 global object - think $ from jQuery. And also similar to jQuery, d3 lets us select elements in the DOM. We are currently selecting the <body> element in the HTML page. The .append("p") means we want to create a new p within the body. The .text("") inserts a line of text in between the tags <p></p> as the previous method passed down a reference to the new <p>.
Most of what D3 does is manipulating HTML elements. To do that, we first need to be able to specify what we want to affect. Since our elements are dynamic, we can't just use selectors like in CSS. Instead, D3 provides its own selection methods, which we'll be covering a little later. Selections are a vital part of D3, as you will learn more about later. Selections are simply an object that wraps a DOM element and provides some useful methods.
Author : Danish Sethi