A CurricularVisualization.jl-compatible graph renderer
The graph renderer is currently a work in progress.
$ npm install git+https://github.com/SheepTester-forks/curricular-analytics-graph.git
There are no pre-bundled files available. If you want to import this into your project, you will have to use a bundler like esbuild with --loader:.svg=file
.
To create a graph, you need to
-
Import
Graph
fromcurricular-analytics-graph/src
. -
Provide an options object to the
Graph
constructor. A list of options is documented inGraphOptions
. All options are optional, and by default, the graph will only have circles and arrows.To update the options object, directly modify
Graph.options
, then force a re-render usingGraph.forceUpdate()
. -
Provide a degree plan, in the form of a list of list of course objects, to
Graph.setDegreePlan
.Each course object must contain
backwards
andforwards
, which are arrays of references to other course objects, representing the prerequisite relationships between courses. Course objects can contain other information, such as course IDs or names, which will be passed directly to the callbacks in the options object in theGraph
constructor.These links don't store any metadata, so if you want to keep track of the type of prerequisite (e.g. prereq vs coreq vs strict coreq), you should maintain a separate object or
Map
mapping from pairs of course IDs to any metadata you wish to keep.To change the degree plan again later on, simply call
setDegreePlan
again with the new degree plan. -
Add
Graph.wrapper
to the document.
import { Graph } from 'curricular-analytics-graph/src'
// Define the properties of the object used to store course data (if using
// TypeScript). The only required fields used by `Graph` are `backwards` and
// `forwards`, which are arrays of references to other course objects in the
// plan.
type Course = {
name: string
backwards: Course[]
forwards: Course[]
}
const graph = new Graph<Course>({
// The `courseName` option determines the text that displays underneath each
// course node.
courseName: ({ course }) => course.name
})
// In practice, these links would be attached automatically rather than
// manually.
const plan = [
[
{ name: 'MATH 1', backwards: [], forwards: [] },
{ name: 'MATH 2', backwards: [], forwards: [] }
],
{ name: 'PHYS 10', backwards: [], forwards: [] }
]
plan[0][0].forwards.push(plan[1][0])
plan[1][0].backwards.push(plan[0][0])
plan[0][1].forwards.push(plan[1][0])
plan[1][0].backwards.push(plan[0][1])
graph.setDegreePlan(plan)
document.body.append(graph.wrapper)
For more examples about customizing the graph renderer, you can refer to these examples:
# Build and minify the app
$ yarn build
# Start a local HTTP server that recompiles on the fly
$ yarn dev