Share Your App - Explore Page - November 2024

Dash Python
1

Thank you for your interest in submitting your Dash app to the Plotly Explore Page platform, visited by thousands of Dash users daily.

Current submissions cycle will go until November 30, 2024.

To submit your app, please reply to this thread directly.

Please refer to the following suggestions when building and submitting your app. The more suggestions your app adheres to, the more likely it is to be added to the Explore Page.

  • Apps in the following categories are encouraged: Energy & Utilities, Business, Predictive Analytics & Forecasting, NLP, Connecting to APIs
  • App should look as good or better than the current apps on the platform
  • App should use different data than the other apps and try to cover a unique story
  • Content/story should be neutral or positive
  • App with live data that updates itself is encouraged
  • App that goes beyond exploratory analysis – app that perform advanced analytics
  • App that uses 3rd-party libraries (e.g., SciPy, spaCy, TensorFlow, Scikit-learn)
  • App that solves real-life problems, app that could have practical use cases
  • App content and results should be easy to access (we discourage requiring log-ins or uploading data as a precursor to seeing the full app).

The Plotly Example Apps team will review the apps submitted and update this post with the names of the apps that have been selected.

Happy Dash app building!

2

Hi Adam,

Here is my submission for a dash app: Energy Management Dashboard.

There is an example of the app hosted on Digital Ocean: app.

The app can be part of the Energy & Utilities category, more specifically for energy management within a manufacturing site for instance. This is aimed at monitoring energy usage, keeping a stable consumption and identifying energy efficiency improvement.

The data source can be configured to an API (for now random data is used) via the api file. The app displays global site energy consumption (electricity only for now) and can be customised by adding measurement tags in a csv file where tags are used to query data from an API.

If you have any questions let me know!

3

hi @georgesnomicos
:wave: Welcome to the community, and thank you for this app submission.

I see the data coming into the app is using the API. Can you please share more about the energy consumption data? is this sample data?

4

Yes this is sample data, so it needs to be expanded to specific cases using already defined functions while keeping the same output format.

I had a connection to an API (from an industrial historian) previously but that was for a specific user case.

1 Like
5

Thank you. We’ll make sure to review this app thoroughly and all other apps submitted in early December.

7

Hi Adam:

This is my website:

This website generates:

  • Real-time display of key financial indicators and market metrics
  • AI-driven analysis of central bank communications, powered by OpenAI
  • Comprehensive educational resources and reference materials to help interpret financial data

Please let me know your suggestions and questions.

8

Thank you for the app, @duanwax . When I click the link on the united-states page, I get a 404 Not Found.

Recent references:

I also saw you had United States (with the flag) in all sub-tabs. Is that because you’re planning to add other countries in the future?

1 Like
9

Thank you so much for your reply @adamschroeder

For the link you clicked, it is resolved by fixing a bug:

I clicked other links – they work well.

“I also saw you had United States (with the flag) in all sub-tabs. Is that because you’re planning to add other countries in the future?” → yes. I plan to other countries with the same feature.

Thank you.

1 Like
10

Hi Adam @adamschroeder

I wanted to share some exciting updates I’ve made to the website:

  1. Performance Improvements:

  2. New AI Features:

    • Added speech analysis capabilities using structured AI outputs
    • Implemented topic-based summary breakdowns based on custom prompts
    • You can see these in action on our Central Bank Feeds page for the United States:

The combination of Dash and AI has proven to be quite powerful for this use case. Hence just want to share the update here.

Best regards

1 Like
11

Yes, there is a clear improvement in speed. Nice job, @duanwax

12

I made a three page app about UFO sightings in the United States currently hosted at www.chrisdarley.me. The first page is an animated map showing UFO sightings from 1910-2014 filterable by shape. The second page is an animated double bar chart comparing yearly and cumulative counts of different observed UFO shapes. The third page is a table where users can lookup descriptions of UFO sightings in their town or any other area of interest. The UFO data is from a dataset someone else scraped from NUFORC (National UFO Reporting Center) and posted on Kaggle, combined with some other government data that was necessary for the map. Future improvements would include trying to improve the speed of certain queries and setting up an automated scraper that collects each new month’s data from NUFORC’s website. This would enable me to incorporate current data and get access to full descriptions (some sighting descriptions past a certain character length were cut off by the original scraper of the dataset). The app is currently hosted on AWS EC2.

13

Great job, @chris3. And :wave: Welcome to the Plotly community.

I liked your animated scatter map. There was a sizeable jump in UFO sightings from 1996-1998. I wonder what caused that. By 2012 the map is saturated.

What does the duration represent exactly? Is that how long people they have see the UFO for?

I think the community would love to explore this data set at one of the upcoming figure fridays. Do you mind sharing the data with me?

14

Hi, thank you.

The data originally comes from Data Bank | NUFORC - Latest UFO Sightings. The version of the dataset I used was one that someone had scraped from this site in 2014, available on kaggle: UFO Sightings | Kaggle. There is a complete and a scrubbed dataset, and I used the scrubbed version.

It looks like someone else scraped NUFORC’s database again in 2019, with data here: UFO Sightings (Approx. 90,000) | Kaggle. However, I have not worked with this data at all and it looks to be formatted slightly differently.

I believe the duration is how long the UFO was observed in the sky, although I don’t think the dataset has any specific data definitions other than the column names. Maybe the rise in sightings had to do with people getting access to smartphones…

