bendoesdata / panel-altair-dashboard

A tutorial on how to use Panel and Altair to create a simple data dashboard app.

• 👋 Hi, I’m @bendoesdata, creative technologist specializing in visualization and human-computer interaction.
• 👀 I’m interested in data visualization, information design, sonification, and creative coding.
• 🌱 I’m currently learning how to draw (analog style!)
• 💞️ I’m looking to collaborate on musical projects around sonification and browser-based composition tools.
• 📫 How to reach me: benjamincooley94 @ gmail . com

panel-altair-dashboard's Issues

Dashboard coming blank

Hey your work was great.
But I use this on an excel dataset, it does not work.

set a title for your dashboard

title = '## Sentiment Timeseries'

subtitle = 'This dashboard allows you to see sentiment timeseries'

create list of company names (tickers)

tickers = ['Negative', 'Positive']

this creates the dropdown widget

ticker = pn.widgets.Select(name='Polarity', options=tickers)

this creates the date range slider

date_range_slider = pn.widgets.DateRangeSlider(
name='Date Range Slider',
start=dt.datetime(2015, 1, 1), end=dt.datetime(2020, 1, 1),
value=(dt.datetime(2015, 1, 1), dt.datetime(2020, 1, 1))
)

tell Panel what your plot "depends" on.

This defines what should trigger a change in the chart.

both values in depends() will be used in our below Altair chart as filters

@pn.depends(ticker.param.value, date_range_slider.param.value)
def get_plot(ticker, date_range): # start function

# Load and format the data
df = pd.read_excel(r"C:\Users\shubhjha\Downloads\test_viz.xlsx") # define df
#df['timestamp'] = pd.to_datetime(df['timestamp']) # format date as datetime

# create a date filter that uses values from the date range slider
start_date = date_range_slider.value[0] # store the first date range slider value in a var
end_date = date_range_slider.value[1] # store the end date in a var
mask = (df['timestamp'] > start_date) & (df['timestamp'] <= end_date) # create filter mask for the dataframe
df = df.loc[mask] # filter the dataframe

# create the Altair chart object
chart = alt.Chart(df).mark_area(color="#0c1944", opacity=0.8).encode(x='timestamp', y='score', tooltip=alt.Tooltip(['timestamp','score'])).transform_filter((datum.symbol == ticker))
# this ties in the filter from the dropdown selection

return chart

create the Panel object, passing in all smaller objects

dashboard = pn.Row(pn.Column(title, subtitle, ticker, date_range_slider),get_plot
)

draw chart function!

Suggestion

Hello, I read this Data Science Story (How to build Dashboard) on Medium.
First Thanks for your valuable information and insights on the same.
I am about to create a website (not for a project but a real-world web app) which will extensively involve presenting(portraying) of data in various forms. And also want to intact some social elements to it.
And I want to ask you two questions in general:
First, which type of technologies will be suitable for the same. (for the front end, back end, and for data visualization stuff)
Second, how to merge data science codes that are being written in jupyter with the web application.
A Big Thanks for your suggestion and time
In advance.

Clarify that the param.depends is decorating the get_plot function

That's a great example; very clear and compelling! I'd recommend moving the @pn.depends line to be adjacent to the def get_plot function definition that it decorates to make it clear that it's decorating a function rather than declaring something that stands on its own. In both the Medium article and in the notebook, the relationship between those two items doesn't come through clearly to me, and I think it could confuse others. Otherwise, looks great!

ValueError: date encoding field is specified without a type

Hi
I hit this error:

019-08-24 16:29:38,372 Error running application handler <bokeh.application.handlers.notebook.NotebookHandler object at 0x11e58ceb8>: date encoding field is specified without a type; the type cannot be automatically inferred because the data is not specified as a pandas.DataFrame.
File "channels.py", line 48, in to_dict:
"".format(self.shorthand)) Traceback (most recent call last):
  File "//anaconda3/lib/python3.7/site-packages/bokeh/application/handlers/code_runner.py", line 179, in run
    exec(self._code, module.__dict__)
  File "/Users/robin/Github/panel-altair-dashboard/panel-altair-demo.ipynb", line 85, in <module>
    "      const element = document.createElement(\"link\");\n",
  File "//anaconda3/lib/python3.7/site-packages/panel/viewable.py", line 480, in servable
    self.server_doc(title=title)
  File "//anaconda3/lib/python3.7/site-packages/panel/viewable.py", line 457, in server_doc
    model = self.get_root(doc)
  File "//anaconda3/lib/python3.7/site-packages/panel/viewable.py", line 400, in get_root
    root = self._get_model(doc, comm=comm)
  File "//anaconda3/lib/python3.7/site-packages/panel/layout.py", line 105, in _get_model
    objects = self._get_objects(model, [], doc, root, comm)
  File "//anaconda3/lib/python3.7/site-packages/panel/layout.py", line 94, in _get_objects
    child = pane._get_model(doc, root, model, comm)
  File "//anaconda3/lib/python3.7/site-packages/panel/param.py", line 607, in _get_model
    model = self._inner_layout._get_model(doc, root, parent, comm)
  File "//anaconda3/lib/python3.7/site-packages/panel/layout.py", line 105, in _get_model
    objects = self._get_objects(model, [], doc, root, comm)
  File "//anaconda3/lib/python3.7/site-packages/panel/layout.py", line 94, in _get_objects
    child = pane._get_model(doc, root, model, comm)
  File "//anaconda3/lib/python3.7/site-packages/panel/pane/vega.py", line 105, in _get_model
    json = self._to_json(self.object)
  File "//anaconda3/lib/python3.7/site-packages/panel/pane/vega.py", line 66, in _to_json
    return obj.to_dict()
  File "//anaconda3/lib/python3.7/site-packages/altair/vegalite/v3/api.py", line 369, in to_dict
    dct = super(TopLevelMixin, copy).to_dict(*args, **kwargs)
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 285, in to_dict
    validate=sub_validate, context=context)
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 50, in _todict
    return {k: _todict(v, validate, context) for k, v in obj.items()
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 51, in <dictcomp>
    if v is not Undefined}
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 46, in _todict
    return obj.to_dict(validate=validate, context=context)
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 285, in to_dict
    validate=sub_validate, context=context)
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 50, in _todict
    return {k: _todict(v, validate, context) for k, v in obj.items()
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 51, in <dictcomp>
    if v is not Undefined}
  File "//anaconda3/lib/python3.7/site-packages/altair/utils/schemapi.py", line 46, in _todict
    return obj.to_dict(validate=validate, context=context)
  File "//anaconda3/lib/python3.7/site-packages/altair/vegalite/v3/schema/channels.py", line 28, in to_dict
    for shorthand in self.shorthand]
  File "//anaconda3/lib/python3.7/site-packages/altair/vegalite/v3/schema/channels.py", line 28, in <listcomp>
    for shorthand in self.shorthand]
  File "//anaconda3/lib/python3.7/site-packages/altair/vegalite/v3/schema/channels.py", line 48, in to_dict
    "".format(self.shorthand))
ValueError: date encoding field is specified without a type; the type cannot be automatically inferred because the data is not specified as a pandas.DataFrame.
 ``

Pandas 0.24.2
Altair 3.1.0
Panel 0.6.0