Creating New Graphs

This page contains information required to create new graphs manually, using existing software. The result is an SVG file which can be incorporated into Courseography. For more information on how Courseography uses the SVG files, please consult the Haskell documentation in the SVG module.

Software

Our current graph-drawing process uses two pieces of free software.

• yEd: This is a graph-making software where you'll do the bulk of your drawing. Use this to create different kinds of nodes, and edges between them.
• Inkscape: A powerful image-processing software that you'll use put finishing touches on your graph.

Workflow

First, download the current Computer Science graphml file and open it in yEd. This can serve as a reference as you build your own graph.

yEd

In a new yEd file, start creating new nodes and edges. Please save your file using the naming convention dddYYYY.graphml, where ddd is the three-letter department code, and YYYY is the academic year to which the graph corresponds.

There are two main goals for the graph:

1. Position all of the edges and nodes. Make use of "dummy nodes" and "AND/OR nodes" to reduce the number of edges and edges crossings.

   • Dummy nodes must have a colour of #888888, and AND/OR nodes must be in ellipses.

2. Colour the nodes to indicate categories of courses within your department. You may choose to group courses together in regions on your graph, like the Computer Science graph, but this is not required.

   • If you choose not to group categories together, you'll need to leave space for a legend. However, do not create the legend yet.

The only data which is kept from this graph are the positions of the nodes and edges, the text contained in each node, the type of each node (regular/dummy/AND/OR), and the node colours. So don't spend too much time fiddling around with other details, like font size and stroke styles, as these won't appear in Courseography.

Once you are completely finished with your graph, do two things:

1. Save the graphml file.
2. Go to File -> Export and save your graph as an svg file (name doesn't matter, as this is temporary). In the dialog that appears, make sure that:
   • "Margin Width" is 0
   • "Region" is set to Complete Diagram
   • (recommended) In the "Image" tab, select "Transparent background".

Now proceed to the next section!

Inkscape

We are now going to import the file:

1. Go to Edit -> Preferences.... Under Input/Output -> SVG output, make sure the "Path data -> Path String format" option is set to "Absolute".
2. Go to File -> Import and import the svg file you created in yEd. Ensure "Include SVG image as editable object(s) in the current file" is selected. You should then see the graph appear in Inkscape.
3. Your imported graph is likely not the same size as the default canvas. Make sure nothing is selected, and then go to File -> Document Properties. Press the "Resize page to drawing or selection" button.
4. Save this into a file dddYYYY.svg.

At this point, there are three possibilities for what you still need to do:

• If you chose not to make your nodes different colours, do nothing. You're done!
• If you chose to use different colours but did not position them together, you'll need to use Inkscape to create a text legend somewhere on your graph. As before, you are limited in what attributes will actually be stored in Courseography: the text position, colour, and alignment. So don't spend time picking fonts, as your choices will be ignored.
• If you chose to position your courses together, you can use the Inkscape to create coloured polygons surrounding the different course groups, and text labels for each polygon. The only attributes stored for the polygons are their positions and their fill colour.

Check out the Computer Science and Statistics graphs to see what each of the approaches will look like.

Note that you may find while working on these final touches that you want to reposition some of the nodes and edges. While it is possible to do this in Inkscape, it's not as easy as in yEd. We recommend making positional changes in yEd (saving to both the graphml and svg files) and then re-importing the svg file into Inkscape. Unfortunately, this process is the best one we have at the moment.

Finishing up

Once you are happy with the final look of the graph, email both your dddYYYY.graphml and dddYYYY.svg files to [email protected]. We'll send you a response as soon as we can.