1. Tree Visualization

2. Exercise 1: Dendrogram
Download the codes and data file from 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); });

3. Exercise 2:
Following the format of the flare.csv file, create an CSV file based on the bookstore data for visualization
AssignmentDataSets/Assignment4_TreeVisualization/
Test a couple categories first

4. Exercise 3 Download the codes and data file from
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

5. JSON JavaScript Object Notation

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

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

8. 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 “,”.

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

11. 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

12. 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.