I am pretty sure there is a library out there that could support the type of visualization that I want - I think I just have a problem with terminology, and therefore cannot look up the right thing ...
So, considering this type of JSON data:
var TestData = [
{category: "c_one", label: "item A", start: 0, end: 99999},
{category: "c_one", label: "item B", start: 100500, end: 100509},
{category: "c_two", label: "item C", start: 200000, end: 249999}
];
... I would like to obtain an interactive chart (HTML/JS would be great, but any interactive display would be fine), where:
- The "start" and "end" are generic numbers (integers/floats); and mapped to the abscissa (x-axis) which is horizontal
- Height and width dimensions of the plot/chart are freely configurable (e.g. width up to 94% of browser width, height 200 px)
- At start, the entire range covered by all items in the data is shown;
- Afterwards the user can zoom in (and out) the abscissa using mouse wheel - and can drag the chart left and right with mouse drag
- An item is then a filled (and possibly stroked) rectangle, from "start" to "end" along the abscissa as the width, and taking up the entire height of the chart
- When a given item is within currently shown range, but is too short/thin to be visualized on current zoom level, at least some sort of a visual indication is given (say, a vertical line)
- If an item rectangle is wide enough, then:
- the start number is indicated on its left edge, the text being "vertical" (rotated counterclockwise), non sticky label (disappears as soon as the start location is out of view, even if the rest of the item is visible) - there are otherwise no ticks on the abscissa
- The label is rendered if there is enough space to render at least N (say 3) characters; shown on center of item rectangle, but otherwise sticky (i.e. if most of the item is out of view, and only a part of its right end is shown which is wide enough for 3 characters, then the label is rendered there - even though that is not "center" of the rectangle anymore)
- Hover/mouseover over a part of a rectangle raises a small popup that can shows entire entry (category, label, start and end), through a configurable string format
- Category mappable to e.g. background color (through an intermediary dict)
Closest I got to this is a Timeline chart - I managed to get the below image rendered with https://github.com/denisemauldin/d3-timeline (and then added the labels in GIMP as an example):
The problem with a Timeline chart is:
- The abscissa values/ranges are expected to be dates (coincidentally, d3-timeline does allow you to enter integers for the start and end ranges, but they have the specific meaning of Unix timestamps)
- One cannot typically position labels inside the "item rectangle"
- ( Specifically for d3-timeline, fonts for tick labels are also scaled depending on zoom level (quickly gets ugly) - and it is extremely hard for me to set desired width and height of the chart )
Looking into, say, https://chartio.com/learn/charts/essential-chart-types-for-data-visualization/, this kind of "generic timeline" chart can be seen as similar to:
- Stacked bar chart - except there, the data is shown "vertically", and "horizontally" there are groups
- It could also be seen as a pie/donut chart, except "linearized" (horizontally) - and the abscissa would not have dimension of "percentage"
... but neither of those quite fit, in my opinion (and "generic timeline" is awful as a name, since this has nothing to do with "time" - but I couldn't think of anything better).
So, what would be the name for this kind of a chart - sort of like a timeline, except the abscissa does not have the dimension of date/time, but instead just a generic number?