Tree Visualization

Exercise 1: Dendrogram Download the codes and data file from https://bl.ocks.org/mbostock/4063570 to your web space Test the codes and make sure it works. Change d3.cluster() to d3.tree() and see what may happen Remove the part of data sorting in the statement and see the result var root = stratify(data) sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });

Exercise 2: Following the format of the flare.csv file, create an CSV file based on the bookstore data for visualization http://personal.psu.edu/xuz14/ds330/Programming AssignmentDataSets/Assignment4_TreeVisualization/ Test a couple categories first

Exercise 3 Download the codes and data file from https://bl.ocks.org/mbostock/4063582 to your web space Change the value in .tile(d3.treemapResquarify) to d3.treemapSliceDice and see what would happen Go to this website to understand the difference between d3.treemapResquarify and d3.treemapSliceDice Try other Treemap tiling methods

JSON JavaScript Object Notation

Purpose A data format for JavaScript More complex than CSV/TSV More like XML (eXtensible Markup Language) Good support from various JavaScript libraries

Example (http://secretgeek.net/json_3mins.asp) {"skillz": { "web":[ { "name": "html", "years": 5 }, { "name": "css", "years": 3 }], "database":[ { "name": "sql", "years": 7 }] }}

Terms and Syntax JSON is about a collection of objects, which may contain sub-objects, which may … Object: Skillz Sub-objects: web, database Each object may have name/value pairs name/html, year/5; name/css, year/3; name/sql, year/7 Colon to separate name and value Name/value pairs are grouped by {} and separated by “,”. Multiple objects/sub-objects or name/value pairs make an array. An array is enclosed by [], and items inside are separated by “,”.

Syntax } { "name1": value1, "name2": value2, "name3": value3, [ {"sub_name1": value1_1}, {"sub_name2": value1_2} ], "name2": value2

A few tips for Building JSON Files Using a good editor to help you keep track of matches of {} and [] Paying attention to commas Often seen mistakes: Missing a comma in the middle of a list Having an extra comma after the last item If data contains hierarchy, building by layers, not by objects Validating your JSON data with online tools http://www.jsoneditoronline.org/

Exercise 4 Following the format of the flare.json file, create a JSON file based on the bookstore data for visualization Test a couple categories first Modify the codes so that Radio buttons are labeled as Revenue and Sales, respectively Clicking a radio button to resize the rectangles based on revenue and the number of books sold accordingly.