Name: Orang 1
Birth: 01 Januari 2000
Skill: Skill bebas
Name: Orang 2
Birth: 02 Februari 2001
Skill: Skill bebas
Name: Orang 3
Birth: 03 Maret 2002
Skill: Skill bebas
Name: Orang 4
Birth: 04 April 2003
Skill: Skill bebas
Name: Orang 5
Birth: 05 Mei 2004
Skill:
Skill bebas
Intro to Statistics
Dengan statistika, informasi kompleks dapat disederhanakan sehingga lebih mudah dipahami dan digunakan dalam pengambilan keputusan.
Pemahaman jenis data sangat penting karena menentukan metode analisis statistik yang dapat digunakan.
Statistika banyak digunakan dalam bidang pendidikan, ekonomi, kesehatan, industri, dan penelitian ilmiah.
Data Exploration
Basic Visualizations
Central Tendency
Central tendency atau ukuran pemusatan data adalah konsep dasar dalam statistika deskriptif yang digunakan untuk menggambarkan nilai yang paling mewakili suatu kumpulan data.
Ukuran ini membantu menyederhanakan data kompleks menjadi satu nilai representatif, yaitu mean, median, dan modus.
Median adalah nilai tengah dari data yang telah diurutkan.
Modus adalah nilai yang paling sering muncul dalam data.
Mean merupakan rata-rata dari seluruh data.
Statistical Dispersion
Semakin besar nilai dispersi, semakin besar variasi data dalam suatu kumpulan observasi.
Setiap ukuran dispersi memberikan informasi yang berbeda tentang penyebaran data.
Analisis dispersi penting untuk menilai kestabilan dan keandalan suatu data.
Essentials of Probability
Probabilitas adalah cara sederhana untuk memahami ketidakpastian, yaitu dengan menghitung seberapa besar kemungkinan suatu kejadian terjadi. Dengan probabilitas, kita bisa melihat pola dalam data dan membuat keputusan yang lebih masuk akal berdasarkan data, bukan sekadar tebakan.
Konsep Fundamental:
• Sample space & events
•
Complement rule: P(A’) = 1 - P(A)
• 0 ≤ P(A) ≤ 1
Independent vs Dependent:
• Independent: kejadian tidak
saling mempengaruhi
• Dependent: kejadian saling mempengaruhi
Union & Binomial:
• Union: probabilitas minimal satu
kejadian terjadi
• Binomial: eksperimen dengan 2 hasil
(sukses/gagal)
Definisi Event
Event diambil dari variabel Kepuasan pada dataset food delivery yang ditampilkan pada chapter selanjutnya.
Peluang pengguna memiliki kepuasan tinggi menggunakan food delivery adalah 0.69 atau 69%.
Probability Distributions
Probability Distribution menjelaskan bagaimana peluang dari setiap kemungkinan nilai suatu variabel acak tersebar. Konsep ini membantu memahami ketidakpastian, memodelkan data acak, serta menjadi dasar analisis statistik inferensial seperti uji hipotesis dan interval kepercayaan.
Variabel diskrit adalah variabel acak yang hanya dapat mengambil nilai tertentu yang dapat dihitung. Setiap nilai memiliki peluang tersendiri yang dijelaskan menggunakan Probability Mass Function (PMF).
Variabel kontinu adalah variabel acak yang dapat mengambil nilai apa pun dalam suatu rentang. Probabilitasnya tidak dihitung pada satu titik, melainkan pada suatu interval menggunakan PDF.
Perbedaan variabel diskrit dan kontinu juga terlihat dari cara visualisasinya. Visualisasi membantu memahami pola dan sebaran data.
Central Limit Theorem (CLT) menyatakan bahwa distribusi sampling dari rata-rata akan mendekati distribusi normal ketika ukuran sampel cukup besar.
Confidence Interval
Statistical Inference
🔹 Generalisasi Sampel: Mengekstrapolasi temuan dari kelompok kecil (sampel) untuk memahami karakteristik kelompok besar (populasi) secara ilmiah
🔹 Estimasi & Pengujian: Menaksir parameter populasi melalui estimasi nilai serta menguji validitas teori melalui prosedur uji hipotesis
🔹 Kendali Ketidakpastian: Mengukur risiko kesalahan menggunakan margin of error dan interval kepercayaan guna menjamin objektivitas hasil di tengah keterbatasan dataNonparametric Methods
🔹 Fleksibilitas Distribusi: Tidak memerlukan asumsi bahwa data mengikuti distribusi peluang tertentu (seperti distribusi normal), sehingga sering disebut sebagai distribution-free tests
🔹 Ketangguhan (Robustness): Lebih konsisten dalam menangani data dengan varians yang heterogen atau ukuran sampel kecil yang sulit diverifikasi normalitasnya
🔹 Transformasi Data: Umumnya beroperasi dengan mengubah nilai observasi menjadi peringkat (ranks), sehingga hasil analisis tetap akurat meskipun terdapat nilai-nilai ekstremHasil visualisasi menunjukkan bahwa GrabFood merupakan platform food delivery yang paling sering digunakan oleh pengguna dibandingkan Gojek dan ShopeeFood . Hal ini menunjukkan adanya kecenderungan preferensi pengguna terhadap GrabFood, meskipun penggunaan ketiga platform masih relatif berimbang.
Perbedaan rata-rata waktu tunggu antar platform menunjukkan adanya variasi kecepatan layanan. Platform dengan waktu tunggu lebih singkat berpotensi memberikan pengalaman pengguna yang lebih baik. Namun, meskipun GrabFood memiliki rata-rata waktu tunggu paling lama, platform ini tetap paling sering digunakan. Hal ini menunjukkan bahwa waktu tunggu bukan satu-satunya faktor dalam pemilihan platform food delivery, dan preferensi pengguna kemungkinan dipengaruhi oleh faktor lain di luar kecepatan layanan.
Case Study Example
Case Study Example
Case Study Example
---
title: "UAS StatDas"
output:
flexdashboard::flex_dashboard:
vertical_layout: scroll
theme: yeti
source_code: embed
---
```{r setup, include=FALSE}
packages <- c(
"flexdashboard",
"tidyverse",
"highcharter",
"viridis",
"DT",
"gapminder",
"jsonlite"
)
installed <- packages %in% rownames(installed.packages())
if (any(!installed)) {
install.packages(packages[!installed])
}
# Load library
library(flexdashboard)
library(tidyverse)
library(highcharter)
library(viridis)
library(DT)
library(gapminder)
library(jsonlite)
```
Members {data-orientation=rows}
=======================================================================
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive ID Cards</title>
<style>
* { box-sizing: border-box; }
body {
overflow: hidden;
}
margin: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #ff5fa2, #ff9acb);
height: 100vh;
overflow: hidden; /* TIDAK BOLEH SCROLL */
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 95vw;
max-width: 1200px;
height: 90vh; /* paksa muat layar */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
padding: 16px;
}
.card {
background: #fff;
border-radius: 18px;
padding: 12px;
box-shadow: 0 12px 24px rgba(0,0,0,0.18);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 12px; /* global diperkecil */
}
.card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 25px 40px rgba(0,0,0,0.3);
}
.card-header {
text-align: center;
font-weight: 700;
color: #ff4f9a;
letter-spacing: 1px;
}
.photo {
width: 100%;
height: 110px; /* diperkecil biar muat */
border-radius: 12px;
background: #eee;
margin: 8px 0;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
font-size: 13px;
}
.info {
font-size: 13px;
line-height: 1.6;
}
.info b {
color: #ff4f9a;
}
.desc {
margin-top: 10px;
font-size: 12px;
color: #555;
background: #f9f9f9;
padding: 8px;
border-radius: 10px;
}
.edit-hint {
text-align: center;
font-size: 11px;
color: #999;
margin-top: 6px;
}
.container {
height: calc(100vh - 120px);
}
/* === FIX GRID TANPA MERUSAK KODINGAN LAIN === */
.container {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
height: calc(100vh - 140px);
}
.card {
max-width: 100%;
}
@media (max-height: 700px) {
.photo { height: 120px; }
}
</style>
</head>
<body>
<div class="container">
<!-- CARD 1 -->
<div class="card" contenteditable="true">
<div class="card-header">Hotness Pass</div>
<div class="photo">Foto</div>
<div class="info">
<b>Name:</b> Orang 1<br>
<b>Birth:</b> 01 Januari 2000<br>
<b>Skill:</b> Skill bebas
</div>
<div class="desc">Tulis deskripsi di sini (bebas kamu edit ✨)</div>
<div class="edit-hint">(klik & edit langsung)</div>
</div>
<!-- CARD 2 -->
<div class="card" contenteditable="true">
<div class="card-header">Hotness Pass</div>
<div class="photo">Foto</div>
<div class="info">
<b>Name:</b> Orang 2<br>
<b>Birth:</b> 02 Februari 2001<br>
<b>Skill:</b> Skill bebas
</div>
<div class="desc">Deskripsi bisa kamu ganti sendiri 💕</div>
<div class="edit-hint">(klik & edit langsung)</div>
</div>
<!-- CARD 3 -->
<div class="card" contenteditable="true">
<div class="card-header">Hotness Pass</div>
<div class="photo">Foto</div>
<div class="info">
<b>Name:</b> Orang 3<br>
<b>Birth:</b> 03 Maret 2002<br>
<b>Skill:</b> Skill bebas
</div>
<div class="desc">Isi deskripsi sesuka kamu 😆</div>
<div class="edit-hint">(klik & edit langsung)</div>
</div>
<!-- CARD 4 -->
<div class="card" contenteditable="true">
<div class="card-header">Hotness Pass</div>
<div class="photo">Foto</div>
<div class="info">
<b>Name:</b> Orang 4<br>
<b>Birth:</b> 04 April 2003<br>
<b>Skill:</b> Skill bebas
</div>
<div class="desc">Bisa buat bio, quote, dll ✨</div>
<div class="edit-hint">(klik & edit langsung)</div>
</div>
<!-- CARD 5 -->
<div class="card" contenteditable="true">
<div class="card-header">Hotness Pass</div>
<div class="photo">Foto</div>
<div class="info">
<b>Name:</b> Orang 5<br>
<b>Birth:</b> 05 Mei 2004<br>
<b>Skill:</b> Skill bebas
</div>
<div class="desc">Deskripsi terakhir 😎</div>
<div class="edit-hint">(klik & edit langsung)</div>
</div>
</div>
</body>
</html>
Summary of Basic Statistics {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=520}
-----------------------------------------------------------------------
### Chapter 1 {data-width=1200}
Intro to Statistics
<div style="display:flex; gap:16px; margin-top:10px;">
<div style="border-radius:16px; padding:18px; width:30%;
background:linear-gradient(135deg,#FFE3EC,#FFF1C1);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b>Pengertian Statistika</b></h4>
<ul>
<li>Statistika adalah cabang ilmu yang mempelajari metode pengumpulan, pengolahan, penyajian, analisis, dan interpretasi data.</li>
<li>Data yang dianalisis berasal dari hasil pengamatan, survei, atau eksperimen.</li>
<li>Statistika berperan penting dalam mengubah data mentah menjadi informasi yang bermakna.</li>
</ul>
<p style="font-size:12px;color:#555;">
Dengan statistika, informasi kompleks dapat disederhanakan sehingga lebih mudah dipahami dan digunakan dalam pengambilan keputusan.
</p>
</div>
<div style="border-radius:16px; padding:18px; width:30%;
background:linear-gradient(135deg,#D6F5FF,#D6FFD6);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b>Data dan Klasifikasinya</b></h4>
<ul>
<li>Data kualitatif menggambarkan kategori atau sifat suatu objek.</li>
<li>Data kuantitatif dinyatakan dalam bentuk angka dan dapat diukur.</li>
<li>Berdasarkan skala pengukuran, data dibedakan menjadi nominal, ordinal, interval, dan rasio.</li>
</ul>
<p style="font-size:12px;color:#555;">
Pemahaman jenis data sangat penting karena menentukan metode analisis statistik yang dapat digunakan.
</p>
</div>
<div style="border-radius:16px; padding:18px; width:30%;
background:linear-gradient(135deg,#E0C3FC,#8EC5FC);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b>Tujuan dan Manfaat Statistika</b></h4>
<ul>
<li>Menyajikan data dalam bentuk yang ringkas dan informatif.</li>
<li>Menganalisis data untuk menemukan pola dan kecenderungan.</li>
<li>Mendukung penarikan kesimpulan dan pengambilan keputusan yang rasional.</li>
</ul>
<p style="font-size:12px;color:#555;">
Statistika banyak digunakan dalam bidang pendidikan, ekonomi, kesehatan, industri, dan penelitian ilmiah.
</p>
</div>
</div>
### Chapter 2 {data-width=1200}
Data Exploration
### Chapter 3 {data-width=1200}
Basic Visualizations
<div style="display:flex; gap:16px; margin-top:10px;">
<div style="border-radius:16px; padding:16px; width:30%;
background:linear-gradient(135deg,#FFE3EC,#FFF1C1);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b> Histogram</b></h4>
<ul>
<li>Menampilkan distribusi data numerik</li>
<li>Melihat pola sebaran & skewness</li>
<li>Mengidentifikasi beberapa modus</li>
</ul>
</div>
<div style="border-radius:16px; padding:16px; width:30%;
background:linear-gradient(135deg,#D6F5FF,#D6FFD6);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4> <b>Boxplot</b></h4>
<ul>
<li>Membandingkan distribusi antar kelompok data</li>
<li>Mendeteksi outlier</li>
<li>Melihat sebaran antar kuartil, median & kemiringan data</li>
</ul>
</div>
<div style="border-radius:16px; padding:16px; width:30%;
background:linear-gradient(135deg,#E0C3FC,#8EC5FC);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4> <b>Scatter Plot</b></h4>
<ul>
<li>Menampilkan hubungan dua variabel</li>
<li>Mendeteksi tren/korelasi</li>
<li>Mendeteksi outlier</li>
</ul>
</div>
</div>
<style>
.preview-box {
display:flex;
gap:16px;
margin-top:15px;
}
.preview {
width:30%;
padding:14px;
border-radius:16px;
background:#ffffff;
box-shadow:0 10px 25px rgba(0,0,0,.1);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
.mini-plot {
height:60px;
background:#f7f7f7;
border-radius:8px;
display:flex;
align-items:flex-end;
gap:5px;
padding:6px;
}
.bar { width:10px; background:#ff7aa2; border-radius:3px; }
.dot { width:6px; height:6px; background:#6a5acd; border-radius:50%; }
</style>
<div class="preview-box">
<div class="preview">
<h4> <b>Histogram</b></h4>
<div style="
height:60px;
display:flex;
align-items:flex-end;
padding:6px;
background:#f7f7f7;
border-radius:8px;
">
<div style="width:14px;height:20px;background:#ff7aa2;"></div>
<div style="width:14px;height:35px;background:#2ecc71;"></div>
<div style="width:14px;height:55px;background:#ff7aa2;"></div>
<div style="width:14px;height:40px;background:#2ecc71;"></div>
<div style="width:14px;height:25px;background:#ff7aa2;"></div>
</div>
</div>
<div class="preview">
<h4> <b>Boxplot</b></h4>
<div class="mini-plot" style="justify-content:center;">
<div style="width:50px;height:30px;border:2px solid #2ecc71;position:relative;">
<div style="position:absolute;top:-10px;left:50%;width:2px;height:10px;background:#2ecc71;"></div>
<div style="position:absolute;bottom:-10px;left:50%;width:2px;height:10px;background:#2ecc71;"></div>
</div>
</div>
</div>
<div class="preview">
<h4> <b>Scatter Plot</b></h4>
<div class="mini-plot" style="flex-wrap:wrap;align-items:flex-start;">
<div class="dot"></div>
<div class="dot" style="margin-left:12px"></div>
<div class="dot" style="margin-left:24px"></div>
<div class="dot" style="margin-left:8px"></div>
<div class="dot" style="margin-left:12px"></div>
<div class="dot" style="margin-left:24px"></div>
<div class="dot" style="margin-left:8px"></div>
</div>
</div>
</div>
### Chapter 4 {data-width=1200}
Central Tendency
### Chapter 4 {data-width=1200}
```{=html}
<style>
.ct-wrap{ margin-top:18px; }
.ct-hero{
border-radius:18px;
padding:22px 26px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
background:linear-gradient(135deg,#FFE3EC,#FFF1C1);
}
.ct-hero h2{ margin:0 0 10px 0; font-weight:800; }
.ct-hero p{ margin:6px 0; font-size:14px; line-height:1.6; }
.ct-grid{
display:grid;
grid-template-columns: repeat(4, minmax(240px, 1fr));
gap:18px;
margin-top:18px;
}
.ct-box{
border-radius:16px;
padding:18px 18px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
min-height:210px;
}
.ct-box h3{ margin:0 0 10px 0; font-weight:800; }
.ct-box p{ margin:6px 0; font-size:13px; line-height:1.55; }
.ct-box ul{ margin:10px 0 0 18px; font-size:13px; line-height:1.6; }
@media (max-width: 1100px){
.ct-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 650px){
.ct-grid{ grid-template-columns: 1fr; }
}
</style>
<div class="ct-wrap">
<div class="ct-hero">
<h2>Central Tendency</h2>
<p>
<b>Central tendency</b> atau ukuran pemusatan data adalah konsep dasar dalam statistika deskriptif
yang digunakan untuk menggambarkan nilai yang paling mewakili suatu kumpulan data.
</p>
<p>
Ukuran ini membantu menyederhanakan data kompleks menjadi satu nilai representatif, yaitu
<b>mean</b>, <b>median</b>, dan <b>modus</b>.
</p>
</div>
<div class="ct-grid">
<div class="ct-box" style="background:linear-gradient(135deg,#E0F2FE,#F0F9FF);">
<h3>Median</h3>
<p>Median adalah nilai tengah dari data yang telah diurutkan.</p>
<ul>
<li>50% data di bawah dan 50% di atas median</li>
<li>Tidak sensitif terhadap outlier</li>
<li>Cocok untuk distribusi tidak simetris</li>
</ul>
</div>
<div class="ct-box" style="background:linear-gradient(135deg,#FFF7ED,#FDECC8);">
<h3>Modus</h3>
<p>Modus adalah nilai yang paling sering muncul dalam data.</p>
<ul>
<li>Dapat lebih dari satu modus</li>
<li>Cocok untuk data kategorikal</li>
<li>Menunjukkan nilai paling umum</li>
</ul>
</div>
<div class="ct-box" style="background:linear-gradient(135deg,#EDE9FE,#F5F3FF);">
<h3>Mean</h3>
<p>Mean merupakan rata-rata dari seluruh data.</p>
<ul>
<li>Menggunakan semua observasi</li>
<li>Mudah dihitung</li>
<li>Sensitif terhadap nilai ekstrem</li>
</ul>
</div>
<div class="ct-box" style="background:linear-gradient(135deg,#ECFEFF,#F0FDF4);">
<h3>Interpretasi</h3>
<ul>
<li>Mean > Median → miring ke kanan</li>
<li>Median lebih stabil dari mean</li>
<li>Modus menunjukkan nilai populer</li>
</ul>
</div>
</div>
</div>
```
### Chapter 5 {data-width=1200}
Statistical Dispersion
<div style="display:flex; gap:16px; margin-top:10px;">
<div style="border-radius:16px; padding:18px; width:30%;
background:linear-gradient(135deg,#FFE3EC,#FFF1C1);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b>Pengertian Statistical Dispersion</b></h4>
<ul>
<li>Statistical dispersion merupakan ukuran yang menunjukkan tingkat penyebaran data terhadap nilai pusatnya.</li>
<li>Dispersion menggambarkan sejauh mana data bervariasi atau menyebar.</li>
<li>Ukuran ini membantu memahami konsistensi atau keragaman suatu data.</li>
</ul>
<p style="font-size:12px;color:#555;">
Semakin besar nilai dispersi, semakin besar variasi data dalam suatu kumpulan observasi.
</p>
</div>
<div style="border-radius:16px; padding:18px; width:30%;
background:linear-gradient(135deg,#D6F5FF,#D6FFD6);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b>Ukuran Dispersi</b></h4>
<ul>
<li>Range menunjukkan selisih antara nilai maksimum dan minimum.</li>
<li>Varians mengukur rata-rata kuadrat selisih data terhadap mean.</li>
<li>Simpangan baku menunjukkan tingkat penyimpangan data dari mean.</li>
</ul>
<p style="font-size:12px;color:#555;">
Setiap ukuran dispersi memberikan informasi yang berbeda tentang penyebaran data.
</p>
</div>
<div style="border-radius:16px; padding:18px; width:30%;
background:linear-gradient(135deg,#E0C3FC,#8EC5FC);
box-shadow:0 10px 25px rgba(0,0,0,.08);">
<h4><b>Interpretasi Dispersi</b></h4>
<ul>
<li>Dispersi kecil menunjukkan data cenderung homogen.</li>
<li>Dispersi besar menunjukkan variasi data yang tinggi.</li>
<li>Digunakan untuk membandingkan sebaran antar kelompok data.</li>
</ul>
<p style="font-size:12px;color:#555;">
Analisis dispersi penting untuk menilai kestabilan dan keandalan suatu data.
</p>
</div>
</div>
### Chapter 6 {data-width=1200}
Essentials of Probability
<div class="prob-card" style="
width:100%;
padding:18px;
border-radius:16px;
background:linear-gradient(135deg,#A8EDEA,#FED6E3);
margin-bottom:16px;
">
<h4><b>Essentials of Probability</b></h4>
<p style="font-size:14px;line-height:1.6;margin:8px 0;">
Probabilitas adalah cara sederhana untuk memahami ketidakpastian, yaitu dengan menghitung seberapa besar kemungkinan suatu kejadian terjadi. Dengan probabilitas, kita bisa melihat pola dalam data dan membuat keputusan yang lebih masuk akal berdasarkan data, bukan sekadar tebakan.
</p>
<div style="display:flex;gap:12px;margin-top:10px;">
<div style="flex:1;background:#ffffffaa;padding:8px;border-radius:8px;font-size:13px;">
<b>Konsep Fundamental:</b><br>
• Sample space & events<br>
• Complement rule: P(A') = 1 - P(A)<br>
• 0 ≤ P(A) ≤ 1
</div>
<div style="flex:1;background:#ffffffaa;padding:8px;border-radius:8px;font-size:13px;">
<b>Independent vs Dependent:</b><br>
• Independent: kejadian tidak saling mempengaruhi<br>
• Dependent: kejadian saling mempengaruhi
</div>
<div style="flex:1;background:#ffffffaa;padding:8px;border-radius:8px;font-size:13px;">
<b>Union & Binomial:</b><br>
• Union: probabilitas minimal satu kejadian terjadi<br>
• Binomial: eksperimen dengan 2 hasil (sukses/gagal)
</div>
</div>
</div>
<div style="display:flex; gap:16px; margin-top:10px;">
<div class="prob-card" style="
width:30%;
padding:14px;
border-radius:16px;
background:linear-gradient(135deg,#E3FDFD,#CBF1F5);
">
<h4> <b>Contoh Event</b></h4>
<span class="event-tag">Definisi Event</span>
<ul>
<li>Pengguna memiliki <b>kepuasan tinggi</b></li>
<li>Kriteria: Kepuasan ≥ 4</li>
<li>Event terjadi jika pengguna merasa puas terhadap layanan</li>
</ul>
<p style="font-size:12px;color:#555;">
Event diambil dari variabel <i>Kepuasan</i> pada dataset food delivery yang ditampilkan pada chapter selanjutnya.
</p>
</div>
<div class="prob-card" style="
width:30%;
padding:14px;
border-radius:16px;
background:linear-gradient(135deg,#FFF6E5,#FFE3B3);
">
<h4> <b>Peluang</b></h4>
<ul>
<li>Total observasi (n) = 100</li>
<li>Jumlah kejadian : 69 pengguna</li>
<li>\( P(A) = \frac{69}{100} \)</li>
<li><b>\( P(A) = 0.69 \)</b></li>
</ul>
<p style="font-size:12px;color:#555;">
Peluang pengguna memiliki kepuasan tinggi menggunakan food delivery adalah 0.69 atau 69%.
</p>
</div>
<div class="prob-card" style="
width:30%;
padding:14px;
border-radius:16px;
background:linear-gradient(135deg,#E0C3FC,#8EC5FC);
">
<h4> <b>Interpretasi</b></h4>
<ul>
<li><b>69%</b> pengguna memiliki kepuasan tinggi</li>
<li>Mayoritas pengguna merasa puas</li>
<li>Kualitas layanan cenderung positif</li>
</ul>
</div>
</div>
### Chapter 7 {data-width=1200}
Probability Distributions
<style>
.box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin-top: 20px;
}
.box {
padding: 18px;
border-radius: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
background: #f8f9fa;
}
.box h4 {
margin-top: 0;
font-weight: 700;
}
.intro { background: linear-gradient(135deg, #c8f1f4, #f7d6e6); }
.diskrit { background: #e8f7ff; }
.kontinu { background: #fff2d8; }
.visual { background: #ede9fe; }
.clt { background: #e7f8ef; }
</style>
<div class="box intro">
<h4>Introduction</h4>
<p>
Probability Distribution menjelaskan bagaimana peluang dari setiap
kemungkinan nilai suatu variabel acak tersebar. Konsep ini membantu
memahami ketidakpastian, memodelkan data acak, serta menjadi dasar
analisis statistik inferensial seperti uji hipotesis dan interval
kepercayaan.
</p>
</div>
<div class="box-container">
<div class="box diskrit">
<h4>Discrete Variables</h4>
<p>
Variabel diskrit adalah variabel acak yang hanya dapat mengambil
nilai tertentu yang dapat dihitung. Setiap nilai memiliki peluang
tersendiri yang dijelaskan menggunakan Probability Mass Function (PMF).
</p>
<ul>
<li>Nilai terhitung (countable)</li>
<li>Menggunakan PMF</li>
<li>∑p(x) = 1</li>
<li>Contoh: dadu, nilai ujian, jumlah anak</li>
</ul>
</div>
<div class="box kontinu">
<h4>Continuous Variables</h4>
<p>
Variabel kontinu adalah variabel acak yang dapat mengambil nilai
apa pun dalam suatu rentang. Probabilitasnya tidak dihitung pada
satu titik, melainkan pada suatu interval menggunakan PDF.
</p>
<ul>
<li>Nilai dalam suatu rentang</li>
<li>Menggunakan PDF</li>
<li>P(X = x) = 0</li>
<li>Contoh: tinggi, berat, suhu</li>
</ul>
</div>
<div class="box visual">
<h4>Representasi Visual</h4>
<p>
Perbedaan variabel diskrit dan kontinu juga terlihat dari cara
visualisasinya. Visualisasi membantu memahami pola dan sebaran data.
</p>
<ul>
<li>Diskrit → Bar Chart</li>
<li>Kontinu → Histogram</li>
<li>Kontinu tidak ada jarak batang</li>
</ul>
</div>
<div class="box clt">
<h4>Central Limit Theorem</h4>
<p>
Central Limit Theorem (CLT) menyatakan bahwa distribusi sampling
dari rata-rata akan mendekati distribusi normal ketika ukuran
sampel cukup besar.
</p>
<ul>
<li>n ≥ 30 → distribusi sampling normal</li>
<li>Berlaku meski populasi tidak normal</li>
<li>Presisi meningkat saat n besar</li>
</ul>
</div>
</div>
### Chapter 8 {data-width=1200}
Confidence Interval
### Chapter 9 {data-width=1200}
Statistical Inference
```{r, echo=FALSE}
cat("
🔹 Generalisasi Sampel: Mengekstrapolasi temuan dari kelompok kecil (sampel) untuk memahami karakteristik kelompok besar (populasi) secara ilmiah
🔹 Estimasi & Pengujian: Menaksir parameter populasi melalui estimasi nilai serta menguji validitas teori melalui prosedur uji hipotesis
🔹 Kendali Ketidakpastian: Mengukur risiko kesalahan menggunakan margin of error dan interval kepercayaan guna menjamin objektivitas hasil di tengah keterbatasan data
")
```
### Chapter 10 {data-width=1200}
Nonparametric Methods
```{r, echo=FALSE}
cat("
🔹 Fleksibilitas Distribusi: Tidak memerlukan asumsi bahwa data mengikuti distribusi peluang tertentu (seperti distribusi normal), sehingga sering disebut sebagai distribution-free tests
🔹 Ketangguhan (Robustness): Lebih konsisten dalam menangani data dengan varians yang heterogen atau ukuran sampel kecil yang sulit diverifikasi normalitasnya
🔹 Transformasi Data: Umumnya beroperasi dengan mengubah nilai observasi menjadi peringkat (ranks), sehingga hasil analisis tetap akurat meskipun terdapat nilai-nilai ekstrem
")
```
Dataset {data-orientation=rows}
=======================================================================
### Table {data-height=520}
```{r}
library(readr)
library(dplyr)
library(DT)
df <- read_csv(
"C:/Users/user/OneDrive/Desktop/UAS SATDAS CHELSEA/food_delivery_behavior.csv",
show_col_types = FALSE
)
```
```{r}
# This is going to be a datatable
df1 <- df %>%
arrange(desc(Pengeluaran)) %>%
select(
ID, Gender, Platform, Hari, Bulan,
Frekuensi_Order, Pengeluaran, Waktu_Tunggu, Kepuasan
)
datatable(
df1,
options = list(
scrollX = TRUE,
pageLength = 10,
dom = 'Bfrtip'
),
caption = htmltools::tags$caption(
style = 'caption-side: bottom; text-align: center;',
'Table: ',
htmltools::em('Dataset Pengguna Layanan Pesan Antar Makanan Diurutkan berdasarkan Pengeluaran')
)
) %>%
formatStyle(
columns = 1:9,
fontSize = '16px',
lineHeight = '24px'
)
```
All About Basic Visualizations {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=520}
-----------------------------------------------------------------------
### Pie-Chart {data-width=600 data-height=510}
<style>
.vis-layout {
display: flex;
gap: 24px;
align-items: flex-start;
margin-top: 20px;
}
.vis-left {
width: 60%;
}
.vis-right {
width: 40%;
padding: 16px;
border-radius: 18px;
background: linear-gradient(135deg, #FFE259, #FFA751);
box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.plotly.html-widget {
margin: 0 !important;
}
</style>
```{r}
library(plotly)
library(dplyr)
library(readr)
library(htmltools)
df <- read_csv(
"C:/Users/user/OneDrive/Desktop/UAS SATDAS CHELSEA/food_delivery_behavior.csv",
show_col_types = FALSE
)
platform_count <- df %>% count(Platform)
pie_plot <- plot_ly(
platform_count,
labels = ~Platform,
values = ~n,
type = "pie",
textinfo = "label+percent",
hoverinfo = "label+value+percent",
marker = list(
colors = c("#FF005D", "#00F5D4", "#FFD60A"),
line = list(color = "white", width = 2)
)
) %>%
layout(
showlegend = FALSE,
title = list(
text = "Platform Food Delivery Paling Sering Digunakan",
x = 0
)
)
div(
class = "vis-layout",
div(class = "vis-left", pie_plot),
div(
class = "vis-right",
h4 (strong("Interpretasi")),
p(
"Hasil visualisasi menunjukkan bahwa ",
strong("GrabFood"),
" merupakan platform food delivery yang paling sering digunakan oleh pengguna dibandingkan ",
strong("Gojek"),
" dan ",
strong("ShopeeFood"),
". Hal ini menunjukkan adanya kecenderungan preferensi pengguna terhadap GrabFood, meskipun penggunaan ketiga platform masih relatif berimbang."
)
)
)
```
### Bar-Chart {data-width=600 data-height=510}
```{r}
library(plotly)
library(dplyr)
library(readr)
library(htmltools)
df <- read_csv(
"C:/Users/user/OneDrive/Desktop/UAS SATDAS CHELSEA/food_delivery_behavior.csv",
show_col_types = FALSE
)
# Rata-rata Waktu Tunggu per Platform
avg_wait <- df %>%
group_by(Platform) %>%
summarise(Rata_Waktu_Tunggu = mean(Waktu_Tunggu))
bar_wait <- plot_ly(
data = avg_wait,
x = ~Platform,
y = ~Rata_Waktu_Tunggu,
type = "bar",
text = ~round(Rata_Waktu_Tunggu, 1),
textposition = "outside",
marker = list(
color = c("#8338EC", "#3A86FF", "#FFBE0B"),
line = list(color = "white", width = 1)
)
) %>%
layout(
title = list(
text = "Rata-rata Waktu Tunggu per Platform",
x = 0
),
xaxis = list(title = "Platform"),
yaxis = list(title = "Rata-rata Waktu Tunggu (menit)"),
showlegend = FALSE
)
div(
class = "vis-layout",
div(class = "vis-left", bar_wait),
div(
class = "vis-right",
h4(strong("Interpretasi")),
p(
"Perbedaan rata-rata waktu tunggu antar platform menunjukkan adanya variasi kecepatan layanan. Platform dengan waktu tunggu lebih singkat berpotensi memberikan pengalaman pengguna yang lebih baik. Namun, meskipun GrabFood memiliki rata-rata waktu tunggu paling lama, platform ini tetap paling sering digunakan. Hal ini menunjukkan bahwa waktu tunggu bukan satu-satunya faktor dalam pemilihan platform food delivery, dan preferensi pengguna kemungkinan dipengaruhi oleh faktor lain di luar kecepatan layanan."
)
)
)
```
### Line-Chart {data-width=600 data-height=510}
```{r}
```
### Central_Tendency
```{r}
```
### Statistical Dispersion
```{r}
```
### Probability Distributions
```{r}
```
Confidence Interval {data-orientation=rows}
=======================================================================
Case Study Example
<style>
body, html {
overflow: hidden !important;
height: 100vh;
}
.chart-wrapper {
height: calc(100vh - 80px) !important;
overflow: hidden !important;
padding-top: 10px;
}
.ci-box {
background: linear-gradient(135deg, #F3F9FF, #FFFFFF);
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
height: 100%;
overflow: hidden;
}
.ci-title {
font-size: 11px;
font-weight: bold;
color: #0D47A1;
margin-bottom: 3px;
}
.ci-desc {
font-size: 10px;
color: #555;
margin-bottom: 6px;
}
.stat-card {
background: white;
border-left: 3px solid;
border-radius: 6px;
padding: 5px 7px;
margin-bottom: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: all 0.2s;
}
.stat-card:hover {
transform: translateX(3px);
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.badge {
display: inline-block;
background: #1976D2;
color: white;
padding: 2px 7px;
border-radius: 8px;
font-size: 9px;
margin-bottom: 4px;
font-weight: 600;
}
.insight-box {
background: linear-gradient(135deg, #FFF3E0, #FFFFFF);
border-left: 3px solid #FF9800;
padding: 6px 8px;
border-radius: 6px;
font-size: 9px;
margin-top: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
table.dataTable {
font-size: 10px !important;
}
table.dataTable thead th {
padding: 4px !important;
font-size: 10px !important;
}
table.dataTable tbody td {
padding: 4px !important;
}
.dataTables_wrapper {
padding: 0 !important;
}
.section-divider {
border-top: 1px solid #e0e0e0;
margin: 8px 0;
}
</style>
Row {data-height=100}
-----------------------------------------------------------------------
### Teori & Tabel CI {data-width=300}
```{r}
library(dplyr)
library(readr)
library(DT)
library(htmltools)
df <- read_csv(
"C:/Users/user/OneDrive/Desktop/UAS SATDAS CHELSEA/food_delivery_behavior.csv",
show_col_types = FALSE
)
stat <- df %>%
group_by(Platform) %>%
summarise(
Mean = round(mean(Kepuasan), 2),
SD = round(sd(Kepuasan), 2),
N = n()
)
ci_stat <- df %>%
group_by(Platform) %>%
summarise(
mean = mean(Kepuasan),
sd = sd(Kepuasan),
n = n(),
se = sd / sqrt(n),
tval = qt(0.975, df = n - 1),
LCL = round(mean - tval * se, 2),
UCL = round(mean + tval * se, 2),
Mean = round(mean, 2)
) %>%
select(Platform, Mean, LCL, UCL)
colors <- c("GrabFood" = "#EF476F", "Gojek" = "#06D6A0", "ShopeeFood" = "#FFD166")
div(
style = "height: 100%; display: flex; flex-direction: column; padding: 4px;",
# header teori
div(class = "badge", "Dasar Perhitungan CI"),
# teori
div(
style = "flex: 0 0 auto; margin-bottom: 8px;",
tags$ul(
style = "padding-left: 14px; margin: 0; font-size: 11px; line-height: 1.6;",
tags$li(HTML("<b>x̄</b> = Mean Kepuasan")),
tags$li(tags$b("s"), " = Standar deviasi"),
tags$li(tags$b("n"), " = Jumlah data"),
tags$li("σ populasi tidak diketahui"),
tags$li(tags$b("Metode:"), " CI Mean (t-test)")
)
),
# kotak statistik
div(
style = "flex: 0 0 auto; margin-bottom: 8px;",
lapply(1:nrow(stat), function(i) {
s <- stat[i,]
div(
class = "stat-card",
style = sprintf("border-left-color: %s;", colors[s$Platform]),
div(
style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;",
tags$b(style = sprintf("color: %s; font-size: 11px;", colors[s$Platform]), s$Platform),
tags$span(style = "background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 9px;",
sprintf("n=%d", s$N))
),
div(
style = "font-size: 10px; color: #666;",
sprintf("x̄: %.2f | SD: %.2f", s$Mean, s$SD)
)
)
})
),
div(class = "section-divider"),
# header tabel CI
div(class = "badge", style = "background: #4CAF50;", "Interval Kepercayaan 95%"),
# tabel CI
div(
style = "flex: 1; min-height: 0;",
div(class = "ci-desc", "Estimasi rata-rata kepuasan (α = 0.05)"),
datatable(
ci_stat,
rownames = FALSE,
options = list(
dom = 't',
ordering = FALSE,
pageLength = 10,
scrollY = FALSE,
paging = FALSE,
columnDefs = list(
list(className = 'dt-center', targets = 1:3)
)
),
class = 'cell-border compact'
) %>%
formatStyle(
'Platform',
target = 'row',
backgroundColor = styleEqual(
c('GrabFood', 'Gojek', 'ShopeeFood'),
c('#FFF5F7', '#F0FDF9', '#FFFBEB')
)
)
)
)
```
### Visualisasi & Interpretasi {data-width=700}
```{r}
library(plotly)
ci_stat_plot <- df %>%
group_by(Platform) %>%
summarise(
mean = mean(Kepuasan),
sd = sd(Kepuasan),
n = n(),
se = sd / sqrt(n),
tval = qt(0.975, df = n - 1),
LCL = mean - tval * se,
UCL = mean + tval * se
)
div(
style = "height: 100%; display: flex; flex-direction: column; padding: 4px;",
# plot
div(
style = "flex: 1; min-height: 0;",
{
plot_ci <- plot_ly(showlegend = FALSE)
for (p in unique(ci_stat_plot$Platform)) {
d <- ci_stat_plot %>% filter(Platform == p)
plot_ci <- plot_ci %>%
add_segments(
x = p, xend = p,
y = d$LCL, yend = d$UCL,
line = list(color = colors[p], width = 7),
hoverinfo = "text",
text = paste0(
"<b>", p, "</b><br>",
"Mean: ", round(d$mean, 2), "<br>",
"95% CI: [", round(d$LCL, 2), ", ", round(d$UCL, 2), "]"
)
) %>%
add_markers(
x = p,
y = d$mean,
marker = list(size = 13, color = colors[p],
line = list(color = 'white', width = 2)),
hoverinfo = "skip"
)
}
plot_ci %>%
layout(
title = list(text = "95% Confidence Interval Kepuasan per Platform", font = list(size = 13)),
xaxis = list(title = "", tickfont = list(size = 10)),
yaxis = list(title = "Skor Kepuasan", titlefont = list(size = 10), tickfont = list(size = 9)),
margin = list(l = 50, r = 20, t = 40, b = 30),
plot_bgcolor = '#fafafa',
paper_bgcolor = 'white'
) %>%
config(displayModeBar = FALSE)
}
),
# interpretasi
div(
style = "flex: 0 0 auto; margin-top: 8px;",
div(class = "badge", style = "background: #FF9800;", "Interpretasi Hasil"),
div(
class = "insight-box",
tags$ul(
style = "margin: 0; padding-left: 14px; font-size: 13px; line-height: 1.8;",
tags$li("Titik pada setiap garis menunjukkan nilai rata-rata sampel"),
tags$li("Panjang garis merepresentasikan rentang confidence interval 95%"),
tags$li("Pada tingkat kepercayaan 95%, rata-rata kepuasan pengguna tiap platform food delivery berada dalam rentang confidence interval yang relatif stabil, sehingga estimasi kepuasan dapat dianggap cukup andal untuk evaluasi kualitas layanan")
)
)
)
)
```
Statistical Inference {data-orientation=rows}
=======================================================================
Case Study Example
<style>
body, html { height: 100vh; overflow: hidden !important; } /* no scroll sesuai ketentuan */
.ci-box{
height: 100%;
overflow: visible !important; /* penting: jangan hidden supaya baris terakhir DT gak kepotong */
min-height: 0;
padding: 6px !important;
}
.section-divider{ margin: 4px 0 !important; }
.dataTables_wrapper{ padding: 0 !important; margin: 0 !important; }
table.dataTable{ margin: 0 !important; }
.badge{ margin-bottom: 2px !important; }
.stat-card{ margin-bottom: 2px !important; padding: 4px 6px !important; }
</style>
Row {data-height=100}
-----------------------------------------------------------------------
### Teori, Statistik, & Tabel Uji (Statistical Inference)
```{r}
library(dplyr)
library(readr)
library(DT)
library(htmltools)
library(broom)
df <- read_csv(
"C:/Users/user/OneDrive/Desktop/UAS SATDAS CHELSEA/food_delivery_behavior.csv",
show_col_types = FALSE
)
df$Gender <- as.factor(df$Gender)
df$Platform <- as.factor(df$Platform)
alpha <- 0.05
tt <- t.test(Kepuasan ~ Gender, data = df) %>% tidy()
tt_tbl <- tt %>%
transmute(
Uji = "t-test (Kepuasan ~ Gender)",
Statistik = round(statistic, 3),
df = as.character(round(parameter, 1)),
p_value = signif(p.value, 3),
Mean_Diff = round(estimate1 - estimate2, 3)
)
# INI YANG KURANG: bikin model ANOVA dulu
aov_mod <- aov(Pengeluaran ~ Platform, data = df)
aov_tbl <- tidy(aov_mod) %>%
filter(term == "Platform") %>%
transmute(
Uji = "ANOVA (Pengeluaran ~ Platform)",
Statistik = round(statistic, 3),
df = paste(df, collapse = ", "),
p_value = signif(p.value, 3)
)
mean_pengeluaran <- df %>%
group_by(Platform) %>%
summarise(
Mean = round(mean(Pengeluaran, na.rm = TRUE), 2),
n = n(),
.groups = "drop"
)
cor1 <- cor.test(df$Waktu_Tunggu, df$Kepuasan, method = "pearson") %>% tidy()
cor2 <- cor.test(df$Frekuensi_Order, df$Pengeluaran, method = "pearson") %>% tidy()
cor_tbl <- bind_rows(
cor1 %>%
transmute(
Uji = "Korelasi (Waktu_Tunggu vs Kepuasan)",
r = round(estimate, 3),
p_value = signif(p.value, 3)
),
cor2 %>%
transmute(
Uji = "Korelasi (Frekuensi_Order vs Pengeluaran)",
r = round(estimate, 3),
p_value = signif(p.value, 3)
)
)
summary_tbl <- bind_rows(
tt_tbl %>% select(Uji, Statistik, df, p_value),
aov_tbl %>% select(Uji, Statistik, df, p_value)
)
div(
style = "height: 100%; display:flex; flex-direction:column; padding:4px;",
div(class = "badge", "Dasar Uji Hipotesis (α = 0.05)"),
div(
style = "margin-bottom:8px;",
tags$ul(
style = "padding-left:14px; font-size:11px; line-height:1.6;",
tags$li(tags$b("t-test:"), " numerik vs 2 kelompok (Kepuasan ~ Gender)"),
tags$li(tags$b("ANOVA:"), " numerik vs >2 kelompok (Pengeluaran ~ Platform)"),
tags$li(tags$b("Korelasi Pearson:"), " hubungan antar numerik"),
tags$li("Keputusan berdasarkan p-value dibanding α")
)
),
div(
class = "stat-card",
style = "border-left-color:#1976D2;",
tags$b("a) t-test"),
div(style = "font-size:10px;", "Numerik: Kepuasan | Kategorik: Gender")
),
div(
class = "stat-card",
style = "border-left-color:#4CAF50;",
tags$b("b) ANOVA"),
div(style = "font-size:10px;", "Numerik: Pengeluaran | Kategorik: Platform")
),
div(
class = "stat-card",
style = "border-left-color:#FF9800;",
tags$b("c) Korelasi"),
div(style = "font-size:10px;", "Waktu_Tunggu~Kepuasan | Frekuensi_Order~Pengeluaran")
),
div(class = "section-divider"),
div(class = "badge", style = "background:#4CAF50;", "Ringkasan Output Uji (p-value)"),
datatable(
summary_tbl,
rownames = FALSE,
options = list(dom = "t", paging = FALSE),
class = "compact cell-border"
),
div(class = "section-divider"),
div(class = "badge", style = "background:#FF9800;", "Ringkasan Korelasi (r & p-value)"),
datatable(
cor_tbl,
rownames = FALSE,
options = list(dom = "t", paging = FALSE),
class = "compact cell-border"
)
)
```
### Visualisasi & Interpretasi (Uji & Korelasi)
```{r}
library(plotly)
p1 <- plot_ly(
df,
x = ~Waktu_Tunggu,
y = ~Kepuasan,
type = "scatter",
mode = "markers"
) %>%
layout(
title = list(text = "Scatter: Waktu_Tunggu vs Kepuasan", font = list(size = 13)),
xaxis = list(title = "Waktu_Tunggu", tickfont = list(size = 10)),
yaxis = list(title = "Kepuasan", tickfont = list(size = 10)),
margin = list(t = 40, b = 30, l = 50, r = 20)
) %>%
config(displayModeBar = FALSE)
p2 <- plot_ly(
df,
x = ~Frekuensi_Order,
y = ~Pengeluaran,
type = "scatter",
mode = "markers"
) %>%
layout(
title = list(text = "Scatter: Frekuensi_Order vs Pengeluaran", font = list(size = 13)),
xaxis = list(title = "Frekuensi_Order", tickfont = list(size = 10)),
yaxis = list(title = "Pengeluaran", tickfont = list(size = 10)),
margin = list(t = 40, b = 30, l = 50, r = 20)
) %>%
config(displayModeBar = FALSE)
div(
style = "height: 100%; display:flex; flex-direction:column; padding:4px; min-height:0;",
# area plot (ambil ruang sisa)
div(
style = "flex: 1 1 auto; display:flex; gap:10px; min-height:0;",
div(style = "flex:1 1 0; min-height:0;", p1),
div(style = "flex:1 1 0; min-height:0;", p2)
),
# area interpretasi (auto tinggi, kalau kepanjangan dia bisa wrap)
div(
style = "flex: 0 0 auto; margin-top:10px;",
div(class = "badge", style = "background:#FF9800;", "Interpretasi Hasil (Template UAS)"),
div(
class = "insight-box",
style = "max-height: 180px; overflow:auto;", # opsional: kalau mau selalu rapi & bisa scroll
tags$ul(
style = "margin:0; padding-left:14px; font-size:13px; line-height:1.6;",
tags$li("Jika p-value < 0.05 → tolak H0 (signifikan)"),
tags$li("t-test: bandingkan rata-rata Kepuasan antar Gender"),
tags$li("ANOVA: cek perbedaan rata-rata Pengeluaran antar Platform"),
tags$li("Korelasi: lihat arah r (positif/negatif) & signifikansi p-value")
)
)
)
)
```
Nonparametric Methods {data-orientation=rows}
=======================================================================
Case Study Example
<style>
body, html {
overflow: hidden !important;
height: 100vh;
}
.chart-wrapper {
height: calc(100vh - 80px) !important;
overflow: hidden !important;
padding-top: 10px;
}
.ci-box {
background: linear-gradient(135deg, #F3F9FF, #FFFFFF);
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
height: 100%;
overflow: hidden;
}
.ci-title {
font-size: 11px;
font-weight: bold;
color: #0D47A1;
margin-bottom: 3px;
}
.ci-desc {
font-size: 10px;
color: #555;
margin-bottom: 6px;
}
.stat-card {
background: white;
border-left: 3px solid;
border-radius: 6px;
padding: 5px 7px;
margin-bottom: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: all 0.2s;
}
.stat-card:hover {
transform: translateX(3px);
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.badge {
display: inline-block;
background: #1976D2;
color: white;
padding: 2px 7px;
border-radius: 8px;
font-size: 9px;
margin-bottom: 4px;
font-weight: 600;
}
.insight-box {
background: linear-gradient(135deg, #FFF3E0, #FFFFFF);
border-left: 3px solid #FF9800;
padding: 6px 8px;
border-radius: 6px;
font-size: 9px;
margin-top: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
table.dataTable {
font-size: 10px !important;
}
table.dataTable thead th {
padding: 4px !important;
font-size: 10px !important;
}
table.dataTable tbody td {
padding: 4px !important;
}
.dataTables_wrapper {
padding: 0 !important;
}
.section-divider {
border-top: 1px solid #e0e0e0;
margin: 8px 0;
}
</style>
Row {data-height=100}
-----------------------------------------------------------------------
### Teori, Statistik, & Tabel CI (Nonparametrik)
```{r}
library(dplyr)
library(readr)
library(DT)
library(htmltools)
library(boot)
# Load data
df <- read_csv(
"C:/Users/user/OneDrive/Desktop/UAS SATDAS CHELSEA/food_delivery_behavior.csv",
show_col_types = FALSE
)
# Fungsi bootstrap untuk median
boot_median <- function(data, index) {
median(data[index])
}
set.seed(123)
# Perhitungan CI bootstrap
ci_stat <- df %>%
group_by(Platform) %>%
summarise(
boot_obj = list(boot(Kepuasan, boot_median, R = 1000)),
Median = round(median(Kepuasan), 2),
LCL = round(boot.ci(boot_obj[[1]], type = "perc")$percent[4], 2),
UCL = round(boot.ci(boot_obj[[1]], type = "perc")$percent[5], 2),
N = n()
) %>%
select(Platform, Median, LCL, UCL, N)
# Warna platform
colors <- c(
"GrabFood" = "#EF476F",
"Gojek" = "#06D6A0",
"ShopeeFood" = "#FFD166"
)
# Tampilan UI
div(
style = "height: 100%; display: flex; flex-direction: column; padding: 4px;",
div(class = "badge", "Dasar Metode Nonparametrik"),
div(
style = "margin-bottom: 8px;",
tags$ul(
style = "padding-left: 14px; font-size: 11px; line-height: 1.6;",
tags$li(tags$b("Statistik pusat:"), " Median"),
tags$li("Data kepuasan berskala ordinal"),
tags$li("Distribusi tidak diasumsikan normal"),
tags$li(tags$b("Metode CI:"), " Bootstrap Percentile"),
tags$li(tags$b("Resampling:"), " 1000 kali")
)
),
lapply(1:nrow(ci_stat), function(i) {
s <- ci_stat[i,]
div(
class = "stat-card",
style = sprintf("border-left-color:%s;", colors[s$Platform]),
tags$b(style = sprintf("color:%s;", colors[s$Platform]), s$Platform),
div(
style = "font-size:10px;",
sprintf("Median Kepuasan: %.2f | n = %d", s$Median, s$N)
)
)
}),
div(class = "section-divider"),
div(class = "badge", style = "background:#4CAF50;", "95% Bootstrap Confidence Interval"),
datatable(
ci_stat %>% select(-N),
rownames = FALSE,
options = list(dom = 't', paging = FALSE),
class = "compact cell-border"
)
)
```
### Visualisasi & Interpretasi (Bootstrap CI)
```{r}
div(
style = "height: 100%; display: flex; flex-direction: column; padding: 4px;",
div(
style = "flex: 0 0 65%;",
plot_ly(
ci_stat,
x = ~Platform,
y = ~Median,
type = "scatter",
mode = "markers",
marker = list(size = 12)
) %>%
add_segments(
x = ci_stat$Platform,
xend = ci_stat$Platform,
y = ci_stat$LCL,
yend = ci_stat$UCL,
line = list(width = 6)
) %>%
layout(
title = list(
text = "Bootstrap 95% Confidence Interval Median Kepuasan Pengguna",
font = list(size = 13)
),
yaxis = list(title = "Skor Kepuasan", tickfont = list(size = 10)),
xaxis = list(title = "Platform", tickfont = list(size = 10)),
margin = list(t = 40, b = 30, l = 50, r = 20)
) %>%
config(displayModeBar = FALSE)
),
div(
style = "flex: 0 0 auto; margin-top: 2px;",
div(class = "badge", style = "background:#FF9800;", "Interpretasi Hasil"),
div(
class = "insight-box",
tags$ul(
style = "margin:0; padding-left:14px; font-size:13px; line-height:1.7;",
tags$li("Titik menunjukkan median skor kepuasan pengguna tiap platform"),
tags$li("Garis vertikal menunjukkan interval kepercayaan bootstrap 95%"),
tags$li("Interval yang relatif sempit menandakan estimasi median yang stabil"),
tags$li("Bootstrap digunakan karena data ordinal dan tidak memenuhi asumsi normalitas")
)
)
)
)
```