Scribd
Upload
9 views

LM18

temp

Uploaded by

tn20jashyt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

LM18

temp

Uploaded by

tn20jashyt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

21AI602 - DATA VISUALIZATION

UNIT 5 – INTERACTIVE DATA VISUALIZATION

LP18: Technology Fundamentals – Setting up D3 – Drawing with


Data
1. Technology Fundamentals:
i. The Web:
o Clients contact servers with requests, and servers respond with data.
o But what is a server and what is a client? Web servers are internet-connected
computers running server software, so called because they serve web documents as
requested.
o Servers are typically always on and always connected, but web developers often
also run local servers, meaning they run on the same computer that you’re working
on.
o Local means here; remote means somewhere else, on any computer but the one right
in front of you.
o There are lots of different server software packages, but Apache is the most
common.
Complete URLs consist of four parts:
 An indication of the communication protocol, such as HTTP or HTTPS
 The domain name of the resource, such as calmingmanatee.com
 The port number, indicating over which port the connection to the server
should be attempted
 Any additional locating information, such as the path of the requested file, or
any query parameters
Let’s briefly step through the process of what happens when a person goes to visit a
website.
1. User runs the web browser of her choice, then types a URLinto the address bar, such as
alignedleft.com/tutorials/d3/. Because she did not specify a protocol, HTTP is assumed, and
“http://” is prepended to the URL.
2. The browser then attempts to connect to the server behind alignedleft.com across the
network, via port 80, the default port for HTTP.
3. The server associated with alignedleft.com acknowledges the connection and is taking
requests. (“I’ll be here all night.”)
4. The browser sends a request for the page that lives at /tutorials/d3/.
5. The server sends back the HTMLcontent for that page.
6. As the client browser receives the HTML, it discovers references to other files needed to
assemble and display the entire page, including CSS stylesheets and image files. So it
contacts the same server again, once per file, requesting the additional information.
7. The server responds, dispatching each file as needed.
8. Finally, all the web documents have been transferred over. Now the client performs its
most arduous task, which is to render the content. It first parses through the HTMLto
understand the structure of the content. Then it reviews the CSS selectors, applying any
properties to matched elements. Finally, it plugs in any image files and executes any
JavaScript code.

ii. HTML:
o Hypertext Markup Language is used to structure content for web browsers.
o HTMLis stored in plain text files with the .html suffix.
o A simple HTMLdocument looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragraph.</p>
</body>
</html>

iii. DOM:
o The term Document Object Model refers to the hierarchical structure of HTML.
o Each pair of bracketed tags (or, in some cases, a single tag) is an element, and we
refer to elements’ relationships to each other in human terms: parent, child, sibling,
ancestor, and descendant.
Fig 1.1 Chrome’s web inspector
iv. CSS:
o Cascading Style Sheets are used to style the visual presentation of DOM elements.
CSS looks like the following:
body
{
background-color: white;
color: black;
}
o CSS styles consist of selectors and properties. Selectors are followed by properties,
grouped in curly brackets.
o A property and its value are separated by a colon, and the line is terminated with a
semicolon, like the following:
selector {
property: value;
property: value;
property: value;
}
o You can apply the same properties to multiple selectors at once by separating the
selectors with a comma, as in the following:
selectorA,
selectorB,
selectorC {
property: value;
property: value;
property: value;
}
o For example, you might want to specify that both p paragraphs and li list items
should use the same font size, line height, and color.
p,
li {
font-size: 12px;
line-height: 14px;
color: orange;
}

v. Java Script:
o JavaScript is the scripting language that can make pages dynamic by manipulating
the DOM after a page has already loaded in the browser.

Fig 1.2 A fresh JavaScript console…delicious!

vi. SVG:
o D3 is most useful when used to generate and manipulate visuals as Scalable Vector
Graphics (SVG).
o Drawing with divs and other native HTML elements is possible, but a bit clunky and
subject to the usual inconsistencies across different browsers.
o Using SVG is more reliable, visually consistent, and faster.

Fig 1.3 A small SVG circle with a stroke applied

<svg width="50" height="50">


<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>
Fig 1.4 RGBA SVG Shapes

2. Setting up D3:
o A simple matter of downloading the latest version, creating an empty page in which to
write your code, and, finally, setting up a local web server.

1. Downloading D3:
 Start by creating a new folder for your project. Call it whatever you like, but
maybe something like project-folder.
 Then place the latest version of D3 into that folder. Go to https://d3js.org, click
the link to download the latest version of D3 as a ZIP file, and then decompress
the ZIP file.
 As of this writing, the current version of D3 is 4.5.0. Move the file d3.js into
your new project folder.
 In that folder, you’ll also see d3.min.js, a “minified” version from which
whitespace has been removed for smaller file sizes and faster load times.

2. Referencing D3:
 Now create a simple HTML page within your project folder named
index.html.
 Your folder structure should now look something like this:
project-folder/
d3.js
d3.min.js (optional)
index.html
 Paste the following into your new HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>
3. Setting Up a Web Server:
o In some cases, you can view local HTML files directly in your web browser.
o However, some browsers have restrictions that prevent them from loading local
files via JavaScript, for security reasons.

3. Drawing with Data:


1. Drawing divs:
o HTML div is the easiest way to draw a rectangle.
o Formally, a chart with vertically oriented rectangles is a column chart, and one
with horizontal rectangles is a bar chart.
o This div could work well as a data bar, shown in Figure 3.1.

Fig 3.1 A humble div


<div style="display: inline-block;
width: 20px;
height: 75px;
background-color: teal;"></div>
2. The Power of data():
o This is exciting, but real-world data is never this clean:
var dataset = [ 5, 10, 15, 20, 25 ];
o Let’s make our data a bit messier, as in 04_power_of_data.html:
var dataset = [ 25, 7, 5, 26, 11 ];
o That change in data results in the bars shown in Figure 3.2. We’re not limited to five
data points, of course.
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];

Fig 3.2 New data values


3. Drawing SVGs:
o One thing you might notice about SVG elements is that all of their properties are
specified as attributes.
o That is, they are included as property/value pairs within each element tag, like
this:
<element property="value"></element>
4. Making a Bar Chart:
o See the div chart, updated with some new data, in
12_making_a_bar_chart_divs.html:
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
o It might be hard to imagine, but we can definitely improve on the simple bar
chart in Figure 3.3 made of divs.

Fig 3.3 Bar chart with divs


5. Making a Scatterplot:
o The scatterplot is a common type of visualization that represents two sets of
corresponding values on two different axes: horizontal and vertical, x and y.
o Let’s carry over most of the code from our bar chart experiments, including the
piece that creates the SVG element:
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
o Instead of creating rects, however, we’ll make a circle for each data point:
svg.selectAll("circle") // <-- No longer "rect"
.data(dataset)
.enter()
.append("circle") // <-- No longer "rect"
o Also, instead of specifying the rect attributes of x, y, width, and height, our
circles need cx, cy, and r:
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", 5);

Fig 3.4 Simple Scatter Plot

You might also like