D3 – Data Visualization

D3 – Data Visualization

Please use the screenshots ONLY as a reference. The written instructions have to be
followed AS written.

PLEASE MAKE SURE YOU SUBMIT ALL THE SCREENSHOTS WITH TIMESTAMPS
AT THE BOTTOM RIGHT (WINDOWS USERS) OR THE TOP RIGHT (MAC OSX
USERS) OR ELSE YOU WILL AUTOMATICALLY QUALIFY FOR A DISCOUNT.
For this assignment you will need to create a development browser that does not create
a CORS error. Please review and execute the instructions for creating/using the chrome
browser for development.

For Microsoft Windows:

Right click on desktop, add new shortcut

Add target as "[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-

data-dir=~/chromeTemp

Judd Bradbury
 D3 – Data Visualization

For [PATH_TO_CHROME]: copy and paste your path to chrome on your system for this part.

Click Next to continue

Judd Bradbury
 D3 – Data Visualization

Under Type a name for this shortcut type Chrome, and click Finish.

Note: On windows 10 command will be: "C:\Program Files (x86)\Google\Chrome\Application\

chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

For MacOS:
Navigate to your applications folder. Open the appication called Terminal. Wait for the prompt
to establish itself. Copy this command open -n -a /Applications/Google\
Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --
disable-web-security and then paste it at the command prompt in Terminal. Press the enter key.
Use this sequence any time you use the browser for this purpose.

Judd Bradbury
 D3 – Data Visualization

A new window for Google Chrome should pop up after this step

Judd Bradbury
 D3 – Data Visualization

Objective:
The objective of this exercise is to visualize university’s food data using D3

Prerequisites:
Step 1: Installing Prerequisites
1. Install Local server
a. Install Wampserver for windows:

Prerequisites of installing “wampserver”:

Install Visual C++ 2012 Redistributable for windows users
http://www.microsoft.com/en-us/download/details.aspx?id=30679

Once visual C++ 2013 redistributable is installed, install WampServer:

WampServer is a web development environment which allows you to create

web applications. It installs local server environment on your windows system.
http://www.wampserver.com/en/#download-wrapper

Judd Bradbury
 D3 – Data Visualization

b. Install MampServer for Mac:

Installs local server environment on your Mac system.
https://www.mamp.info/en/

2. Installing Sublime
Install the latest version of Sublime using the following link:

https://www.sublimetext.com/3

Step 2: Setting up Local Server

Step 2.1: Setting up the WampServer for windows

After installing the WampServer. Search for the “Wamp” folder in your C:/ drive or the
location where you had saved it. Double click on the “Wamp” folder, double click on the
“www” folder. Within this folder we will be creating our eclipse workspace so that all the
HTML documents that we create are already available in the server.

Judd Bradbury
 D3 – Data Visualization

Open the wampserver. After opening the wampserver it will be visible in the desktop
tray. At first you will notice that the wampserver icon will be in red which means that it is
not active and at this stage if you open your webpages from the local server you will not
be able to view them using the local server.

In order to display webpages using the local server we need to start the server. Click on
the WampServer icon in the desktop tray and then click on “Start All Services”. This will
make the WampServer icon to turn green which means now you can you’re your HTML
documents and view them in the browser using our local host.

Judd Bradbury
 D3 – Data Visualization

Step 2.2: Setting up Mamp server for Mac

After downloading the mamp server, install the mamp server by going to downloads
folder and double click on the mamp file.
In the desktop create a new folder named “localhost”
After installing, go to the applications folder, double click on the mamp folder and then
double click on mamp.app. A popup appears, click on Launch MAMP.

Judd Bradbury
 D3 – Data Visualization

Another popup appears click on preferences,

A new popup appears having 4 tabs. In the Start/ stop tab

Judd Bradbury
 D3 – Data Visualization

10

In the ports tab, click on the button highlighted below.

In the web server tab, select the folder icon highlighted below and then select the
localhost folder created in the desktop.

