Data Visualization dengan Python

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import numpy as np
import pandas as pd

np.random.seed(42)

# Membuat subplot 2x2
fig = make_subplots(
    rows=2, cols=2,
    subplot_titles=(
        'Tren Penjualan',
        'Distribusi Kategori',
        'Top 5 Produk',
        'Target vs Aktual'
    ),
    specs=[
        [{"type": "scatter"}, {"type": "pie"}],
        [{"type": "bar"}, {"type": "bar"}]
    ]
)

# Plot 1: Line chart (tren)
bulan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun']
penjualan = [45, 52, 48, 61, 55, 67]
fig.add_trace(
    go.Scatter(x=bulan, y=penjualan, mode='lines+markers',
               name='Penjualan', line=dict(color='#3498db')),
    row=1, col=1
)

# Plot 2: Pie chart (kategori)
kategori = ['Elektronik', 'Fashion', 'Makanan', 'Lainnya']
nilai = [35, 25, 22, 18]
fig.add_trace(
    go.Pie(labels=kategori, values=nilai,
           marker=dict(colors=['#3498db','#e74c3c','#2ecc71','#f1c40f'])),
    row=1, col=2
)

# Plot 3: Bar chart (top produk)
produk = ['Laptop', 'HP', 'Tablet', 'TV', 'Headset']
jml = [120, 95, 78, 65, 52]
fig.add_trace(
    go.Bar(x=produk, y=jml, name='Terjual',
           marker_color='#2ecc71'),
    row=2, col=1
)

# Plot 4: Target vs Aktual
target = [50, 55, 60, 65, 70, 75]
aktual = [45, 52, 58, 61, 68, 72]
fig.add_trace(
    go.Bar(x=bulan, y=target, name='Target',
           marker_color='#bdc3c7'),
    row=2, col=2
)
fig.add_trace(
    go.Bar(x=bulan, y=aktual, name='Aktual',
           marker_color='#e74c3c'),
    row=2, col=2
)

# Update layout
fig.update_layout(
    title_text='Dashboard Penjualan Q1-Q2 2026',
    template='plotly_dark',
    height=700,
    showlegend=True
)

fig.show()
# fig.write_html('dashboard.html')

# pip install dash

import dash
from dash import dcc, html
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('Dashboard Penjualan', style={'textAlign': 'center'}),

    # Dropdown filter
    html.Label('Pilih Periode:'),
    dcc.Dropdown(
        id='periode-dropdown',
        options=[
            {'label': 'Q1 2026', 'value': 'q1'},
            {'label': 'Q2 2026', 'value': 'q2'},
        ],
        value='q1'
    ),

    # Grafik
    dcc.Graph(id='grafik-penjualan'),

    # Statistik cards
    html.Div([
        html.Div([html.H3('Rp 500Jt'), html.P('Total Penjualan')],
                 className='stat-card'),
        html.Div([html.H3('1,250'), html.P('Total Transaksi')],
                 className='stat-card'),
        html.Div([html.H3('Rp 400K'), html.P('Rata-rata per Transaksi')],
                 className='stat-card'),
    ], style={'display': 'flex', 'gap': '20px'})
])

if __name__ == '__main__':
    app.run(debug=True)
    # Buka http://localhost:8050