D3: Layouts Xianbin Gu Nov 24, 2020 InfoVis Lab Agenda ● Force-directed graph ● Trees ● Treemaps Force directed layout ● Force-Directed Graph / D3 ○ using d3.forceSimulation( ) to create the simulation ● Need two JSON datasets: node.json and link.json ○ the link.json should contain at least two keys: “source” and “target”. link.jsonnode.json A force-directed network of Citibike .id( ) specifies the id of the node, so the link can be associated to the nodes. Here we use the name of every station because the values of sources and targets in link.json are station names. Reference: ● Force-Directed Graph / D3 ● d3/d3-force: Force-directed graph layout using velocity Verlet integration. Create links and nodes Plot the graph Exercise: reducing the hairball effect In the given link.json, there are about 1400 links, which results in clutter. 1. Filter out those links whose frequency is less than 20 2. We can group the stations according to the second digit of their ids, e.g., if a station has an id: 3678, then it will be grouped into group 6. Can you implement this, and then, use hues to encode the group information? (Hint: you need a color scale first) Tree layout 1. Applying the Reingold–Tilford “tidy” algorithm to compute the position of nodes. 2. Set the links to connect the nodes 3. Append tags (e.g., text) to the nodes A reference link (D3 ver 3): https://github.com/d3/d3-3.x-api-reference/blob/master/Tree-Layout.md Format of tree data ● Should have two keys ○ one key is named “name” ○ one key is named “children”, whose value is an array of {“name”: ..., “children”: ...} Compute the positions of nodes Creates a new tree layout, .size() allows user to specify the size of the whole tree. It constructs a root for the treeData https://github.com/d3/d3-hierarchy/blob/m aster/README.md#tree Plot the nodes It returns the array of descendant nodes, starting with this node, then followed by each child in topological order. Drawing the links A
generator, you can modified it to generate different link style. (e.g., change the “C”) Alternative: using link generator D3 Link generator: https://github.com/d3/d3-shape/blob/master/README.md#links Exercise: Rotating the tree ● Can you find a way to make the tree horizontal? Can you make the following patterns? Radial tree 360 represents 360 degrees, so the points will sweep through on the outer circle. 320 specifies the tree depth, i.e., the radius of the outermost circle. Specifies the distance between two neighbour nodes. Here, a ternary operator is used, and the distance between two nodes decrease with their depth Get the root and links. Plot the nodes Adding the text Arrange the texts according to the angles of the nodes The output In-class exercise (characters_house.json) When the tree has too many branches, a tidy tree is unable to show the details. In-class exercise A radial tree can show the tree with many branches (Using characters_house.json) 欢迎咨询51作业君