Once these settings are double click on the Mamp.app again under applications folder.
In the popup, click on “Start Servers” in order to view your web pages in the local
server.

Judd Bradbury
 D3 – Data Visualization

11

You can also stop the server by following the same steps.

ALTERNATIVE:
If you face CORS policy issues in Google Chrome, download the Chrome extension
provided in the link below
https://chrome.google.com/webstore/detail/web-server-for-chrome/
ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

After you install it, launch the app. You will see this window:

Judd Bradbury
 D3 – Data Visualization

12

Go ahead and click on ‘Choose Folder’ and direct it to the directory where you have
stored all your HTML/CSS/JS/CSV files. You can then click on the web server URL or
go to http://127.0.0.1:8887 to access your files locally.

Step 3: Create a new folder and HTML file

Step 3.1: Setting the Sublime workspace

Workspace is a place where we want all our files/documents that we create in

eclipse to be placed. We will be setting the sublime workspace to “www” folder in
WampServer or ‘localhost’ folder in mamp server as we want our html documents
to be viewed on the local server. Open Sublime Text Editor and select the option
as given in the screenshot:

Judd Bradbury
 D3 – Data Visualization

13

Windows Users: - Look for the wamp folder and expand it and select www folder (for
windows), name it as “D3_Exercise” and then click ok.

Mac Users: - localhost folder under desktop folder in Mamp server (for mac users),
name it as “D3_Exercise” and then click ok.

Now your workspace is set so whatever you create in Sublime would be saved under
the www folder under wamp folder (in windows) and under localhost folder in desktop
(in Mac).

Judd Bradbury
 D3 – Data Visualization

14

Step 3.2: Create a new folder under your project in Sublime

Follow the below menu path to create a new folder.

Once you select “Add Folder to Project”, choose the “www” folder under wamp64 folder
in your system.

Judd Bradbury
 D3 – Data Visualization

15

Now, right click on the “www” folder and choose new folder. Name the folder as
“D3_ExerciseSublime” as given in the screenshot:

Step 3.3: Create a new file inside the folder in Sublime

Now we will create a file inside the folder in order to keep all the HTML documents
organized in one place.

Right click on the folder name, select New File.

Step 4: Download dataset from ELearning

 Download the ‘University_Food_Data.CSV’ file from eLearning and save it in
above created folder. To access D3_ExerciseSublime folder go to your ‘wamp’
folder-> www->D3_ExerciseSublime

 Get top three selling menu items for each store

o Open downloaded csv file
o Create a new csv file
o Copy column header from downloaded csv to newly created csv
o In downloaded csv sort data by Gross_sales (largest to smallest) and
Store_Name (A to Z)
o There are 9 different stores in dataset, apply filter on Store_Name and for
each store get top 3 items by gross sales and copy it into newly created
csv file. For example in filter value of Store_Name select ‘Coffee Corner’
and get top 3 items by gross sales and copy it into new csv

Judd Bradbury
 D3 – Data Visualization

16

o After completing above step for all 9 stores, you will have 28 records in
new csv, 1 header record and 27 other records, save newly created csv
file as food_court filtered data.csv

Step 5: Create HTML file

HTML stands for Hyper Text Markup Language. It makes use of tags to create web
pages. It is used to structure the web pages.
Every HTML code, is divided into a header section and a body section which are
represented by header start and end tags (<head> </head>) and body start and end
tags (<body> </body>). Between these start and end tags we place the contents of the
web page.
Write the following HTML code in the newly created file

Load D3 library and create CSS style for page’s background color and svg’s
background color:

Judd Bradbury
 D3 – Data Visualization

17

One you have completed writing the above html code then save the file as
“StudentName_D3”(HTML_document- in the screenshot) and choose the file type
as .html as given below:

Judd Bradbury
 D3 – Data Visualization

18

Code Explanation:
 Adding title using title tag
 Loading D3 library usinglink ‘http://d3js.org/d3.v3.js’so that D3