If people find this dataset interesting, they may want to check out the NUFORC website which has more information about many of the sightings than is included in the records of this database, including more thorough descriptions and sometimes pictures or video of UFOs.

2 Likes
15

I should add that the dataset contains sightings from other countries, although my app just focused on the US.

16

Noted. Thank you Chris. I’ll try to use this data set at the next Figure Friday. Thanks for sharing the data.

1 Like
17

Hi Adam,

I wanted to share some recent updates to my website.

This week, I focused on enhancing the dollar funding flow visualization on the main page.
The visualization is based on data from the New York Fed’s research paper “Mapping U.S. Dollar Funding Flow”.

This is the new features I added to the website:

  • Integrate MapBox with Plotly with custom style
  • Created curved links between nodes with directional arrows (custom implementation, as Dash has limited built-in MapBox symbol support)
  • Added interactive zoom functionality on the map when clicking markers

Note: The initial map load might take a minute or require a refresh. This seems to be an issue specific to custom MapBox styles rather than their built-in styles.

Also link my previous page here:

Cheers, :slight_smile:

18

This is such a nice addition, @duanwax . It took about 10 seconds for the initial load of the map. How did you add those lines and directional arrows? Did you use some CSS?

1 Like
19

Hi @adamschroeder:

Thanks for trying it out. I do feel the initial load is slow, especially for custom style & too many edges added. I will think about how to optimize.
To add lines and arrows, I will prepare a git repro for it and share it here in the next few days ( I indeed searched around and didn’t find good solutions). Good news is AI helped a lot, most of the solutions around adding edges are provided by ChatGPT and Claude, and seems they are pretty good at coding for dash :slight_smile:

20

@adamschroeder

Please see the code repro that add the lines and arrows for direction. The output is:

Screenshot 2024-11-18 at 9.17.47 PM
Screenshot 2024-11-18 at 9.17.47 PM1380Ă—1198 78.7 KB

Thanks.

import numpy as np
import plotly.graph_objects as go

def compute_curve_points(start_lat, start_lon, end_lat, end_lon, arc_height=0.2):
    """
    Compute points for a curved path with a directional arrow.
    """
    t = np.linspace(0, 1, 50)

    # Simple sinusoidal curve
    arc_lats = (1 - t) * start_lat + t * end_lat + arc_height * np.sin(np.pi * t)
    arc_lons = (1 - t) * start_lon + t * end_lon

    # Midpoint and direction vector for the arrow
    mid_point = len(t) // 2
    delta_lat = arc_lats[mid_point + 1] - arc_lats[mid_point - 1]
    delta_lon = arc_lons[mid_point + 1] - arc_lons[mid_point - 1]
    length = np.sqrt(delta_lat ** 2 + delta_lon ** 2)
    norm_delta_lat = delta_lat / length
    norm_delta_lon = delta_lon / length

    # Arrow tip and wings
    arrow_scale = 0.4
    wing_scale = 0.3
    arrow_tip_lat = arc_lats[mid_point] + arrow_scale * norm_delta_lat
    arrow_tip_lon = arc_lons[mid_point] + arrow_scale * norm_delta_lon
    wing_lat = wing_scale * norm_delta_lon
    wing_lon = -wing_scale * norm_delta_lat

    return arc_lats, arc_lons, arrow_tip_lat, arrow_tip_lon, wing_lat, wing_lon, norm_delta_lat, norm_delta_lon


def add_curve_with_arrow(figure, start_lat, start_lon, end_lat, end_lon, arc_height=0.2, color='blue'):
    """
    Add a curved path with an arrow to a Mapbox figure.
    """
    arc_lats, arc_lons, arrow_tip_lat, arrow_tip_lon, wing_lat, wing_lon, norm_delta_lat, norm_delta_lon = compute_curve_points(
        start_lat, start_lon, end_lat, end_lon, arc_height
    )

    # Add curved line
    figure.add_trace(go.Scattermapbox(
        mode='lines',
        lat=arc_lats,
        lon=arc_lons,
        line=dict(width=1, color=color),
        hoverinfo='none',
    ))

    # Add arrow
    figure.add_trace(go.Scattermapbox(
        mode='lines',
        lat=[
            arrow_tip_lat,
            arrow_tip_lat - 0.4 * norm_delta_lat + wing_lat,
            arrow_tip_lat,
            arrow_tip_lat - 0.4 * norm_delta_lat - wing_lat
        ],
        lon=[
            arrow_tip_lon,
            arrow_tip_lon - 0.4 * norm_delta_lon + wing_lon,
            arrow_tip_lon,
            arrow_tip_lon - 0.4 * norm_delta_lon - wing_lon
        ],
        line=dict(width=2, color=color),
        hoverinfo='none',
    ))


# Example Usage
def create_map():
    fig = go.Figure()

    # Define two locations
    start_lat, start_lon = 37.7749, -122.4194  # San Francisco
    end_lat, end_lon = 34.0522, -118.2437  # Los Angeles

    # Add curved path with arrow
    add_curve_with_arrow(fig, start_lat, start_lon, end_lat, end_lon, arc_height=2, color='blue')

    # Mapbox settings
    fig.update_layout(
        mapbox=dict(
            style='carto-positron',  # Change to your preferred Mapbox style
            center=dict(lat=(start_lat + end_lat) / 2, lon=(start_lon + end_lon) / 2),
            zoom=5,
        ),
        margin=dict(l=0, r=0, t=0, b=0)
    )

    fig.show()


if __name__ == "__main__":
    create_map()
1 Like