dash-is-dank.py

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

import pandas as pd 


csvs = ['https://gist.githubusercontent.com/chriddyp/' +
                                            'c78bf172206ce24f77d6363a2d754b59/raw/' +
                                            'c353e8ef842413cae56ae3920b8fd78468aa4cb2/' +
                                            'usa-agricultural-exports-2011.csv',
        'https://gist.githubusercontent.com/chriddyp/' +
                                            '5d1ea79569ed194d432e56108a04d188/raw/' +
                                            'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
                                            'gdp-life-exp-2007.csv'
]

dfs = [pd.read_csv(c) for c in csvs]




def generate_table(dataframe, max_rows=10):
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))]
    )



app = dash.Dash()

app.layout = html.Div(children=[
        html.Div(
            id='header',
            children=[
                html.H2('Dash is Dank'),
                html.Hr()
            ]
        ),
        html.Div(
            id='body',
            children=[
                html.Section(
                    id='rendering-dataframes',
                    children=[
                        html.H3(children='Rendering Dataframes'),
                        html.H5(children='Us Agriculture Exports (2011)'),
                        generate_table(dfs[0]),
                        html.Hr()
                    ]
                ),
                html.Section(
                    id='scatter-plot',
                    children=[
                        html.H3(children='Scatter Plots'),
                        html.Div([
                            dcc.Graph(
                                id='life-exp-vs-gdp',
                                figure = {
                                    'data': [
                                        go.Scatter(
                                            x=dfs[1][dfs[1]['continent'] == i]['gdp per capita'],
                                            y=dfs[1][dfs[1]['continent'] == i]['life expectancy'],
                                            text=dfs[1][dfs[1]['continent'] == i]['country'],
                                            mode='markers',
                                            opacity=0.7,
                                            marker={
                                                'size': 15,
                                                'line': {'width': 0.5, 'color': 'white'}
                                            },
                                            name=i
                                        ) for i in dfs[1].continent.unique()
                                    ],
                                    'layout': go.Layout(
                                        xaxis={'type': 'log', 'title': 'GDP Per Capita'},
                                        yaxis={'title': 'Life Expectancy'},
                                        margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                                        legend={'x': 0, 'y': 1},
                                        hovermode='closest'
                                    )
                                }
                            )
                        ])
                    ]
                )
            ]
        )
    ],
    style={'margin': '20px'}
)



external_css = ["https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
            'https://codepen.io/chriddyp/pen/bWLwgP.css',
            "//fonts.googleapis.com/css?family=Raleway:400,300,600",
            "//fonts.googleapis.com/css?family=Dosis:Medium",
            "https://cdn.rawgit.com/plotly/dash-app-stylesheets/62f0eb4f1fadbefea64b2404493079bf848974e8/dash-uber-ride-demo.css",
            "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]


for css in external_css:
    app.css.append_css({"external_url": css})


if __name__ == '__main__':
    app.run_server(debug=True)