functions can be used in this HTML page
 Using style tag setting css style for body background and svg
background color

Step 6: Display the HTML document on browser

 In order to display the webpage on the local server. Open any browser and type
 “localhost/ D3_ExerciseSublime/” and then press enter.
 Click on the folder you created in Step 3.

Judd Bradbury
 D3 – Data Visualization

19

 All the HTML documents you created will be visible here. Click on the
HTML_Document.html(in your case- StudentName_D3) to view your web page.
 Note: In case you are unable to view the contents in the web page then refer to
Web server for chrome to check for errors.

Question:

1. Open your HTML page in WEB browser and take a screen shot of
your page showing page Title (your name) and page background
Answer

----------------------------------------------------------------------------------------------------

Step 7: Create a division and SVG image

 Add a center aligned division and SVG image in your HTML page

Judd Bradbury
 D3 – Data Visualization

20

Code Explanation:
o Create a svg frame and assign it to the variable svg.
o Use the function d3.select to find the div tags present in the body. There is
only one div tag present in the body.
o Append the svg frame in the div tag and set the attribute such as height
and width of the svg frame as mentioned in the variable "v" and "h".

Judd Bradbury
 D3 – Data Visualization

21

Question:
2. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

----------------------------------------------------------------------------------------------------
Step 8: Fetch dataset using D3:
 Make sure you have created new csv file as per instructions given in step 2 and
stored it in ‘D3_ExerciseSublime’ folder created in step 1
 Get csv data into your HTML page using D3function and write data in browser’s
console

Code Explanation:
o d3.csv function will pull the data and from the file that will be passed as an
input parameter. In this case, the file is "food_court filtered data.csv".
o This data will be passed as an input variable for a function.
o The value that will be returned will be displayed in the console using
console.log function.

 Check in browser console if data is pulled from csv

Judd Bradbury
 D3 – Data Visualization

22

Question:
3. Place the screen shot of your console showing data (objects)
Tip: Clear console using button marked with red circle and refresh the page
Answer

----------------------------------------------------------------------------------------------------
Step 9: Create bar graph visualizing Gross Sales of various food
items
 Before creating bar graph we will sort the data, write below piece of code to sort
the data
Note: We have removed console log (data), it was just for testing purpose

Judd Bradbury
 D3 – Data Visualization

23

Note: Labels are case sensitive. If csv labels is named as Gross_Sales, your
code should address label as Gross_Sales and not Gross_sales
Code Explanation:
o Once the data is pulled into the variable data, it can be sorted using the
function sort which can be called using the variable "data" that contains
the dataset.
o The function d3.descending will sort the data in descending order and will
return the data.

 To create bar chart we need to first create rectangles (rectangles = bar of bar
chart) corresponding to records in our dataset and then we will set property of
each bar

Judd Bradbury
 D3 – Data Visualization

24

Code Explanation:
o In order to create rectangles using a consistent height and width, rect.attr
can be used to set the x and y coordinates of the rectangle.
o The rectangle will have the same x coordinate and height for each
rectangle will also remain same.
o The only difference would be the y coordinate for the rectangle, ‘i’ is the
index of each record and we are multiplying i by 10 so that each record or
bar should have distinct starting location

 Refresh your webpage, it should look something like this:

Judd Bradbury
 D3 – Data Visualization

25

Question:
4. Refresh your web page and paste a screenshot
Answer

----------------------------------------------------------------------------------------------------
Step 10: Scale the graph
 Horizontal Scaling
o As of now the bar graph that we have created is not scaled, so first we will
scale the width of the graph, make following changes in the code:
o Create a new variable widthScale and set the range 0 to width of svg

Judd Bradbury
 D3 – Data Visualization

26

Code Explanation:
o WidthScale for the rectangle will help in creating the rectangles based on
different size dynamically. The function d3.scale.linear.domain and
d3.scale.linear.range will map the values of the input variables to the
output variables
o Eg. if d3.scale.linear.domain contains value between 0 -200 and range
contains value 0-500 then the input value of 100 will be mapped to an
output value of 250.
o Add below piece of code to set the domain of the scale

