Skip to content

A simple website for visualizing course maps ๐ŸŽ“๐Ÿ—บ.

License

Notifications You must be signed in to change notification settings

vectominist/Course-Map-Visualization

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

13 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Course-Map-Visualization

Python version LICENSE
A simple website for visualizing course maps ๐ŸŽ“๐Ÿ—บ.

Features

  • Easy and fast to generate and deploy a course map website by yourself ๐Ÿš€.
  • Visualizing via an interactive website powered by Sigma.js.
  • Supports filtering by chapters or sections ๐Ÿ“–.
  • Flexible and easy to customize ๐Ÿ› .

Requirements

  • Install Python (>= 3.6).
  • Install required python packages for generating and drawing the course map structure:
    matplotlib
    networkx
    python-igraph
    

Instructions

Step 1: Download source code

git clone https://github.com/vectominist/Course-Map-Visualization.git

Step 2: Open the example with your Web browser

  • Method 1: Open index.html with your web browser (Chrome or Firefox).
  • Method 2: Host from VSCode with Live Server and open the website with any Web browser.

Step 3: Generate your own course map

  1. Modify the data/course.json file as the following rules:

    {
      "category": [
        "<category 1>",
        ...
      ]
      "nodes": [
        {
          "id": <an integer start from zero>,
          "label": "<name of the course module>",
          "category": "<category name>",
          "key": [list of keys (can be empty)],
          "url": "<link to the course module>"
        },
        ...
      ],
      "edges": [
        [<index of the source node>, <index of the target node>],
        ...
      ]
    }
    
  2. Generate data/data.json with generate_json_file.py:

    python3 generate_json_file.py data/course.json data/data.json
    

    Note: We assume the course map is a DAG and thus can be viewed as a tree-like structure that can be plotted with the Reingold-Tilford algorithm.

Step 4: Set colors for different categories (optional)

The color of the nodes and edges are determined by their categoties. The default color for each category is in color_selection.py. You may want to customize your colors by modifying:

  1. COLORS: the color dictionary (default: matplotlib.colors.CSS4_COLORS)
  2. DEFAULT_COLORS: the default color list for each category:

Another recommended method for assigning colors to categories is to use the Colormaps in Matplotlib. The default colormap is rainbow:

Author

Heng-Jui Chang
For any questions, please contact me ๐Ÿ˜Š.