Skip to content

Visualization Library Decision Tree

Run the Visualization Library Decision Tree Fullscreen Edit the MicroSim Using the p5.js Editor

Description

This interactive MicroSim helps learners navigate the decision-making process of selecting the appropriate JavaScript visualization library for their educational simulations (MicroSims). By answering a series of questions about the content type and requirements, users are guided to the most suitable library for their needs.

Features

  • Interactive Decision Tree: Click through decision nodes to navigate the flowchart
  • Visual Path Highlighting: See your decision path highlighted in green
  • Library Information: Hover over or select library nodes to see detailed descriptions
  • Direct Library Selection: Click any library endpoint to see its path and description
  • Reset Button: Start over at any time to explore different paths

Library Options

The decision tree guides users to one of seven visualization libraries:

Library Best For Color
p5.js Creative coding, animations, physics simulations Pink
Chart.js Simple charts (bar, line, pie, doughnut, radar) Orange
Plotly Scientific plots, 3D charts, mathematical functions Blue
vis-network Network graphs, concept maps, hierarchies Teal
vis-timeline Timelines, Gantt charts, event sequences Green
Leaflet Interactive maps, geographic data Forest Green
Mermaid Flowcharts, sequence diagrams, workflows Purple

Decision Flow

  1. Start: What type of content do you want to visualize?
  2. Animation/Physics: Is it animated or physics-based? Yes leads to p5.js
  3. Data/Statistics: Is it data or statistics? Yes continues to math function check
  4. Math Functions: Need mathematical functions? Yes leads to Plotly, No leads to Chart.js
  5. Relationships: Does it show relationships or networks? Yes leads to vis-network
  6. Time-based: Is it time-based or chronological? Yes leads to vis-timeline
  7. Geographic: Is it geographic or location-based? Yes leads to Leaflet, No leads to Mermaid

Embedding This MicroSim

You can include this MicroSim on your website using the following iframe:

1
<iframe src="https://dmccreary.github.io/automating-instructional-design/sims/viz-library-decision/main.html" height="470px" scrolling="no"></iframe>

Lesson Plan

Objective

Students will understand the characteristics of different JavaScript visualization libraries and be able to select the appropriate library for various types of educational content.

Activities

  1. Exploration (5 minutes): Have students navigate through the decision tree multiple times, exploring different paths to discover all seven library endpoints.

  2. Discussion (10 minutes): As a class, discuss:

  3. Why is p5.js recommended for animations while Chart.js is for static data?
  4. What makes vis-network better for relationships than a standard chart library?

  5. When would you choose Plotly over Chart.js for data visualization?

  6. Application (15 minutes): Give students a list of visualization scenarios and have them use the decision tree to determine the appropriate library:

  7. A bouncing ball simulation (p5.js)
  8. Student grade distribution (Chart.js)
  9. Historical timeline of scientific discoveries (vis-timeline)
  10. Concept dependency map for a course (vis-network)

  11. Map showing school locations (Leaflet)

  12. Analysis (10 minutes): Have students identify a topic from their own studies and determine which visualization library would be most appropriate, justifying their choice based on the decision criteria.

Assessment

Students demonstrate understanding by correctly identifying appropriate visualization libraries for given scenarios and explaining their reasoning based on content characteristics.

References