Dash Plotly’ye Giriş

Veri görselleştirme, modern yazılım sistemlerinin vazgeçilmez bir parçasıdır. Özellikle veri analizi, machine learning, bioinformatics, finans ve operasyonel izleme sistemlerinde, verinin grafiksel olarak sunulması kritik önem taşır.

Python ekosisteminde dashboard geliştirmek için en güçlü araçlardan biri:

Dash (Plotly Dash)

Dash, tamamen Python ile, frontend bilgisi gerektirmeden, production-level web dashboard’ları geliştirmenizi sağlar.

Bu yazıda Dash’i:

• Temelden
• Modern yapı ile
• Gerçek kod örnekleri ile
• Backend developer perspektifiyle

öğreneceksiniz.

1. Dash Nedir?

Dash, Plotly tarafından geliştirilen, Python tabanlı bir web uygulaması framework’üdür.

Şu teknolojileri kullanır:

• Flask → Web server
• React.js → Frontend
• Plotly.js → Grafik motoru

Ama siz sadece Python yazarsınız.

Frontend yazmanız gerekmez.

Dash ile yapılabilecekler:

• Analytics dashboard
• Machine learning dashboard
• Bioinformatics veri görselleştirme
• Real-time monitoring
• Admin panel
• Internal tool
• KPI dashboard

2. Dash Mimarisi

Dash uygulaması 3 temel parçadan oluşur:

Dash App
│
├── Layout (UI)
│
├── Callback (logic)
│
└── Graph components

2.1 Layout → UI

HTML yapısıdır.

Örnek:

Başlık
Grafik
Dropdown
Button

2.2 Callback → Logic

Event handling sistemidir.

Örnek:

Dropdown değişti → Grafik güncellendi

2.3 Components

Hazır UI bileşenleri:

• Graph
• Dropdown
• Input
• Button
• Slider
• Table

3. Kurulum

Python 3.9+ önerilir.

Kurulum:

pip install dash plotly pandas

4. İlk Dash Uygulaması

Dosya oluştur:

app.py

Kod:

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1("My First Dash App"),
    html.P("Hello Dash!")
])

if __name__ == "__main__":
    app.run(debug=True)

Çalıştır:

python app.py

Tarayıcı:

http://127.0.0.1:8050

5. Plotly ile Grafik Oluşturma

Önce Plotly grafiği oluşturalım.

import plotly.express as px

df = px.data.iris()

fig = px.scatter(
    df,
    x="sepal_width",
    y="sepal_length",
    color="species"
)

Dash’e ekleyelim:

from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.iris()

fig = px.scatter(
    df,
    x="sepal_width",
    y="sepal_length",
    color="species"
)

app.layout = html.Div([
    html.H1("Iris Dataset"),
    dcc.Graph(figure=fig)
])

if __name__ == "__main__":
    app.run(debug=True)

6. Dash Core Components (dcc)

En önemli bileşenler:

dcc.Graph
dcc.Dropdown
dcc.Input
dcc.Slider
dcc.Interval

7. Dropdown ile Interactive Dashboard

Kod:

from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.gapminder()

app.layout = html.Div([
    html.H1("Population Dashboard"),

    dcc.Dropdown(
        id="year-dropdown",
        options=[
            {"label": str(year), "value": year}
            for year in df["year"].unique()
        ],
        value=2007
    ),

    dcc.Graph(id="graph")
])

if __name__ == "__main__":
    app.run(debug=True)

Henüz interaktif değil.

Callback ekleyeceğiz.

8. Callback Sistemi

Dash’in en önemli kısmı.

Import:

from dash import Input, Output

Callback:

@app.callback(
    Output("graph", "figure"),
    Input("year-dropdown", "value")
)
def update_graph(selected_year):

    filtered = df[df["year"] == selected_year]

    fig = px.scatter(
        filtered,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent"
    )

    return fig

Tam kod:

from dash import Dash, html, dcc, Input, Output
import plotly.express as px

app = Dash(__name__)

df = px.data.gapminder()

app.layout = html.Div([
    html.H1("Population Dashboard"),

    dcc.Dropdown(
        id="year-dropdown",
        options=[
            {"label": str(year), "value": year}
            for year in df["year"].unique()
        ],
        value=2007
    ),

    dcc.Graph(id="graph")
])

@app.callback(
    Output("graph", "figure"),
    Input("year-dropdown", "value")
)
def update_graph(selected_year):

    filtered = df[df["year"] == selected_year]

    fig = px.scatter(
        filtered,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent"
    )

    return fig

if __name__ == "__main__":
    app.run(debug=True)

Artık dashboard interaktif.

9. Multiple Components

Örnek:

Dropdown
Slider
Graph

10. Modern Project Structure (Production)

Önerilen yapı:

project/
│
├── app.py
├── layouts/
│   └── main_layout.py
│
├── callbacks/
│   └── graph_callbacks.py
│
├── data/
│   └── data_loader.py
│
└── requirements.txt

11. Flask Entegrasyonu

Dash aslında Flask kullanır.

Custom Flask server:

from flask import Flask
from dash import Dash

server = Flask(__name__)

app = Dash(__name__, server=server)

12. External Data Kaynağı Kullanma

CSV:

import pandas as pd

df = pd.read_csv("data.csv")

Database:

import psycopg2

API:

import requests

13. Real-Time Dashboard

Interval component:

dcc.Interval(
    id="interval",
    interval=5000
)

Callback:

@app.callback(
    Output("graph", "figure"),
    Input("interval", "n_intervals")
)
def update_live(n):
    return new_figure

14. Styling

CSS:

assets/style.css

Dash otomatik yükler.

15. Production Deployment

Gunicorn ile:

gunicorn app:server

Docker ile deploy edilir.

16. Dash vs Alternatifler

Tool	Language	Frontend required
Dash	Python	No
Streamlit	Python	No
React	JS	Yes
Grafana	Mixed	Limited

17. Dash Ne Zaman Kullanılır?

Kullan:

• Python heavy project varsa
• ML dashboard
• internal tool
• admin dashboard

Kullanma:

• public large scale frontend
• SEO site

18. Gerçek Production Örneği

Bioinformatics dashboard örneği:

Sample selector
Variant count graph
Quality metrics
Coverage chart

Dash bu tarz işler için idealdir.

19. En Önemli Kavramlar Özet

Dash öğrenirken kritik kavramlar:

• Layout
• Components
• Callback
• State
• Input
• Output
• Figure

20. Sonuç

Dash, Python ile modern, interaktif ve production-ready dashboard geliştirmenin en güçlü yollarından biridir.

Avantajları:

• frontend gerektirmez
• hızlı geliştirme
• güçlü grafik motoru
• production deploy mümkün

Özellikle veri yoğun backend sistemlerinde, Dash vazgeçilmez bir araçtır.

Bonus

Backend developer olarak şunu öneririm:

Dash’i şu use-case’lerde kullan:

• monitoring dashboard
• ML dashboard
• admin tools
• internal analytics

React yerine Dash kullanmak geliştirme süresini 5-10 kat azaltabilir.

Kaynakça

• https://infravis.se/python-dash-plotly/