Spike Solution - Morphing Graphs

This spike solution is a bit further on than pure raw output from Claude. The idea is that we can unify different graphs by morphing between them.

Version 1 - Heat Map Sankey

Here Claude has produced a sankey diagram that can morph into a (small) heat map. The size of the blobs in the heat diagram corresponds to the widths of the ribbons connecting the relevant two end points. The slightly unusual feature is that the heat map is at 45 degrees.

Bugs:

• The custom data feature never worked. The idea is you can put your own data in to that.
• When you slide ribbon diversion to zero, there is a jump.

The Javascript

/**
   * Creates a slider widget with labels for min, max, and current value.
   * @param {string} prefix - The prefix for the widget's ID.
   * @param {object} config - The configuration for the slider.
   * @returns {HTMLDivElement} The created slider widget container.
   */
  function createSlider(prefix, config) {
    const group = document.createElement('div');
    group.className = 'slider-container';

    const sliderRow = document.createElement('div');
    sliderRow.className = 'slider-row';
  }

Version 2 - Git Flow

This spike solution is about morphing a stream graph to and from a bar graph. The 'connections' between columns are the stream graph flow.

I plan to use this to show how file and directory sizes change over time in a git repo. There may at times be extra 'sankey' flow lines on the graph, when files migrate from one directory to another. This demo shows that a stream graph is both an adapted bar chart and a specialised kind of sankey graph, where all the flows are from a category to the same category at a different time.

Take Homes

These two spike solutions are cornerstones of a more complete system of morphing graphs.

• I need to adapt my existing renderer for ribbons, if I am to use it on these graphs. Claude used bezier ribbons with horizontal ends - and different code for the two examples. I need to adapt my ribbons to cover both cases.
• Some general system is needed for sparse data. The stream graph is a sparse data version of a Sankey diagram, where all the flows are 'on the diagonal'. We seem to need something that can handle both regular patterns - such as all on the diagonal - and small variations such as additional off-diagonal flows.

I had a chat with Claude about how to be systematic about the different kinds of morphing between diagrams I want to do. Claude had a great tendency to expand in detail, and rather uninformatively, on what the different morphings should be doing. In the end it was more useful as a 'rubber ducking' than an actual helpful conceptual partner in this. It helped me realise how tooltips fit in, that whether they are shown on hover, scroll into view as needed, or are indicated by a signposting ribbon that can navigate to them, they are 'the same thing'. I had been treating tooltips as special and different from the nodes. I'd seen the system for info cards (the tooltips) as a completely different system to the system that makes the graphs they annotate.

The 'rubber ducking' simplified the morphing problem. Every diagram I plan to make has nodes and ribbons connecting the nodes. Regularity often disguises the presence of ribbons, or of distinct nodes. The main constraint of interest is how the ribbons are determined, when their existence is implied rather than explicitly spelled out. For a stream graph there are implied ribbons between the categories.