{"id":160,"date":"2020-04-10T11:46:39","date_gmt":"2020-04-10T08:46:39","guid":{"rendered":"http:\/\/www.etemkeskin.com\/?p=160"},"modified":"2020-11-22T14:16:41","modified_gmt":"2020-11-22T11:16:41","slug":"creating-interactive-visualizations-with-plotlys-dash-framework","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/","title":{"rendered":"Creating Interactive Visualizations with Plotly’s Dash Framework"},"content":{"rendered":"\n

1. What is DASH?<\/h3>\n\n\n\n

Dash is a Python framework<\/strong> developed for building web applications. However, it is more suitable for data visualization applications. Dash was developed based on Flask, Plotly.js, ve React.js<\/strong> libraries. Interactive tables, graphs and data visualizations can be easily developed with Dash without knowing javascript.<\/p>\n\n\n\n

With Python, people who perform data analysis, data preparation, data visualization, modeling, device control and reporting can easily develop analytical web applications with dash<\/strong><\/p>\n\n\n\n

You can also make your graphics and tables stunning by taking advantage of the power of CSS<\/strong> and Html<\/strong> in the dash.<\/p>\n\n\n\n

2. Installations<\/h3>\n\n\n\n

Before installing Dash, python3 must be installed on our computer. For this we can install Anaconda on our computer at https:\/\/www.anaconda.com\/<\/a> . After installing Anaconda, we will create a virtual environment<\/strong> for Dash applications on our computer and install the following packages into it.<\/p>\n\n\n\n

conda create --name dash # anacondada virtual ortam olu\u015fturmak\nconda activate dash veya source active dash #windows veya linuxte virtual ortam\u0131 aktive etmek<\/code><\/pre>\n\n\n\n
You can use the following commands related to Dash. Or if you just say pip install dash<\/code><\/strong>, you will have installed all of the following packages.<\/p>\n\n\n\n
pip install Flask\npip install dash\npip install plotly\npip install dash_html_components # dash html components\npip install dash_core_components # dash core components \npip install dash-table # data table components<\/pre>\n\n\n\n
By typing pip freeze<\/strong><\/code>, we can install the python packages into the virtual environment. <\/p>\n\n\n\n
3. Introducing DASH<\/h3>\n\n\n\n
Dash html components<\/strong> and dash core components<\/strong> are used to create interactive tables and graphs in Dash. In the code below, you can understand what the component created with dash actually refers to as html.<\/p>\n\n\n\n
import dash_html_components as html\n# Dash html code in python\nhtml.Div([\n    html.H1('First Application'),\n    html.Div([\n        html.P(\"Dash converts Python classes to HTML elements.\"),\n        html.P(\"Javascript is used at frontend.\")\n    ])\n])\n # HTML version of the above python code to be displayed in the web browser\n  <div>\n    <h1>First Dash App<\/h1>\n    <div>\n        <p>Dash converts Python classes into HTML<\/p>\n        <p>This conversion happens behind the scenes by Dash's JavaScript front-end<\/p>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
Dash applications basically consist of 2 parts. Layout and Callbacks<\/strong>.  With Layout, we define how the Dash application will look and how the application works interactively with Callbacks.<\/p>\n\n\n\n
4. Layout and First Application <\/h3>\n\n\n\n
Python classes have been defined to create visual components of the application in Dash. These components are defined in dash_core_components<\/strong> and dash_html_components<\/strong> packages and we can use them by including them in our project.<\/p>\n\n\n\n
Dash Core Components consist of various components to prepare interactive dashboards. In short these are;<\/p>\n\n\n\n
  1. Graphs: to create graphs<\/li>
  2. Tabs: to create tabs<\/li>
  3. Dropdown: to create dropdpwn<\/li>
  4. Sliders: to create slider<\/li>
  5. DatePickers: to select date or date range<\/li>
  6. Table: to show tables<\/li>
  7. Markdown: Used as markdown.<\/li>
  8. Checklist: for Checklist <\/li>
  9. RadioItems: for Radio button<\/li>
  10. Location: for location bar<\/li>
  11. Store: to save data in Browser.<\/li><\/ol>\n\n\n\n
    import dash\nimport dash_core_components as dcc\nimport dash_html_components as html\nfrom dash.dependencies import Input, Output\nimport dash_table\n\nexternal_stylesheets = [''] #external css file path can be defined.\n\napp = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n\napp.layout = html.Div(children=[\n    html.H1(children='Hello Dash'),\n\n    html.Div(children='''\n        DASH: First DASH Application.\n    '''),\n\n    dcc.Graph(\n        id='example-graph',\n        figure={\n            'data': [\n                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Newyork'},\n                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name':'London'},\n            ],\n            'layout': {\n                'title': 'Dash Data Visualisation'\n            }\n        }\n    )\n])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)<\/pre>\n\n\n\n
    First, we created DASH object with “app = dash.Dash (__ name__)<\/strong>“.  Then we defined how the layout will be with app.layout in the application.<\/p>\n\n\n\n
    We defined the graphic in our application with dcc.Graph () in layout. We entered information about the data and the type of the chart into the chart.<\/p>\n\n\n\n
    In the end, we are launching our application with app.run_serv (debug = True). When we run the application, we get the following output in the web browser.<\/p>\n\n\n\n
    • \"\"<\/figure><\/li><\/ul><\/figure>\n\n\n\n
      5. DASH Callbacks<\/h3>\n\n\n\n
      In Dash application, we use the @ app.callback () decorator<\/strong> above function to make our graphics interactive.<\/p>\n\n\n\n
      Let’s examine the simplest callback application below. First, we define the dash core element<\/strong> from which we will get input in our layout. This is the equivalent of the form element<\/strong> in html. The value of this input element is reached in the callback decorator with the element’s id = ‘my-id’<\/strong> value and we use it in the function. Then, in the layout where this value will be used and where we will render it as output, we reach the element in the layout with id = ‘my-div’<\/strong> in the decorator and we can return either a graphic or an output element according to the feature of the function.<\/p>\n\n\n\n
      import dash\nimport dash_core_components as dcc\nimport dash_html_components as html\nfrom dash.dependencies import Input, Output\n\napp = dash.Dash(__name__)\n\napp.layout = html.Div([\n    dcc.Input(id='my-id', value='initial value', type='text'),\n    html.Div(id='my-div')\n])\n\n@app.callback(\n    Output(component_id='my-div', component_property='children'),\n    [Input(component_id='my-id', component_property='value')]\n)\ndef update_output_div(input_value):\n    return 'Girdi\u011finiz de\u011fer: \"{}\"'.format(input_value)\n\nif __name__ == '__main__':\n    app.run_server(debug=True)<\/pre>\n\n\n\n
      We made our layout interactive with the app.callback () decorator that we write the update_output_div ()<\/strong> above function. Since we entered 5, we get 5 as output.<\/p>\n\n\n\n
      • \"\"<\/figure><\/li><\/ul><\/figure>\n\n\n\n
        Let’s look at a more advanced callback application.<\/p>\n\n\n\n
        import dash\nimport dash_core_components as dcc\nimport dash_html_components as html\nfrom dash.dependencies import Input, Output\nimport pandas as pd\n\ndf = pd.read_csv('https:\/\/raw.githubusercontent.com\/plotly\/datasets\/master\/gapminderDataFiveYear.csv')\n\nexternal_stylesheets = ['https:\/\/codepen.io\/chriddyp\/pen\/bWLwgP.css']\n\napp = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n\napp.layout = html.Div([\n    dcc.Graph(id='graph-with-slider'),\n    dcc.Slider(\n        id='year-slider',\n        min=df['year'].min(),\n        max=df['year'].max(),\n        value=df['year'].min(),\n        marks={str(year): str(year) for year in df['year'].unique()},\n        step=None\n    )\n])\n\n@app.callback(\n    Output('graph-with-slider', 'figure'),\n    [Input('year-slider', 'value')])\ndef update_figure(selected_year):\n    filtered_df = df[df.year == selected_year]\n    traces = []\n    for i in filtered_df.continent.unique():\n        df_by_continent = filtered_df[filtered_df['continent'] == i]\n        traces.append(dict(\n            x=df_by_continent['gdpPercap'],\n            y=df_by_continent['lifeExp'],\n            text=df_by_continent['country'],\n            mode='markers',\n            opacity=0.7,\n            marker={\n                'size': 15,\n                'line': {'width': 0.5, 'color': 'white'}\n            },\n            name=i\n        ))\n\n    return {\n        'data': traces,\n        'layout': dict(\n            xaxis={'type': 'log', 'title': 'GDP Per Capita',\n                   'range':[2.3, 4.8]},\n            yaxis={'title': 'Life Expectancy', 'range': [20, 90]},\n            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},\n            legend={'x': 0, 'y': 1},\n            hovermode='closest',\n            transition = {'duration': 500},\n        )\n    }\n\n\nif __name__ == '__main__':\n    app.run_server(debug=True)<\/pre>\n\n\n\n
        We made graph interactive by adding a slider<\/strong> to our chart. We determine where the graph will be rendered by defining it with dcc.Graph (id = ‘graph-with-slider’)<\/strong> in the layout. Note that the Input is defined in square brackets.<\/p>\n\n\n\n
        The output of the application <\/p>\n\n\n\n
        • \"\"<\/figure><\/li><\/ul><\/figure>\n\n\n\n
          6. DASH DATATABLE<\/h3>\n\n\n\n
          Dash datatable is a component created for seeing the data together in the tables, providing sorting and interactivity. Below is the simplest dash datatable created with Dash.<\/p>\n\n\n\n
          import dash\nimport dash_table\nimport pandas as pd\n\ndf = pd.read_csv('https:\/\/raw.githubusercontent.com\/plotly\/datasets\/master\/solar.csv')\n\napp = dash.Dash(__name__)\n\napp.layout = dash_table.DataTable(\n    id='table',\n    columns=[{\"name\": i, \"id\": i} for i in df.columns],\n    data=df.to_dict('records'),\n)\n\nif __name__ == '__main__':\n    app.run_server(debug=True)<\/pre>\n\n\n\n
          We can see the table below as output.<\/p>\n\n\n\n
          • \"\"<\/figure><\/li><\/ul><\/figure>\n\n\n\n
            We can add a lot of features to this table by utilizing the documentation of DASH.<\/p>\n\n\n\n
            SOURCES<\/h4>\n\n\n\n
            1. https:\/\/medium.com\/plotly\/introducing-dash-5ecf7191b503<\/li>
            2. https:\/\/medium.com\/analytics-vidhya\/building-a-dashboard-app-using-plotlys-dash-a-complete-guide-from-beginner-to-pro-61e890bdc423<\/li>
            3. https:\/\/dash.plotly.com\/<\/li>
            4. https:\/\/hackersandslackers.com\/plotly-dash-with-flask\/<\/li>
            5. https:\/\/medium.com\/swlh\/dashboards-in-python-for-beginners-and-everyone-else-using-dash-f0a045a86644<\/li>
            6. https:\/\/levelup.gitconnected.com\/dashboards-in-python-for-beginners-using-dash-live-updates-and-streaming-data-into-a-dashboard-37660c1ba661<\/li>
            7. https:\/\/towardsdatascience.com\/how-to-build-a-complex-reporting-dashboard-using-dash-and-plotl-4f4257c18a7f<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"
              1. What is DASH? Dash is a Python framework developed for building web applications. However, it is more suitable for data visualization applications. Dash was developed based on Flask, Plotly.js, ve React.js libraries. Interactive tables, graphs and data visualizations can be easily developed with Dash without knowing javascript. With Python, people who perform data analysis, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"\nCreating Interactive Visualizations with Plotly's Dash Framework - blog website<\/title>\n<meta name=\"description\" content=\"Dash is a Python framework developed for building web applications. However, it is more suitable for data visualization applications. Dash was developed based on Flask, Plotly.js, ve React.js libraries. Interactive tables, graphs and data visualizations can be easily developed with Dash without knowing javascript. With Python, people who perform data analysis, data preparation, data visualization, modeling, device control and reporting can easily develop analytical web applications with dash\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Interactive Visualizations with Plotly's Dash Framework - blog website\" \/>\n<meta property=\"og:description\" content=\"Dash is a Python framework developed for building web applications. However, it is more suitable for data visualization applications. Dash was developed based on Flask, Plotly.js, ve React.js libraries. Interactive tables, graphs and data visualizations can be easily developed with Dash without knowing javascript. With Python, people who perform data analysis, data preparation, data visualization, modeling, device control and reporting can easily develop analytical web applications with dash\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-10T08:46:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-22T11:16:41+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/04\/dash1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/04\/dash1.jpg\",\"contentUrl\":\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/04\/dash1.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/\",\"name\":\"Creating Interactive Visualizations with Plotly's Dash Framework - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/#primaryimage\"},\"datePublished\":\"2020-04-10T08:46:39+00:00\",\"dateModified\":\"2020-11-22T11:16:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Dash is a Python framework developed for building web applications. However, it is more suitable for data visualization applications. Dash was developed based on Flask, Plotly.js, ve React.js libraries. Interactive tables, graphs and data visualizations can be easily developed with Dash without knowing javascript. With Python, people who perform data analysis, data preparation, data visualization, modeling, device control and reporting can easily develop analytical web applications with dash\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/04\/10\/creating-interactive-visualizations-with-plotlys-dash-framework\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Interactive Visualizations with Plotly’s Dash Framework\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/160"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":66,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"predecessor-version":[{"id":535,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/160\/revisions\/535"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}