讲解COMP5048、辅导Dynamic graph Python编程语言

COMP5048 Week 7 Homework

1. Dynamic graph visualisation with Gephi

1. Open photoviz dynamic.gexf in Gephi. (Ignore any import errors)

2. Click "Enable Timeline" below the graph display.

3. Under “Appearance” tab on the left, select “Node” and select either the paint pallet or the

circles depending on whether you want to modify the colour or size of the node.

4. Select “Ranking”, then select “Degree” from the drop down box.

5. Click on the chain icon to the left of the "Apply" button. The button should now say "Auto

Apply". Click on "Auto Apply".

Figure 1: Auto Apply enabled

7. Decrease the size of the timeline selection (light blue rectangular overlay) by hovering over

the ends until the cursor changes and click-and-dragging until the selection is a thin slice. This

corresponds with the window/tick size selected when calculating the dynamic degree.

8. Click the play button to the left of the timeline. The size of the nodes should change as the

structure of the graph and consequently the degree of each node changes.

9. The layout of the graph may also be updated as the animation plays. Rewind the animation by

dragging the timeline selection back to the leftmost end. Select "Force Atlas 2" from the layout

drop down box, click on "Run", and play the timeline. Adjust the layout parameters if needed.

Figure 2: Screenshot in the middle of dynamic graph playback

2. Colours and interactive brushing with D3 parallel coordinates

1. Open parallel-coordinates-brush.html in a text editor. This file is an edited version of

parallel-coordinates.html from week 3 with added interactive brushing.

2. The variable colourscale is a scale that maps a set of discrete categories (in this case, we

will be using the species name) to another set of discrete categories (in this case, colours).

d3.schemeCategory10 is one of the colour schemes provided by D3.

3. When drawing the lines (variable paths), instead of passing a fixed hex code for the “stroke”

style, we use a function that maps the species of this entry to a colour using the colourscale.

4. After drawing the axes, we add a brush to each axis. The default d3.brush function creates a

brush that can select a rectangular area within an SVG, but for our purposes, we only need

to brush in the Y-axis direction, so we use d3.brushY.

5. The doBrush function is called every time the brush is changed. First, it takes the extent of

the brushed area (var extent = d3.event.selection;), then for each path, it checks that it falls

within this extent on the dimension that was brushed and returns the colour accordingly.

6. Open parallel-coordinates-brush.html in a browser. Try clicking and dragging on each axis

and see how the colour changes with the selection.

7. Try using the cars_make.csv file with this brushed parallel coordinate plot, using the name

column for the colour scheme.

Figure 4: Parallel coordinates brushing

Note: the current brush is limited: it does not select based on two brushes, even if two axes have

been brushed. While not required for homework, you can try to edit this behaviour by using a

separate array/map that stores the currently brushed extent of each axis and checking the values of

each brushed dimension on the paths.

Advanced material (not required for homework)

3. Dynamic movement visualisation with D3

1. Extract comp5048-wk7.zip and navigate to the extracted folder.

2. Open movement.tsv in a text editor. The file contains (synthetic) movement data on a 64x40

grid, with each entry defining the coordinates of a person at each point in time.

3. Set up a server using Python and open movement.html in a browser.

4. You should see an image depicting a floor plan. You can embed a bitmap image inside SVG

elements by adding an image element (svg.append(’image’) in the source) and defining the path

to the image in the href attribute (.attr(’xlink:href’, ’background.jpg’)).

5. TSV files can be read in a similar way to CSV files using d3.tsv.

6. d3.nest groups objects in a list according to a specified key. In this case, we group the entries

of the TSV file by time (.key(function (d) return d.time; )) and convert it to a d3.map object

(.map(data, d3.map)), where the keys are the time and the values are lists of the entries of the

file with the same time value.

7. The function update coords(traces, current time) is used to draw the positions of the points on

thegrid. First, the list of coordinates at the specified time is retrieved from the map object created

in the previous step (traces.get(current time)).

8. When selecting the points inside the SVG container, we specify an identifier for the data

entries. This ensures that instead of all the previous data entries being wholly replaced, data

entries corresponding to the same entities are updated instead. Here, we use the id field from the

TSV file as the identifier (function(d) return d.id;).

9. Transitions can be used to ensure smooth changes in the visualisation. The number passed to

the transition() function call represents the number of miliseconds that should pass between the

start and end of the transition. (You can later comment the line .transition(150) by appending

two slashes to the beginning of the line (//.transition(150)) to see how the movement looks like

without transitions.)

10. The autoplay() function uses a Javascript interval function to auto-update the visualisation at

set intervals. The first argument is the function to be executed at each timestep - here, we update

the coordinates, increment the time, and clears the interval to stop it when either the time has

reached the end or if the pause button has been pressed. The second argument is the amount of

miliseconds to lapse between each timestep.

11. On the page in a browser, click on "Play" to see the animation. The "Pause" button pauses,

while the arrows steps through the animation by one timestep in both directions.

Figure 3: Screenshot of the visualisation

4. Collapsible tree layout

1. Open collapsible-tree.html in a text editor. This is an edited version of tree-horizontal.html

from week 3.

2. The collapse function “collapses” a tree by placing a node’s children in a placeholder

property (_children) and removing it from the visualisation, which checks the children

property (no underscore).

3. The .enter() and .exit() functions handle changes in the data and updates the visualisation

accordingly. .enter() is concerned with data that are newly added – in this case, they will be

child nodes added through expanding their parent – while .exit() is concerned with removed

data – in this case, child nodes removed by contracting their parents. The variables

nodeEnter and linkEnter defines how the new nodes and edges are to be drawn, while the

variables nodeExit and linkExit defines how the hidden nodes and edges are removed from

the visualisation.

4. Open the page in a browser and try clicking the node “Level 2: A” to expand its children,

then clicking it again to hide its children.

5. You can try to change the loaded file to flare.json to see how the example works with a

larger tree.

Figure 4: Left: Collapsed parent node; Right: Expanded parent node