← Home

Implementing visualizations

Update 2026-01-20: Improved readability with section headings and added visual examples.

The Challenge of Code-Based Visualization

Creating visualizations with code is difficult. Examples are:

  • Processing
  • D3
  • …

The difficulty of the coding task relies on the abstract nature of code. You have only 2 states: the code and the end result.

Approaches to Bridge the Gap

Some ideas have appeared that seem to solve this:

Real-Time Evaluation

Reducing the gap of evaluation: this is done by executing the code after any change on it and let you see your changes (Any playground: CodeSandbox, Codepen, …)

Modular Execution Graphs

Modularizing and creating the graph of execution (Observable HQ)

Video source: Observable HQ Documentation

Visual Programming: Nodes and Graphs

However the best idea seems to use visualization techniques to visualize the code itself. The most notable examples of this are tools like:

  • Noodle
  • Node-based shader editors
  • Visual graph systems

Node-based shader editor showing visual programming graph Image source: Blender Shader Editor Documentation

WYSIWYG Approaches

WYSIWYG tools like Webflow tend to show the final result and let you tweak the elements by selecting and then changing parameters.

Excel provides a different paradigm: a graph represented in a table format.

Limitations of Current Visual Tools

Those tools let you see code represented as a graph, but they have shortcomings:

  • Verbosity: Simple tasks are reduced to many nodes, creating visual complexity
  • Limited Batch Operations: You can only change single elements or a selection of elements with limited operations
  • Version Control: Not compliant with versioning tools like git
  • Forced Paradigm: Information becomes structured in a certain way and forces a unique kind of thinking - it’s all nodes
  • Manual Only: No API to programmatically change elements, everything must be done manually