Judd Bradbury
 D3 – Data Visualization

27

Code Explanation:
o The above code adds the domain value for the widthScale that was
defined in the previous step.

o Replace the code written inside width attribute of the rectangle with below
piece of code

Code Explanation:
o As mentioned in the above steps the values of widthScale for domain and
range will map the input to the output values.
o Thus, when Gross sales will be passed as a value to the function
widthScale, the values will be mapped to their equivalent output value
similar to the e.g. mentioned in the previous step.

 Refresh your webpage, it should look something like this:

Judd Bradbury
 D3 – Data Visualization

28

Question:
5. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

----------------------------------------------------------------------------------------------------
 Height Scaling
o Make following changes in the code to scale height of the graph:
o Create a new variable heightScale and set the range 0 to height of the svg

Judd Bradbury
 D3 – Data Visualization

29

Code Explanation:
o The widthScale will map the numerical input values to their numerical
output values.
o The ordinal scale will map the categorical input values to their categorical
output values
o Add below piece of code to set the domain of the scale

Code Explanation:

Judd Bradbury
 D3 – Data Visualization

30

o heightScale.domain function will set the input range for the heightScale
variable.
o In this case, the values is set to 27 so the input range would be from 0-26.
o Replace the code written inside Y attribute and height attribute of the
rectangle with below piece of code

Question:
6. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

---------------------------------------------------------------------------------------------------
Step 11: Add padding (margin) to the graph

Before adding axis to the graph we need to create some padding i.e. we need to make
some space to the right, left, bottom and top of the graph
Make following changes in the code to add padding:
Create new variable padding:

Code Explanation:

Judd Bradbury
 D3 – Data Visualization

31

o Padding variable consists of an array whose values can be used to append

space around the svg frame. The order of the alignment is mentioned in the
comments.
To reduce width and height of the graph or in other words to add padding to the right
and bottom of the graph make following changes in the width and height variables:
Without refreshing current tab open your webpage in a new tab/window and compare
the graph with previous tab, your graph should look like this:

To add padding to the left of the graph, make following code changes in X attribute of
rectangle:

Judd Bradbury
 D3 – Data Visualization

32

Code Explanation:
o The x coordinate for the rectangle will be set using the variable
padding[3].This will set the x coordinates to the value mentioned in
padding[3].

Question:
7. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

---------------------------------------------------------------------------------------------------
Step 12: Add x-axis and y-axis
First we will add x-axis to our graph, make following changes in the code to add x-axis:
To give style to our axis add following css style code

Judd Bradbury
 D3 – Data Visualization

33

Code Explanation:
o Formatting for the axis in the svg can be done using .axis path and .axis
line.
o .axis text will set the font size and family of the text for the axis in the svg
frame.

Create a new xAxis variable

Judd Bradbury
 D3 – Data Visualization

34

Code Explanation:
o Orient function will place the text of the x axis at the bottom of the x axis.
Add a group element in svg image to display x-axis

 Refresh your webpage, it should look something like this:

Judd Bradbury
 D3 – Data Visualization

35

 Now we will add y-axis to our graph, make following changes in the code to add
y-axis:
 Create a new yAxis variable

Code Explanation:
o Similar to the vertical y axis the text values will be to the left of the axis
using the orient function

Judd Bradbury
 D3 – Data Visualization

36

Add a group element in svg image to display y-axis

 Make following changes in the code to label y-axis

Code Explanation:
o The value for the y axis from the previous steps contain range from 0-26.
This range value has to be replaced with a meaningful categorical value.
o For the food court dataset the value will be replaced with the menu items.

Question:
8. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

Judd Bradbury
 D3 – Data Visualization

37

----------------------------------------------------------------------------------------------------------------
Step 13: Color code Store Names
 There are nine different store names in our dataset and now we will color code
them
 Add a new color variable containing range of 9 different colors, one for each
