Graphing a list of ranges

[Calab]

I have a list of tuples. Each tuple is a low and high value indicating a range.

What I would like to do is specify a range by giving a starting value and an ending value. I would like to generate a bar showing where within that range the tuple ranges exist. I don't know what this type of graph is called.

In my use, none of the tuples would overlap each other.

I would be using the bar as part of a web page.

Some nice to haves would be:
- Show the range values on mouseover
- Clicking the range should trigger an action
- Being able to specify different colors to show multiple lists of range tuples on the same bar.

e.g.
I have the following list: [(10, 20), (40,60), (70,80)]
I want to show where these ranges exist on a bar that starts with the value 0 and ends at the value 100.

I've attached an image of what I would like the bar to look like.

   

Is there anything prebuilt out there that can do this? How would I go about doing something like this?

[Gribouillis]

I think matplotlib

s there anything prebuilt out there that can do this? How would I go about doing something like this?

Matplotlib has a function called barh() which produces such horizontal bars. I don' t know if you can use this in a web page. Otherwise, such bars appear in Gantt charts, which could be a direction to explore as well.

[snippsat]

Example with plotly
So this dos most,also example of "Clicking the range should trigger an action" which now grey out other ranges.

import plotly.graph_objects as go

# Define the start and end of the full range
start = 0
end = 100
# Define the list of ranges
ranges = [(10, 20), (40, 60), (70, 80)]
# Define colors for each range (optional)
colors = ['orange', 'blue', 'green']
fig = go.Figure()
# Add a bar for each range with a legend
for i, (low, high) in enumerate(ranges):
    fig.add_trace(go.Bar(
        x=[high - low],
        y=['Range'],
        base=low,
        width=0.5,
        orientation='h',
        marker=dict(color=colors[i]),
        hoverinfo='text',
        hovertext=f'Range: {low}-{high}',
        name=f'Range {low}-{high}',
        showlegend=True,
        customdata=[(low, high)]
    ))

fig.update_layout(
    xaxis=dict(range=[start, end], title='Value Range'),
    yaxis=dict(showticklabels=False),
    title="Interactive Range Bar with Legends",
    barmode='stack',
    height=200,
    margin=dict(l=40, r=40, t=40, b=40),
    legend=dict(title='Ranges')
)

# JavaScript callback for clicking a bar
fig.update_traces(
    marker=dict(line=dict(width=1, color='DarkSlateGrey')),
    selector=dict(type='bar'),
    hovertemplate='Range: %{customdata[0]}-%{customdata[1]}<extra></extra>',
    customdata=ranges
)

fig.update_layout(
    clickmode='event+select',
)

# HTML file which can be embedded into a webpage
fig.write_html("range_plot.html", include_plotlyjs='cdn')
fig.show()