Display dynamic results in website

Question

I'm developing a website for a travel search engine and I want to show the results similarly with a similar concept than Hipmunk.

Details are:

• The website is being developed with Django.
• Content is dynamic (results depends on each search)
• Bars are placed along a timeline, so positioning them would depend on the time.
• The bars used in the example seem too simple, so I might try something a bit more elaborated, such as a mix of circles, bars and icons, similarly to Rome2rio, but horizontally.
• Time filter is applied at the timeline, so depending on the user interaction with the timeline, results shown would change (see hipmunk image above).

I guess the normal approach would be using javascript, but as I have no background, I was wondering if there are any alternatives or existing packages that would allow me to do this.

It would be ideal if there was some module in Python, as this is my background. I heard about bokeh, but it seems focused on scientific data and charts.

I also read somewhere about Skulpt, but it seems not mature yet.

Is there a way to create such a thing with Python or am I condemned to use Javascript? If so, any tips of existing modules that could help?

Answer 1

In Django, this can actually be done just with CSS and contexts.

For instance:

{% for obj in object_list|slice:":40" %}
    <div style='width:{{ obj|function_to_get_width }}%;float:left'>
        <hr class='diagram_formatting'/>
    </div>
{% endfor %}

Where function_to_get_width would be in a python file and diagram_formatting would be a specified in the CSS file.

Only point missing would be the time filter to be applied through the timeline.