store
Code snippet
var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b",
"#a05d56", "#d0743c", "#ff8c00","#C9FF00","#FFDA00"]);

Code Explanation:
o Create an ordinal scale variable color and set the range for the categorical
variables with the color code that is to be assigned to distinguish the
clusters.
 To map each color with store name add below piece of code:

Judd Bradbury
 D3 – Data Visualization

38

Code Explanation:
o The domain value for the scale can be set using the Store Name present
in the dataset.

 Finally to fill each bar/rectangle with color add below piece of code:

Judd Bradbury
 D3 – Data Visualization

39

Code Explanation:
o The color in the rectangle can now be filled using the categorical "color"
scale created in previous steps.
o Thus, the input values of store for each rectangle will decide the color for
the rectangle using the output range of the scale "color" that is set in the
previous steps.

Question:
9. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

---------------------------------------------------------------------------------------------------
Step 14: Add title to your graph

Judd Bradbury
 D3 – Data Visualization

40

 To add graph title at the top we first need to increase the top padding, change
top padding from 20 to 30

Note: If any of the labels or x axis is cut off, change values in padding accordingly.
Any Visualization shouldn’t have cut off labels.
 To display title add text to svg image

Code Explanation:
o Title for the svg frame can be appended using the append function and
setting the values of the text attribute to the desired values.

Question:
10. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

Judd Bradbury
 D3 – Data Visualization

41

---------------------------------------------------------------------------------------------------------------------
Step 15: Add legend
 To add legend in the graph we need to add following piece of code:
 Append legend group in svg image

 Refresh your webpage, it should look something like this:

Judd Bradbury
 D3 – Data Visualization

42

Add text to legend colors

Question:
11. Provide the screenshot of your html page displaying your name in the
browser tab:
Answer

Judd Bradbury
 D3 – Data Visualization

43

Step 16: Creating a tool tip

• Open up the HTML file and append it with the pieces of code provided.
• Define a variable ‘div’ just like how we defined the axes and scales.

• After defining the variable, we have to make sure that when we hover over
certain rectangles defined in the bar graph. To ensure this, D3 had pre defined functions
‘mouseover’ and ‘mouseout’.
• We will make use of these functions as transitions available for 200 seconds.

Judd Bradbury
 D3 – Data Visualization

44

• Now to adjust the properties of the tooltip, we will define a class ‘tooltip’ in the
CSS section

Judd Bradbury
 D3 – Data Visualization

45

Judd Bradbury
 D3 – Data Visualization

46

• Properties of the Tooltip can be adjusted, feel free to modify them in any manner
you feel is the most suitable considering the color scheme of the graph. At the least,
PLEASE CHANGE THE COLOR FROM NEON GREEN AS DEFINED IN THE
PROPERTIES HERE. YOU WILL BE DISCOUNTED IF YOU FAIL TO DO SO.

Question:
12. Paste a screenshot of the whole output screen with timestamp.

Answer:

Step 17 : Highlighting
• Highlighting is a very crucial part of any visualization. We are going to highlight
the rectangles.
• This is also to be done in the ‘mouseover’ and ‘mouseout’ functions of the
variable ‘rect’

Now, ‘mouseout’ contains a return function to return the color of the rectangle to what it
was initially.

Judd Bradbury
 D3 – Data Visualization

47

Question:
13. Paste of screenshot hovering over a bar of the graph displaying the
highlighting and the tooltip.

Answer:

Step 18: Making changes to the tooltip text

• Returning variables in tooltip is very important. Now we will modify the text
displayed in the tooltip.

Judd Bradbury
 D3 – Data Visualization

48

Question:
14. Paste a screenshot of the tooltip showing the average price.

Answer:

---------------------------------------------------------------------------------------------------------------------
Instructions for submission
1) Submit two files to eLearning in a compressed zip file. eLearning will not
accept some of the file types if they are not zipped.
a. Submit your HTML file.
b. Submit your word answer document. (without the steps)

Judd Bradbury