import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.H1('Hello Dashboard'),
html.Div("This is the sub heading"),
dcc.Graph(id="Graph-a",
figure={
'data': [{
'x': [1, 2, 3],
'y': [2, 5, 6],
'type': 'bar',
'name': 'bar 1'
}, {
'x': [1, 2, 3],
'y': [4, 2, 1],
'type': 'bar',
'name': 'bar 2'
}],
'layout': {
'title': 'Dash Visulization'
}
}),
dcc.Graph(id="Graph-ac",
figure={
'data': [{
'x': [1, 2, 3],
'y': [2, 5, 6],
'type': 'bar',
'display': 'inline',
'font-size': '2.65em',
'margin-left': '90px',
'margin-top': '30px',
'font-weight': 'bolder',
'font-family': 'Sans-Serif',
'color': "rgba(117, 117, 117, 0.95)"
}),
dcc.Tabs(id="tabs-example",
value='tab-1-example',
children=[
dcc.Tab(label='Overview', value='tab-1-example'),
dcc.Tab(label='In/Out', value='tab-2-example'),
dcc.Tab(label='Test', value='tab-3-example'),
]),
dbc.Row(html.H1('')),
html.Div(id='tabs-content-example')
])
@app.callback(Output('tabs-content-example', 'children'),
[Input('tabs-example', 'value')])
def render_content(tab):
if tab == 'tab-1-example':
return html.Div([
dbc.Row([
dbc.Col([
html.H1('Overall balance'),
simple_data_table.visual_simple_data_table(overview),
]),
from time import sleep
from helper_functions import * # this statement imports all functions from your helper_functions file!
# Run your helper function to clear out any io files left over from old runs
# 1:
check_for_and_del_io_files()
# Make a Dash app!
app = dash.Dash(__name__)
# Define the layout.
app.layout = html.Div([
# Section title
html.H1("Section 1: Fetch & Display exchange rate historical data"),
# Currency pair text input, within its own div.
html.Div(
[
"Input Currency: ",
# Your text input object goes here:
dcc.Input(id='input-currency', value='AUDCAD', type='text'),
],
# Style it so that the submit button appears beside the input.
style={'display': 'inline-block'}),
# Submit button:
html.Button('Submit', id='submit-button', n_clicks=0),
# Line break
html.Br(),
# Div to hold the initial instructions and the updated info once submit is pressed
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import json
import re
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
html.H1('关于Dash用户的调查'),
html.Br(),
html.P('1. 您的性别为：'),
html.Hr(),
dbc.RadioItems(id='gender',
inline=True,
options=[{
'label': '男',
'value': '男'
}, {
'label': '女',
'value': '女'
}]),
html.Br(),
html.P('2. 您常用的编程语言有：'),
html.Hr(),
dbc.Checklist(id='programming-language',
inline=True,
options=[
y=df_changes_full['HINC00_PC'],
mode='markers'),row=1,col=1)
fig.add_trace(go.Scatter(
x=df_changes_full['MHMVAL00_PC'],
y=df_changes_full['HINC00_PC'],
mode='markers'),row=1,col=2)
fig.update_xaxes(title_text='% Change in Median Rent',range=[-150,400],row=1,col=1)
fig.update_yaxes(title_text='% Change in Median Income',range=[-100,150],row=1,col=1)
fig.update_xaxes(title_text='% Change in Median Home Value',range=[-150,400],row=1,col=2)
fig.update_yaxes(title_text='% Change in Median Income',range=[-100,150],row=1,col=2)
fig.update_layout(showlegend=False)
app.layout = html.Div(children=[
html.H1(
children="Analyzing Trends in Boston's Suffolk County",
style={'textAlign': 'center'
}
),
html.Div(children="""
Welcome! In Section 1 of this dashboard, you will find data visualizations and analytical commentary regarding changes in socioeconomic, racial, and housing trends in Suffolk County, MA, which have been derived from the 2000 and 2010 decennial censuses. Further down, in Section 2, you'll find a data scientist's approach to grouping the county's census tracts by their shared features, and an interactive tool to learn more about each census tract. Enjoy!
"""),
html.H3(children='''Section 1: Trends
'''),
html.H6(children='''Boston became more racially diverse
'''),
dcc.Graph(
id='Fig1',
figure={
'data': [
go.Bar(name='White', y=["2000 Census","2010 Census"], x=[df_2000.NHWHT00.sum(),df_2010.nhwht10.sum()],orientation='h',),
layout = go.Layout(
title = 'Adorable Creatures', # Graph title
xaxis = dict(title = 'Type of animal'), # x-axis label
yaxis = dict(title = 'Number in the zoo'), # y-axis label
)
fig = go.Figure(data=data, layout=layout)
########### Display the chart
app = dash.Dash()
server = app.server
app.layout = html.Div(children=[
html.H1('Petting Zoo'),
dcc.Graph(
id='figure-1',
figure=fig
),
html.A('Code on Github', href='https://github.com/austinlasseter/zoo-animals-dash'),
html.Br(),
html.A('HTML Color Codes', href='https://htmlcolorcodes.com'),
]
)
if __name__ == '__main__':
app.run_server()
def dash_task():
"""
There is only only one task to do, a web app with:
1. Some nice title
2. One visualization placeholder for dataset visualization
a. A dropdown to allow me to select which dataset I want to see (iris, video_game and life_expectancy)
b. Two other dropdowns for me to choose what column to put in x and what column to put in y of the visualization
c. Another dropdown for me to choose what type of graph I want (see examples in file a_) (at least 3 choices of graphs)
d. Feel free to change the structure of the dataset if you prefer (e.g. change life_expectancy so that
there is one column of "year", one for "country" and one for "value")
4. A https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/ with the number of rows being showed on the above graph
5. Another visualization with:
a. It will containing the figure created in the tasks in a_, b_ or c_ related to plotly's figures
b. Add a dropdown for me to choose among 3 (or more if you wish) different graphs from a_, b_ or c_ (choose the ones you like)
c. In this visualization, if I select data in the visualization, update some text in the page (can be a new bootstrap card with text inside)
with the number of values selected. (see https://dash.plotly.com/interactive-graphing for examples)
"""
# Step-0 : Creating a new Dash Application Object with BootStrap properties
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
iris_df = read_dataset(Path("..", "..", "iris.csv"))
iris_columns = list(iris_df.columns)
video_game_df = read_dataset(Path("..", "..", "ratings_Video_Games.csv"))
video_game_columns = list(video_game_df.columns)
life_expectancy_df = process_life_expectancy_dataset()
life_expectancy_columns = list(life_expectancy_df.columns)
# Step-1 : Giving a Nice Title
app.layout = dbc.Container([
html.Center([
html.H1(children='Dash Plots', style={'color': 'brown'}),
html.Hr(),
]),
dbc.Row([
dbc.Col(
dbc.FormGroup([
# Creating a dropdown for selecting the required dataset
dbc.Label("Choose Your Dataset"),
dcc.Dropdown(id='dataset_selector_dropdown',
options=[{
'label': 'Iris Dataset',
'value': 'iris'
}, {
'label': 'Video Game Dataset',
'value': 'video_game'
}, {
'label': 'Life Expectancy Dataset',
'value': 'life_expectancy'
}],
value='iris',
style={'width': '250px'})
])),
# Creating a dropdown for selecting X axis. Initially, it will be blank.
# On Selecting a dataset from the aforementioned dropdown, the options will be
# seen through the callback function : "setXandY()" declared below
dbc.Col(
dbc.FormGroup([
dbc.Label("Select Column for X axis"),
dcc.Dropdown(id='x_selector_dropdown',
style={'width': '160px'})
])),
# Creating a dropdown for selecting Y axis. Initially, it will be blank.
# On Selecting a dataset from the aforementioned dropdown, the options will be
# seen through the callback function : "setXandY()" declared below
dbc.Col(
dbc.FormGroup([
dbc.Label("Select Column for Y axis"),
dcc.Dropdown(id='y_selector_dropdown',
style={'width': '160px'})
])),
# Creating a dropdown for selecting the type of graph to be plotted
dbc.Col(
dbc.FormGroup([
dbc.Label("Choose Graph Type"),
dcc.Dropdown(id='graph_type_selector_dropdown',
options=[{
'label': 'Scatter Plot',
'value': 'scatter'
}, {
'label': 'Histogram Plot',
'value': 'histogram'
}, {
'label': 'Polar Plot',
'value': 'polar'
}],
value='scatter',
style={'width': '160px'})
])),
]),
# Creating a button on click of which the Dash program will display the required plot
dbc.Row(
dbc.Button('Generate Plot',
id='button_for_generating_plot',
style={'width': '100%'},
color='primary')),
# Creating the first graph component
html.Center([dbc.Col(dcc.Graph(id='first_plot'))]),
# Creating the card component for counting the scanned rows
html.Center([
dbc.Col(
dbc.Card([
dbc.CardBody([
html.H4(children=['Number of rows read : 0'],
id='card_text')
])
],
style={"width": "18rem"}))
]),
html.Br(),
# Creating a dropdown for selecting one visualization out of 3 from a_, b_ or c_ files
dbc.FormGroup([
dbc.Label("Choose a Visualization"),
dcc.Dropdown(id='second_plot_selector_dropdown',
options=[{
'label': 'Pie Chart From File A',
'value': 'a_pie'
}, {
'label': 'Polar Scatter Plot From File B',
'value': 'b_polar'
}, {
'label': 'Cluster Plot From File C',
'value': 'c_clusters'
}],
value='c_clusters',
style={'width': '100%'})
]),
html.Br(),
html.Center([dcc.Graph(id='second_plot')]),
# Creating another Card for viewing the selected data from the second plot
html.Center([
dbc.Col(
dbc.Card([
dbc.CardBody([
html.H4(children=['No Data Selected'],
id='second_card_text')
])
],
style={"width": "18rem"}))
])
])
# The callback function below sets the X and Y dropdown options on selection of dataset selection
@app.callback([
Output('x_selector_dropdown', 'options'),
Output('x_selector_dropdown', 'value'),
Output('y_selector_dropdown', 'options'),
Output('y_selector_dropdown', 'value')
], [Input('dataset_selector_dropdown', 'value')])
def setXandY(dropdownValue):
required_options = []
default_value = ''
if dropdownValue == 'iris':
for data_column in iris_columns:
temp_dict = {}
temp_dict['label'] = data_column
temp_dict['value'] = data_column
required_options.append(temp_dict)
default_value = iris_columns[0]
elif dropdownValue == 'video_game':
for data_column in video_game_columns:
temp_dict = {}
temp_dict['label'] = data_column
temp_dict['value'] = data_column
required_options.append(temp_dict)
default_value = video_game_columns[0]
elif dropdownValue == 'life_expectancy':
for data_column in life_expectancy_columns:
temp_dict = {}
temp_dict['label'] = data_column
temp_dict['value'] = data_column
required_options.append(temp_dict)
default_value = life_expectancy_columns[0]
return required_options, default_value, required_options, default_value
# Callback function for plotting the first plot and updating the first card
@app.callback(
[Output('first_plot', 'figure'),
Output('card_text', 'children')], [
Input('button_for_generating_plot', 'n_clicks'),
], [
State('dataset_selector_dropdown', 'value'),
State('x_selector_dropdown', 'value'),
State('y_selector_dropdown', 'value'),
State('graph_type_selector_dropdown', 'value')
])
def plot_first_graph(n_clicks, dataset_name, x_column, y_column,
graph_type):
if n_clicks == None:
return go.Figure(), 'Rows Scanned : 0'
if dataset_name == 'iris':
df = iris_df
rows_count = len(iris_df)
elif dataset_name == 'video_game':
df = video_game_df
rows_count = len(video_game_df)
elif dataset_name == 'life_expectancy':
df = life_expectancy_df
rows_count = len(life_expectancy_df)
else:
df = None
categorical_cols = get_text_categorical_columns(df)
if x_column in categorical_cols:
le = generate_label_encoder(df[x_column])
df = replace_with_label_encoder(df, x_column, le)
if y_column in categorical_cols:
le = generate_label_encoder(df[y_column])
df = replace_with_label_encoder(df, y_column, le)
if graph_type == 'scatter':
first_figure = px.scatter(df, x=x_column, y=y_column)
elif graph_type == 'histogram':
first_figure = px.histogram(df, x=x_column, color=y_column)
elif graph_type == 'polar':
first_figure = px.scatter_polar(df, r=x_column, theta=y_column)
else:
first_figure = None
final_rows_call = 'Rows Read : ' + str(rows_count)
return first_figure, final_rows_call
# Callback function for plotting the second plot
@app.callback(Output('second_plot', 'figure'),
[Input('second_plot_selector_dropdown', 'value')])
def generate_second_plot(plot_name):
if plot_name == 'a_pie':
x = np.random.rand(50) * np.random.randint(-10, 10)
y = np.random.rand(50) * np.random.randint(-10, 10)
df = pd.DataFrame(dict(x=x, y=y, z=x + y))
fig = plotly_pie_chart(df)
elif plot_name == 'b_polar':
fig = plotly_polar_scatterplot_chart()
elif plot_name == 'c_clusters':
fig = plotly_interactivity()
else:
fig = None
return fig
# Callback function for updating the second card. Please Select Lasso Select and then perform selection via dragging
@app.callback(Output('second_card_text', 'children'),
Input('second_plot', 'selectedData'))
def act_on_selecting_data(selectedData):
print(json.dumps(selectedData, indent=2))
print(type(selectedData))
return json.dumps(selectedData, indent=2)
return app
import numpy as np
import pandas as pd
import string
import requests
from requests.exceptions import HTTPError
global SONGS_DF
SONGS_DF = pd.DataFrame(
columns=["Song title", "Song release year", "Artist", "Number of words"])
app = dash.Dash()
server = app.server
app.layout = html.Div([
html.H1('Lyric count by artist information - Fergus McLellan'),
html.Div(
'Enter artist names, separated using a comma, e.g. Blur,Twenty one pilots:'
),
dcc.Input(id='artists-in', value='', style={'fontSize': 28}),
html.Button(id='submit-button',
n_clicks=0,
children='Submit',
style={'fontSize': 28}),
html.P(html.Br()),
html.Div(id='submitted-artists-out'),
dash_table.DataTable(
id='mean_table',
style_header={'backgroundColor': 'rgb(30, 30, 30)'},
style_cell={
'backgroundColor': 'rgb(00, 00, 128)',
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import plotly.plotly as py
import pandas as pd
# initialize Dash app and initialize the static folder
app = dash.Dash(__name__, static_folder='static')
df = pd.read_csv('static/flavors_of_cacao.csv')
# set layout of the page
app.layout = html.Div(children=[
# set the page heading
html.H1(children='Exercise 2'),
# set the description underneath the heading
html.Div(children='''
A heat map showing the quality of chocolate by the country of origin and the % cacao.
'''),
# append the visualization to the page
dcc.Graph(
id='example-graph',
figure={
# configure the data
'data': [
go.Heatmap(x=df['BroadBeanOrigin'],
z=df['Rating'],
y=df['CocoaPercent'],
import plotly.graph_objects as go
import numpy as np
from loader.load_openflight_data import load_locations, load_routes_join
app = dash.Dash('Openflights')
loc_df = load_locations('./data/airports.dat')
route_df = load_routes_join('./data/routes.dat', loc_df)
floor_marks = list(range(0, len(route_df), 500))
ceil_marks = list(range(500, len(route_df), 500)) + [len(route_df) - 1]
slider_marks = {f: f'{f} to {c}' for f, c in zip(floor_marks, ceil_marks)}
app.layout = html.Div(children=[
html.H1(children='Openflights data'),
dcc.Graph(id='world-map-graph'),
dcc.Slider(id='flights-slider',
min=100,
max=len(route_df),
value=500,
marks=slider_marks,
step=None)
])
@app.callback(Output('world-map-graph', 'figure'),
[Input('flights-slider', 'value')])
def update_world_map(num_routes):
fig = go.Figure()
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
from dash.dependencies import State, Output, Input
from app import app
layout = html.Div(
[
dbc.Row([
dbc.Col([
dbc.Card(
[
dbc.CardBody([
html.Div([
dbc.Row([
dbc.Col([html.H1("SMA")],
width={"offset": 5}),
]),
dbc.Row([
dbc.Col([
html.Br(),
html.Div([
html.
A("A simple moving average (SMA) is an arithmetic moving average calculated by adding recent prices and then dividing that figure by the number of time periods in the calculation average. For example, one could add the closing price of a security for a number of time periods and then divide this total by that same number of periods. Short-term averages respond quickly to changes in the price of the underlying security, while long-term averages are slower to react.",
style={"font-size": "20px"})
]),
]),
]),
html.Br(),
]),
]),
##########################################################################################
# BUILD APP
##########################################################################################
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
##########################################################################################
# BUILD LAYOUT
##########################################################################################
# Header layout part
page_title = html.H1(
children="Simple example of Plotly Dashboard based on Iris data set",
style={"text-align": "center"},
)
page_header = html.Div(
children="(Powered by Dash: A web application framework for Python)",
style={"text-align": "center"},
)
# Correlation layout part
correlation_title = html.Div(
children="Finding correlation",
style={"text-align": "center"},
)
correlation_x_axis_dropdown = dcc.Dropdown(
id="correlation-x-axis-dropdown",
options=[{
"label": column.capitalize().replace("_", " "),
# Build Dashboard
# ---------------
app = dash.Dash() # Initialize dash application
# Reference externally hosted CSS file
my_css_url = "https://codepen.io/madjazz/pen/awxxQK.css"
app.css.append_css({
"external_url": my_css_url
})
# Define layout
app.layout = html.Div(children=[
html.H1(children="Simple Dashboard Example", style={"height": "100px", "text-align": "center"}),
html.H2(children="Plots", style={"text-align": "center"}),
# From core components use the dropdown component
dcc.Dropdown(
id="dropdown-graph",
options=[
{"label": "Insulin vs BMI", "value": "insulin_bmi"},
{"label": "Glucose vs BMI", "value": "glucose_bmi"},
{"label": "Age vs BMI", "value": "age_bmi"}
],
value="insulin_bmi"
),
# Set position of plot
soql_url = ('https://data.cityofnewyork.us/resource/nwxe-4ae8.json?' +\
'$select=steward,health,boroname,spc_common,count(tree_id)' +\
#'&$where=boroname=\'Bronx\'' +\
'&$group=steward,health,boroname,spc_common').replace(' ', '%20')
df = pd.read_json(soql_url)
df['percentage'] = df['count_tree_id'] / df['count_tree_id'].sum()
ind1 = df['boroname'].unique()
ind2 = df['spc_common'].unique()
#ind3 = df['steward'].unique()
app.layout = html.Div([
html.Div([
html.H1("Arborist App"),
dcc.Markdown(
"""What proportion of trees are in good, fair, or poor health according to the ‘health’ variable? """
),
html.Div([
dcc.Dropdown(id='xaxis-column',
options=[{
'label': i,
'value': i
} for i in ind1],
value='Manhattan'),
],
style={
'width': '48%',
'display': 'inline-block'
}),
# -*- coding: utf-8 -*-
import dash
import dash_core_components
import dash_html_components
import numpy
t = numpy.linspace(0, 2 * numpy.pi, 100)
x = 10 * (2 * numpy.sin(t) - numpy.sin(2 * t))
y = 10 * (2 * numpy.cos(t) - numpy.cos(2 * t))
app = dash.Dash()
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Hello! Dash love you! '),
dash_core_components.Graph(id='heart-curve',
figure={
'data': [
{
'x': x,
'y': y,
'type': 'Scatter',
'name': 'Heart'
},
],
'layout': {
'title': 'Heart Curve'
}
})
])
if __name__ == '__main__':
'''
### Dash apps can be written in Markdown.
Dash uses the [CommonMark](http://commonmark.org/)
specification of Markdown.\
Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
if this is your first introduction to Markdown!
'''
app.layout = html.Div(children=[
html.H1(
children='AI meets Reserved Seat',
style={
'textAlign': 'center',
'color': colors['text'],
'margin': '5px',
'font-family': 'Century Gothic'
}
),
html.Div(children='NRG, Marketing Science', style={
'textAlign': 'center',
'color': colors['text'],
'margin': '5px',
'font-family': 'Century Gothic'
}),
dcc.Markdown(children = markdown_text),
html.Div([
{"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
# A JSON-like dictionary to use as CSS style information
colors = {'background': '#111111', 'text': '#7FDBFF'}
# Define the layout, which is a tree of components:
# a div which contains a heading, a div and a graph
# Components are described entirely through their keyword attributes
app.layout = html.Div(
style={'backgroundColor': colors['background']},
children=[
# Generates <h1>Wow, a Python web app!</h1>
# 'children' is always 1st attribute; can omit, e.g. html.H1('Hello Dash')
html.H1(children='Wow, a Python web app!',
style={
'textAlign': 'center',
'color': colors['text']
}),
html.Div(children='Here is a test bar chart to appreciate.',
style={
'textAlign': 'center',
'color': colors['text']
}),
dcc.Graph(id='example-graph',
figure={
'data': [
{
'x': [1, 2, 3],
'y': [4, 1, 2],
'type': 'bar',
'name': 'Melbourne'
import dash_core_components as dcc
import dash_html_components as html
from server import app
layout = html.Div([
html.H1(children='Macro Dashboards',
style={
'textAlign': 'center',
'padding-top': '30px',
'color': '#0064ad',
'font-weight': 'bold'
}),
dcc.Link(children=html.Button('Sort by Data Type'),
href='/datatype',
style={
'display': 'flex',
'justify-content': 'center',
'margin-bottom': '30px',
}),
dcc.Link(children=html.Button('Choose Country'),
href='/callback',
style={
'display': 'flex',
'justify-content': 'center',
'margin-bottom': '30px',
}),
])
def dash_callback_example():
"""
Here is a more complex example that uses callbacks. With this example, I believe you will suddenly perceive why dash (and webapps)
are so much better for visual analysis.
"""
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
df = pd.DataFrame({
"Fruit":
["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
app.layout = dbc.Container([
html.H1(children='Hello Dash'),
html.Div(children='Dash: A web application framework for Python.'),
html.Hr(),
dbc.FormGroup([
dbc.Label("Choose Dataset"),
dcc.Dropdown(id="dropdown",
value=1,
options=[{
"label": "First Data",
"value": 1
}, {
"label": "Second Data",
"value": 2
}]),
]),
dbc.FormGroup([
dbc.Label(id='slider-value'),
dcc.Slider(id="slider", min=1, max=10, step=0.5, value=1),
]),
dbc.Button('Run Callback',
id='example-button',
color='primary',
style={'margin-bottom': '1em'},
block=True),
dbc.Row([
dbc.Col(
dcc.Graph(id='example-graph')
), # Not including fig here because it will be generated with the callback
])
])
@app.callback( # See documentation or tutorial to see how to use this
Output(
'example-graph', 'figure'
), # Outputs is what you wish to update with the callback, which in this case is the figure
[
Input('example-button', 'n_clicks')
], # Use inputs to define when this callback is called, and read from the values in the inputs as parameters in the method
[
State(
'dropdown', 'value'
), # Use states to read values from the interface, but values only in states will not trigger the callback when changed
State('slider', 'value')
]
) # For example, here if you change the slider, this method will not be called, it will only be called when you click the button
def update_figure(n_clicks, dropdown_value, slider_value):
df2 = df[:]
df2.Amount = df2.Amount * slider_value
if dropdown_value == 1:
return px.bar(df2,
x="Fruit",
y="Amount",
color="City",
barmode="group")
else:
return px.line(df2, x="City", y="Amount", color="Fruit")
@app.callback(Output('slider-value', 'children'),
[Input('slider', 'value')])
def update_slider_value(slider):
return f'Multiplier: {slider}'
# You can also use app.callback to get selection from any of the plotly graphs, including tables and maps, and update anything you wish.
# See some examples at https://dash-gallery.plotly.host/Portal/
return app
neighbor_list = group_df.get_index()
#cluster result
cluster_result = Cluster.cluster_result()
neighbors, clusters = [], []
for key, value in cluster_result.items():
neighbors.append(key)
clusters.append(str(value))
app = dash.Dash()
app.layout = html.Div([
html.H1('The Nextdoor',
style={
'color': 'rgb(192,72,81)',
'margin-left': '550px',
'font-size': '40px',
'font-family': 'arial'
}),
html.H2('Get to know the neighborhood!',
style={
'color': 'rgb(192,72,81)',
'margin-left': '520px'
}),
#sort neighborhood based on selected feature
html.Div([
html.H2('Sort Neighborhood by feature ',
style={
'color': 'rgb(23,114,180)',
'margin-left': '120px'
}),
href="https://github.com/dilipjagannathan/MovieProject",
className="git-code",
style={"verticalAlign": "middle"},
),
],
),
],
style={"textAlign": "center"},
)
layout = html.Div(
[
html.H1(
"Movie Dashboard",
style={
"textAlign": "center",
"color": "white",
#"background": "yellow"
},
),
input,
dcc.Tabs(
id="all-tabs-inline",
className="all-tabs-inline",
value="about-tab",
children=[
dcc.Tab(
label="About",
value="about-tab",
style=tab_style,
selected_style=tab_selected_style,
),
print(dcc.__version__) # 0.6.0 or above is required
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
], style= {'textAlign': 'center', 'fontSize': 20})
###INDEX PAGE
index_page = html.Div([
html.H1('Data Mining Project'),
html.H3('Aira Domingo'),
dcc.Link('Load Dataset', href='/page-1'),
html.Br(),
dcc.Link('Explore Data', href='/page-2'),
html.Br(),
dcc.Link('Models', href='/page-3')
])
###PAGE 1
page_1_layout = html.Div([
html.H2('Load Dataset'),
dcc.Upload(
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True
colors = {
'background': 'white',
'background1': 'light blue',
'text': 'black'
}
app.layout = html.Div(style={'backgroundColor': colors['background']},
children=[
html.H1(
children='Movie Recommendation: Get your next watch here!',
style={
'textAlign': 'center',
'color': colors['text']
}
),
html.Div(
children='This is a movie recommendation webpage. Get your next watch just by entering either your '
'favorite movie. You are also free to enter your most liked genre or year of watch and we will '
'find the most relevant movies and/or tv series that will absolutely delight you! So, lets go!!',
style={
'textAlign': 'center',
'color': colors['text']
}
),
dcc.Tabs(id="tabs-example", value='tab-1',
children=[
dcc.Tab(label='Personal Choice Based Recommendation', value='tab-1'),
for text in df.columns[:-2]] # skip last 2 columns
# Read in geo-json file
# read in Detroit neighborhood geojson.
with open("../data/raw/detroit_geo.json") as json_file:
detroit_geo = json.load(json_file)
#-------------------------------------------------
# DASH APP
# Background color
colors = {'background': '#006e99', 'text': '#7FDBFF'}
# App layout (Dash components all go inside layout)
app.layout = html.Div(
#style={"backgroundColor": colors["background"], "pad": 0},
children=[
# Title of the web-app
html.H1("Detroit City", style={"text-align": "center"}),
html.H2("Police Attention Level Needed",
style={"text-align": "center"}),
# Date picker
html.Div([
dcc.DatePickerSingle(id="dt_pick_single",
date=dt(2020, 11, 13),
min_date_allowed=dt(2020, 11, 7),
max_date_allowed=dt(2020, 11, 13))
],
style={"padding-left": "25%"}),
# Element to show selected date as text
html.H2(
html.Div(id="output_container",
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.layout = html.Div(children=[
dcc.Input(id='input', value='Enter com o número', type='text'),
html.Div(id='output'),
html.H1("DashBoard"),
dcc.Graph(
id="example",
figure={
'data': [{
'x': [1, 2, 3, 4, 5],
'y': [5, 4, 7, 4, 8],
'type': 'line',
'name': 'Trucks'
}, {
'x': [1, 2, 3, 4, 5],
'y': [5, 4, 7, 4, 8],
'type': 'bar',
'name': 'Ships'
}],
'layout': {
'title': 'Basic Dashboard'
}
},
)
])
app = dash.Dash()
app.scripts.config.serve_locally = True
X = deque(maxlen=1)
Y = deque(maxlen=1)
X.append(1)
Y.append(1)
newtime = deque(maxlen=0)
df = pd.read_csv('CleanData.csv') #Reads CSV Data
app.layout = html.Div(children=[
html.H1(children='the best f*****g data analyzer ever',
style={
'textAlign': 'center'
}),
dcc.Graph(id='sens1'),
# html.H2(id = 'time_counter',
# children='''NO TIME YET''',
# style={
# 'textAlign': 'center'
# }),
html.Div(children=rpd.my_Player(
id = 'video_player',
url = 'http://127.0.0.1:8080/testvideo.mp4',
width = 900,
height = 720,
controls = True,
playing = False,
seekTo = 0,
def render_content(tab):
if tab == 'tab-1-example':
return html.Div([
dbc.Row([
dbc.Col([
html.H1('Overall balance'),
simple_data_table.visual_simple_data_table(overview),
]),
dbc.Col([
html.H1('Balance over time'),
dbc.Row(
multi_line_chart.visual_dropdown(
'my-dropdown',
balance_chart['Cash location'].unique())),
dbc.Row(multi_line_chart.visual_graph())
]),
]),
dbc.Row([
dbc.Col([
html.H1('Asset allocation'),
bar_chart.visual_bar_chart(balance_over_all, 'allocation',
'amount')
]),
dbc.Col([
html.H1('Stock overview'),
pie_chart.visual_pie_chart(stocks, 'name', 'value')
]),
]),
]),
elif tab == 'tab-2-example':
return dbc.Container([
dbc.Row([
dbc.Col(dbc.Card([
dbc.CardHeader("Filters"),
dbc.CardBody([
html.H1('Transactions'),
smart_data_table.visual_datepicker(
'date-picker-range', transactions.date),
html.H1(''),
html.H1('In/Out'),
multiple_stacked_bar_chart.visual_datepicker(
'date-picker-in_out', in_out.date_trunc),
])
],
outline=True),
width='auto'),
dbc.Col([
dbc.Row(html.H1('In-Out bar chart')),
dbc.Row(multiple_stacked_bar_chart.visual_graph()),
dbc.Row(html.H1('Transactions')),
dbc.Row(smart_data_table.visual_smart_data_table())
]),
dbc.Col(html.H1(''), width='auto')
]),
dbc.Row(html.H1(''))
],
fluid=True)
avg_rating = df['Ratings (Averag)']
beer_name = df['beer name']
##### charts
avg_rating = go.Bar(x=beer_name, y=avg_rating)
########### Initiate the app
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.title = tabtitle
########### Set up the layout
app.layout = html.Div(children=[
html.H1(myheading),
html.H3(mysubheading),
dash_table.DataTable(
id='table',
columns=[{
"name": i,
"id": i
} for i in df.columns],
data=df.to_dict('records'),
),
dcc.Graph(id='beer_compare', figure=beer_fig),
html.A('Code on Github', href=githublink),
html.Br(),
html.A("Data Source", href=sourceurl),
html.Br(),
html.A("Plotly Dash", href='https://plot.ly/python/pie-charts/')
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
layout = html.Div([
html.H1('Gun Violence in America, 2014-2018'),
dcc.Link('Go Home', href='/home'),
])
dbc.DropdownMenuItem("Entry 2"),
dbc.DropdownMenuItem(divider=True),
dbc.DropdownMenuItem("Entry 3"),
],
),
],
brand="Fit for Future Funds",
brand_href="#",
sticky="top",
)
body = dbc.Container(
[
dbc.Row(
[
html.H1("Fit for Future Funds")
],
justify="center",
no_gutters=True
),
dbc.Row(
[
dbc.Alert(html.H3("Transparent fund selection based on accurate sustainability ratings"), color="success"),
],
justify="center",
no_gutters=True
),
dbc.Row(
[
dbc.Col(
[
