At the beginning of the year, a couple of friends told me about some javascript libraries that I didn't know. First, @dmorganb explained to me about Svelte and how it competes with Angular, React y Vue. Then, @yuenlw showed me D3.js and how it is data driven.

I decided to try them out creating a generator of curriculum maps: "Curriculum Map"

* Web application

* Source code

Instructions:

1. It receives as an input a curriculum configuration in JSON format: each block courses and, if decided, each course requirements, if the student already passed the course and a color palette. It is easier to configure in a computer than in a cellphone and don't be afraid if you don't know what a JSON is because there is a default example so you just need to modify it to your liking.

2. If there is an error in the config a red border in the text area will show up. Also, there is a limit of 12 blocks and 10 courses per block, any more blocks or courses per block are ignored.

3. There are options for showing colors, showing completed courses (there is an animation that adds a thick border to the course) and show courses requirements (a line connecting them will show only if the requirement is from previous block). Curriculum map refreshes automatically every time there is a change in the config and there is a button to print it

When you open the web page, there is already a configuration by default; hope it works as a guidance: a student in the 4th block of Computer Engineering Baccalaureate from Tecnológico de Costa Rica.

Visually it looks like this:

This is the config:

{
  "title": "BACHILLERATO EN INGENIERÍA EN COMPUTACIÓN",
  "colors": {
    "default": "lightgreen",
    "CI": "lightskyblue",
    "MA": "lightcoral",
    "IC": "lightgreen",
    "SE": "tan",
    "FH": "orchid",
    "CS": "gold",
    "AE": "lightsalmon",
    "done": "green"
  },
  "courses": [
    [
      { "code": "CI0200", "name": "EXAMEN DIAGNOSTICO", "done": 1 },
      { "code": "CI0202", "name": "INGLES BASICO", "done": 1 },
      { "code": "MA0101", "name": "MATEMATICA GENERAL", "done": 1 }
    ],
    [
      { "code": "CI1106", "name": "COMUNICACION ESCRITA", "done": 1 },
      { "code": "IC1802", "name": "INTRODUCCION A LA PROGRAMACION", "done": 1 },
      { "code": "IC1803", "name": "TALLER DE PROGRAMACION", "done": 1 },
      {
        "code": "IC1400",
        "name": "FUNDAMENTOS DE ORGANIZACION DE COMPUTADORAS",
        "done": 1
      },
      { "code": "MA1403", "name": "MATEMATICA DISCRETA", "done": 1 },
      { "code": "SE1100", "name": "ACTIVIDAD CULTURAL I", "done": 1 }
    ],
    [
      { "code": "CI1230", "name": "INGLES I", "reqs": ["CI0200", "CI0202"], "done": 1 },
      { "code": "FH1000", "name": "CENTROS DE FORMACION HUMANISTICA", "done": 1 },
      {
        "code": "IC2101",
        "name": "PROGRAMACION ORIENTADA A OBJETOS",
        "reqs": ["IC1802", "IC1803"],
        "done": 1
      },
      {
        "code": "IC3101",
        "name": "ARQUITECTURA DE COMPUTADORES",
        "reqs": ["IC1400", "IC1803"],
        "done": 1
      },
      { "code": "IC2001", "name": "ESTRUCTURAS DE DATOS", "done": 1 },
      {
        "code": "MA1102",
        "name": "CALCULO DIFERENCIAL E INTEGRAL",
        "reqs": ["MA0101", "MA1403"],
        "done": 1
      },
      { "code": "SE1200", "name": "ACTIVIDAD DEPORTIVA I", "done": 1 }
    ],
    [
      { "code": "CI1231", "name": "INGLES II", "reqs": ["CI1230"], "done": 1 },
      { "code": "CI1107", "name": "COMUNICACION ORAL", "reqs": ["CI1106"] },
      { "code": "IC4301", "name": "BASES DE DATOS I", "reqs": ["IC2001"], "done": 1 },
      {
        "code": "IC3002",
        "name": "ANALISIS DE ALGORITMOS",
        "reqs": ["IC2001", "MA1102"],
        "done": 1
      },
      { "code": "MA1103", "name": "CALCULO Y ALGEBRA LINEAL", "reqs": ["MA1102"], "done": 1 },
      { "code": "SE1400", "name": "ACTIVIDAD CULTURAL-DEPORTIVA" }
    ],
    [
      { "code": "CS2101", "name": "AMBIENTE HUMANO", "reqs": ["CI1107"] },
      { "code": "IC4302", "name": "BASES DE DATOS II", "reqs": ["IC4301"] },
      { "code": "IC5821", "name": "REQUERIMIENTOS DE SOFTWARE", "reqs": ["IC4301"] },
      { "code": "IC4700", "name": "LENGUAJES DE PROGRAMACION", "reqs": ["IC3002", "IC3101"] },
      { "code": "MA2404", "name": "PROBABILIDADES", "reqs": ["MA1103"] }
    ],
    [
      {
        "code": "CS3401",
        "name": "SEMINARIO DE ESTUDIOS FILOSOFICOS HISTORICOS",
        "reqs": ["CS2101"]
      },
      { "code": "IC6821", "name": "DISEÑO DE SOFTWARE", "reqs": ["IC5821"] },
      { "code": "IC4810", "name": "ADMINISTRACION DE PROYECTOS", "reqs": ["IC5821"] },
      { "code": "IC5701", "name": "COMPILADORES E INTERPRETES", "reqs": ["IC4700"] },
      { "code": "MA3405", "name": "ESTADISTICA", "reqs": ["MA2404"] }
    ],
    [
      { "code": "CS4402", "name": "SEMINARIO DE ESTUDIOS COSTARRICENSES", "reqs": ["CS3401"] },
      { "code": "IC4003", "name": "ELECTIVA I" },
      {
        "code": "IC6831",
        "name": "ASEGURAMIENTO DE LA CALIDAD DEL SOFTWARE",
        "reqs": ["IC4810", "IC6821"]
      },
      { "code": "IC7900", "name": "COMPUTACION Y SOCIEDAD", "reqs": ["IC4810"] },
      { "code": "IC6600", "name": "PRINCIPIOS DE SISTEMAS OPERATIVOS", "reqs": ["IC5701"] },
      { "code": "IC6400", "name": "INVESTIGACION DE OPERACIONES", "reqs": ["MA3405"] }
    ],
    [
      { "code": "AE4208", "name": "DESARROLLO DE EMPRENDEDORES" },
      { "code": "IC5001", "name": "ELECTIVA II" },
      {
        "code": "IC7841",
        "name": "PROYECTO DE INGENIERIA DE SOFTWARE",
        "reqs": ["IC4302", "IC6831"]
      },
      { "code": "IC7602", "name": "REDES", "reqs": ["IC6600"] },
      { "code": "IC6200", "name": "INTELIGENCIA ARTIFICIAL", "reqs": ["IC5701", "IC6400"] }
    ],
    [
      {
        "code": "IC8842",
        "name": "PRACTICA PROFESIONAL",
        "reqs": [
          "AE4208",
          "FH1000",
          "IC4003",
          "IC5001",
          "IC6200",
          "IC7602",
          "IC7841",
          "SE1100",
          "SE1200",
          "SE1400"
        ]
      }
    ]
  ]
}

PS: I really liked both libraries, I will continue reading and learning about them for future developments.

Compartir en: TwitterFacebook