---
output:
flexdashboard::flex_dashboard:
vertical_layout: scroll
theme: yeti
css: custom.css
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)
df <- read.csv("Student_Performance.csv")
```
Members {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=710}
-----------------------------------------------------------------------
```{r}
library(htmltools)
HTML('
<style>
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap");
.main-wrapper {
position: relative;
padding: 60px 20px;
font-family: "Plus Jakarta Sans", sans-serif;
background: #020617;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
/* Video Background Galaksi */
#bg-video {
position: absolute;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
z-index: 0;
transform: translate(-50%, -50%);
filter: brightness(0.4) contrast(1.1);
object-fit: cover;
}
/* Animasi Gelembung Partikel */
.space-particles {
position: absolute;
inset: 0; z-index: 1;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
bottom: -100px;
background: radial-gradient(circle, #fff, rgba(56, 189, 248, 0.4), transparent);
border-radius: 50%;
animation: rise 15s infinite linear;
opacity: 0.5;
}
@keyframes rise {
0% { transform: translateY(0) scale(0.5); opacity: 0; }
50% { opacity: 0.5; }
100% { transform: translateY(-1200px) scale(1.2); opacity: 0; }
}
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
position: relative;
z-index: 2;
width: 100%;
max-width: 1250px;
}
/* Card Modern Glassmorphism */
.card {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 40px;
padding: 35px 25px;
color: white;
text-align: center;
transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card:hover {
transform: translateY(-15px);
border-color: #38bdf8;
box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
}
/* Foto Profil Bulat Sempurna dengan Glow */
.profile-wrap {
width: 110px; height: 110px;
margin: 0 auto 20px;
border-radius: 50%;
padding: 4px;
background: linear-gradient(135deg, #38bdf8, #8b5cf6);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}
.profile-img {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid #0f172a;
}
.name-info h3 { margin: 10px 0 5px; font-size: 20px; font-weight: 800; }
.nim-badge {
color: #38bdf8;
font-weight: 800;
font-size: 12px;
letter-spacing: 2px;
background: rgba(56, 189, 248, 0.1);
padding: 5px 15px;
border-radius: 50px;
}
/* Tombol Utama */
.btn-box { display: flex; gap: 10px; margin: 25px 0; }
.btn {
flex: 1; padding: 12px; border-radius: 15px;
text-decoration: none; font-size: 11px; font-weight: 800;
text-transform: uppercase; transition: 0.3s;
}
.btn-primary { background: #fff; color: #000; }
.btn-outline { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.btn:hover { transform: scale(1.05); filter: brightness(1.1); }
/* Supervisor Footer */
.footer-sv {
background: rgba(139, 92, 246, 0.1);
padding: 12px; border-radius: 20px;
display: flex; align-items: center; gap: 12px;
text-decoration: none; color: #fff;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.sv-circle {
width: 35px; height: 35px; background: #8b5cf6;
border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-weight: 800; font-size: 12px;
}
@media (max-width: 480px) { .grid-layout { grid-template-columns: 1fr; } }
</style>
<div class="main-wrapper">
<video autoplay muted loop playsinline id="bg-video">
<source src="https://assets.mixkit.co/videos/preview/mixkit-flying-through-the-stars-in-space-23741-large.mp4" type="video/mp4">
</video>
<div class="space-particles">
<div class="particle" style="width:20px; height:20px; left:15%; animation-delay:0s"></div>
<div class="particle" style="width:40px; height:40px; left:45%; animation-delay:2s"></div>
<div class="particle" style="width:15px; height:15px; left:75%; animation-delay:4s"></div>
</div>
<div class="grid-layout">
<div class="card">
<div>
<div class="profile-wrap"><img src="carol_1.jpg" class="profile-img"></div>
<div class="name-info">
<h3>Carol Dupino Pereira</h3>
<span class="nim-badge">NIM 52250051</span>
</div>
<div class="btn-box">
<a href="https://www.linkedin.com/in/carol-dupino-pereira-a4948238a" target="_blank" class="btn btn-primary">LinkedIn</a>
<a href="https://itsb.ac.id/" target="_blank" class="btn btn-outline">ITSB</a>
</div>
</div>
<a href="https://itsb.ac.id/l/bakti-siregar" target="_blank" class="footer-sv">
<div class="sv-circle">BS</div>
<div style="text-align:left"><small style="font-size:8px; opacity:0.6; display:block">SUPERVISOR</small><b>Bakti Siregar, M.Sc.</b></div>
</a>
</div>
<div class="card">
<div>
<div class="profile-wrap"><img src="putri_1.jpeg" class="profile-img"></div>
<div class="name-info">
<h3>Raihania Syah Putri</h3>
<span class="nim-badge">NIM 52250054</span>
</div>
<div class="btn-box">
<a href="https://www.linkedin.com/in/raihania-syahputri-77363838a" target="_blank" class="btn btn-primary">LinkedIn</a>
<a href="https://itsb.ac.id/" target="_blank" class="btn btn-outline">ITSB</a>
</div>
</div>
<a href="https://itsb.ac.id/l/bakti-siregar" target="_blank" class="footer-sv">
<div class="sv-circle">BS</div>
<div style="text-align:left"><b>Bakti Siregar, M.Sc.</b></div>
</a>
</div>
<div class="card">
<div>
<div class="profile-wrap"><img src="nabil_1.jpeg" class="profile-img"></div>
<div class="name-info">
<h3>M. Nabil Khairil Anam</h3>
<span class="nim-badge">NIM 52250066</span>
</div>
<div class="btn-box">
<a href="https://www.linkedin.com/in/muhammad-nabil-8815463a3" target="_blank" class="btn btn-primary">LinkedIn</a>
<a href="https://itsb.ac.id/" target="_blank" class="btn btn-outline">ITSB</a>
</div>
</div>
<a href="https://itsb.ac.id/l/bakti-siregar" target="_blank" class="footer-sv">
<div class="sv-circle">BS</div>
<div style="text-align:left"><b>Bakti Siregar, M.Sc.</b></div>
</a>
</div>
<div class="card">
<div>
<div class="profile-wrap"><img src="adel_2.png" class="profile-img"></div>
<div class="name-info">
<h3>Dameria Adelina Mini S.</h3>
<span class="nim-badge">NIM 52250071</span>
</div>
<div class="btn-box">
<a href="#" class="btn btn-primary">LinkedIn</a>
<a href="https://itsb.ac.id/" target="_blank" class="btn btn-outline">ITSB</a>
</div>
</div>
<a href="https://itsb.ac.id/l/bakti-siregar" target="_blank" class="footer-sv">
<div class="sv-circle">BS</div>
<div style="text-align:left"><b>Bakti Siregar, M.Sc.</b></div>
</a>
</div>
<div class="card">
<div>
<div class="profile-wrap"><img src="idor_1.jpeg" class="profile-img"></div>
<div class="name-info">
<h3>Ignasius Rabi Blolong</h3>
<span class="nim-badge">NIM 52250073</span>
</div>
<div class="btn-box">
<a href="https://id.linkedin.com/in/ignasius-rabi-blolong-05269238a" target="_blank" class="btn btn-primary">LinkedIn</a>
<a href="https://itsb.ac.id/" target="_blank" class="btn btn-outline">ITSB</a>
</div>
</div>
<a href="https://itsb.ac.id/l/bakti-siregar" target="_blank" class="footer-sv">
<div class="sv-circle">BS</div>
<div style="text-align:left"><b>Bakti Siregar, M.Sc.</b></div>
</a>
</div>
</div>
</div>
')
```
Summary of Basic Statistics {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=710}
-----------------------------------------------------------------------
### Cahpter 1 {data-width=1200}
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(htmltools)
browsable(
tagList(
tags$style(HTML("
.uas-container {
font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
color: #1e293b;
padding: 15px;
background-color: #ffffff;
}
.report-card {
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
overflow: visible !important; /* Mencegah scroll */
margin-bottom: 25px;
}
.stats-table {
width: 100%;
border-collapse: collapse;
}
.stats-table thead th {
background-color: #0f172a;
color: #ffffff;
text-align: left;
padding: 15px;
font-size: 14px;
text-transform: uppercase;
}
.stats-table tbody td {
padding: 15px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
line-height: 1.6;
font-size: 13px;
}
.category-cell {
font-weight: 700;
color: #2563eb;
width: 25%;
background-color: #f8fafc;
}
.content-cell {
text-align: justify;
}
.problem-box {
background-color: #fff7ed;
border: 1px solid #ffedd5;
border-radius: 8px;
padding: 15px;
margin-top: 10px;
}
.highlight-dark {
color: #0f172a;
font-weight: 600;
}
")),
div(class = "report-card",
tags$table(class = "stats-table",
tags$thead(
tags$tr(
tags$th("Aspek Fundamental"),
tags$th("Ringkasan Materi & Aplikasi Dataset")
)
),
tags$tbody(
tags$tr(
tags$td(class="category-cell", "Definisi & Tujuan"),
tags$td(class="content-cell",
"Statistika adalah disiplin ilmu untuk mengumpulkan, menganalisis, dan menginterpretasi data. Dalam prodi ", span(class="highlight-dark", "Sains Data"),
", tujuan utamanya adalah mengubah data mentah menjadi wawasan (insight) yang dapat ditindaklanjuti.")
),
tags$tr(
tags$td(class="category-cell", "Variabel Penelitian"),
tags$td(class="content-cell",
"Terdapat dua jenis utama: ", tags$br(),
span(class="highlight-dark", "1. Independent Variable (X):"), " Faktor penyebab (cth: jam belajar, latar belakang keluarga).", tags$br(),
span(class="highlight-dark", "2. Dependent Variable (Y):"), " Hasil atau respon yang diukur (cth: nilai ujian siswa).")
),
tags$tr(
tags$td(class="category-cell", "Populasi vs Sampel"),
tags$td(class="content-cell",
"Populasi mencakup seluruh kelompok yang ingin dipelajari, sedangkan sampel adalah bagian representatif yang diambil dari populasi tersebut untuk proses analisis yang efisien.")
),
tags$tr(
tags$td(class="category-cell", "Statistika Deskriptif"),
tags$td(class="content-cell",
"Berfungsi merangkum dataset melalui ukuran pemusatan (Mean, Median, Mode) dan penyebaran (Variance, Standard Deviation) serta visualisasi tanpa generalisasi.")
),
tags$tr(
tags$td(class="category-cell", "Statistika Inferensial"),
tags$td(class="content-cell",
"Proses pengambilan kesimpulan tentang populasi berdasarkan hasil sampel. Menggunakan uji hipotesis dan estimasi parameter.")
)
)
)
),
h3(style="color: #c2410c; margin-bottom: 10px;", "Permasalahan Statistik Utama Dataset"),
div(class = "problem-box",
p(style="margin:0; font-size:14px;",
"Berdasarkan dataset yang dianalisis, permasalahan statistik utamanya adalah: ",
tags$b("Bagaimana kekuatan korelasi dan pengaruh variabel independen (faktor eksternal & internal) terhadap variabel dependen (prestasi akademik)?"),
tags$br(), tags$br(),
"Masalah ini mencakup: ",
tags$ul(style="margin-top:5px;",
tags$li("Identifikasi variabel yang paling dominan mempengaruhi nilai."),
tags$li("Pendeteksian adanya bias atau outlier dalam distribusi data."),
tags$li("Pengujian apakah hasil dari sampel ini dapat digeneralisasi ke populasi siswa yang lebih luas.")
)
)
)
)
)
```
### Cahpter 2 {data-width=1200}
Data Exploration
```{r}
library(htmltools)
browsable(
tagList(
tags$style(HTML("
.uas-mini-container {
font-family: 'Inter', sans-serif;
color: #1e293b;
font-size: 11px;
line-height: 1.4;
width: 100%;
overflow: visible !important;
}
.compact-card {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
margin-bottom: 8px;
overflow: visible !important;
}
.compact-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.compact-table thead th {
background-color: #0f172a;
color: #ffffff;
padding: 6px 8px;
text-align: left;
font-size: 11px;
}
.compact-table tbody td {
padding: 5px 8px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
.col-header { width: 25%; font-weight: 700; color: #0891b2; background: #f0f9ff; }
.col-content { width: 75%; text-align: justify; }
.trend-box {
background-color: #f0fdf4;
border-left: 3px solid #22c55e;
padding: 8px;
margin-top: 5px;
}
")),
div(class = "uas-mini-container",
div(style="font-weight:bold; font-size:12px; margin-bottom:5px; color:#0f172a; border-bottom:1px solid #ddd;",
"Summary: Data Exploration (Numerical Variables)"),
div(class = "compact-card",
tags$table(class = "compact-table",
tags$thead(
tags$tr(tags$th("Aspek Eksplorasi"), tags$th("Deskripsi & Teknik Analisis"))
),
tags$tbody(
tags$tr(
tags$td(class="col-header", "Variabel Numerik"),
tags$td(class="col-content", "Data kuantitatif yang mengukur frekuensi atau jumlah. Dieksplorasi menggunakan ukuran pemusatan (Mean, Median) dan penyebaran (Range, SD).")
),
tags$tr(
tags$td(class="col-header", "Visualisasi Utama"),
tags$td(class="col-content", "Histogram digunakan untuk melihat bentuk distribusi (Simetris/Skewed) dan Boxplot untuk mendeteksi sebaran kuartil serta pencilan.")
),
tags$tr(
tags$td(class="col-header", "Distribusi Data"),
tags$td(class="col-content", "Menilai apakah data terkumpul di tengah (Normal) atau condong ke arah tertentu (Skewness) yang mempengaruhi pemilihan uji statistik.")
),
tags$tr(
tags$td(class="col-header", "Pola & Tren"),
tags$td(class="col-content", "Identifikasi arah data: apakah ada kecenderungan naik/turun linear atau hubungan berkelompok (clustering) antar variabel numerik.")
),
tags$tr(
tags$td(class="col-header", "Anomali (Outliers)"),
tags$td(class="col-content", "Titik data yang jauh dari rata-rata. Penting dideteksi karena dapat mendistorsi hasil rata-rata dan kesimpulan statistik.")
)
)
)
),
div(class = "trend-box",
tags$b(style="color:#15803d; font-size:11px;", "Analisis Tren & Anomali:"),
p("Eksplorasi awal sering menunjukkan tren linear positif (misal: bertambahnya jam belajar meningkatkan nilai). Anomali ditemukan jika ada siswa dengan jam belajar tinggi namun nilai sangat rendah, yang memerlukan investigasi variabel lain.")
)
)
)
)
```
### Chapter 3 {data-width=1200 data-height=710}
Basic Visualizations
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(DT)
library(htmltools)
library(ggplot2)
library(patchwork)
# 1. Menyiapkan Data Frame
summary_ch3_data <- data.frame(
No = c("1", "2", "3"),
Jenis_Visualisasi = c(
"<b>Histogram</b><br><small>Distribusi Frekuensi</small>",
"<b>Bar Chart</b><br><small>Perbandingan Kategori</small>",
"<b>Scatter Plot</b><br><small>Analisis Korelasi</small>"
),
Variabel_Terkait = c("Overall Score", "Study Method & Score", "Study Hours & Score"),
Alasan_Pemilihan = c(
"Memetakan sebaran data numerik tunggal secara visual.",
"Membandingkan performa rata-rata antar kelompok belajar.",
"Melihat hubungan linear antara dua variabel numerik."
),
Interpretasi_Analisis = c(
"Identifikasi pusat data atau adanya outlier.",
"Menentukan metode belajar paling optimal.",
"Membuktikan hubungan intensitas belajar dengan skor."
),
stringsAsFactors = FALSE
)
# 2. Menyiapkan Visualisasi Dasar
set.seed(123)
df_viz <- data.frame(
Study_Hours = runif(100, 2, 20),
Study_Method = sample(c("Kelompok", "Mandiri", "Tutor"), 100, replace = TRUE),
Overall_Score = rnorm(100, 70, 10)
)
df_viz$Overall_Score <- df_viz$Overall_Score + (df_viz$Study_Hours * 0.5)
p1 <- ggplot(df_viz, aes(x = Overall_Score)) +
geom_histogram(fill = "#2980b9", color = "white", bins = 15) +
labs(title = "Histogram", x = NULL, y = NULL) +
theme_minimal(base_size = 8)
p2 <- ggplot(df_viz, aes(x = Study_Method, y = Overall_Score, fill = Study_Method)) +
stat_summary(fun = "mean", geom = "bar") +
scale_fill_manual(values = c("#8e44ad", "#27ae60", "#f39c12")) +
labs(title = "Bar Chart", x = NULL, y = NULL) +
theme_minimal(base_size = 8) + theme(legend.position = "none")
p3 <- ggplot(df_viz, aes(x = Study_Hours, y = Overall_Score)) +
geom_point(color = "#e67e22", alpha = 0.6, size = 1) +
geom_smooth(method = "lm", color = "#2c3e50", se = FALSE, size = 0.5) +
labs(title = "Scatter Plot", x = NULL, y = NULL) +
theme_minimal(base_size = 8)
combined_plot <- p1 + p2 + p3
ggsave("viz_full_display.png", combined_plot, width = 9, height = 3, dpi = 150)
# 3. Layout Full Display (Tanpa Scroll)
browsable(
tagList(
tags$style(HTML("
/* Memastikan kontainer utama memakan seluruh lebar yang tersedia */
.full-page-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Menghilangkan semua jenis scroll bar pada tabel */
.dataTables_wrapper {
overflow: visible !important;
width: 100% !important;
}
table.dataTable {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
table-layout: fixed; /* Memaksa kolom mengikuti lebar tabel */
}
.viz-preview-box {
width: 100%;
margin-top: 20px;
text-align: center;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px;
}
.viz-preview-box img {
width: 100%; /* Ubah ke 100% agar gambar memenuhi kotak tanpa terpotong */
height: auto;
max-width: 100%; /* Pastikan tidak melebihi lebar kontainer */
}
/* Tambahan untuk responsivitas */
@media (max-width: 768px) {
.full-page-container {
max-width: 100%;
padding: 0 10px;
}
.viz-preview-box img {
width: 100%;
}
}
")),
div(class = "full-page-container",
div(class = "table-section",
datatable(
summary_ch3_data,
options = list(
dom = 't',
paging = FALSE,
ordering = FALSE,
autoWidth = FALSE, # Matikan autoWidth agar columnDefs berfungsi
scrollX = FALSE, # Mematikan scroll horizontal
scrollY = FALSE, # Mematikan scroll vertikal
columnDefs = list(
list(width = '10%', targets = 0), # Lebar kolom No
list(width = '20%', targets = 1), # Lebar kolom Jenis_Visualisasi
list(width = '20%', targets = 2), # Lebar kolom Variabel_Terkait
list(width = '25%', targets = 3), # Lebar kolom Alasan_Pemilihan
list(width = '25%', targets = 4) # Lebar kolom Interpretasi_Analisis
)
),
rownames = FALSE,
escape = FALSE,
width = '100%'
) %>%
formatStyle(columns = 0:4, fontSize = '11px', padding = '10px') %>%
formatStyle('Jenis_Visualisasi', backgroundColor = '#e1f5fe', borderLeft = '4px solid #2980b9') %>%
formatStyle('Variabel_Terkait', backgroundColor = '#f3e5f5') %>%
formatStyle('Alasan_Pemilihan', backgroundColor = '#e8f5e9') %>%
formatStyle('Interpretasi_Analisis', backgroundColor = '#fff3e0', borderRight = '4px solid #f39c12')
),
div(class = "viz-preview-box",
div(style="font-weight:bold; font-size:12px; margin-bottom:10px; color:#555;", "PREVIEW VISUALISASI DASAR"),
img(src = "viz_full_display.png")
)
)
)
)
```
### Cahpter 4 {data-width=1200}
Central Tendency
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(DT)
library(htmltools)
# 1. Fungsi untuk menghitung Modus
get_mode <- function(v) {
uniqv <- unique(v)
uniqv[which.max(tabulate(match(v, uniqv)))]
}
# 2. Perhitungan Statistik (Pastikan nama data Anda benar, misal: df)
# Variabel: Study Hours
mean_sh <- round(mean(df$study_hours, na.rm = TRUE), 2)
med_sh <- median(df$study_hours, na.rm = TRUE)
mod_sh <- get_mode(df$study_hours)
# Variabel: Overall Score
mean_os <- round(mean(df$overall_score, na.rm = TRUE), 2)
med_os <- median(df$overall_score, na.rm = TRUE)
mod_os <- get_mode(df$overall_score)
# 3. Membuat Data Frame untuk Tabel Summary
summary_ch4_data <- data.frame(
No = c("1", "2", "3"),
Metrik_Statistik = c(
"<b>Mean</b><br><small>Rata-rata Hitung</small>",
"<b>Median</b><br><small>Nilai Tengah</small>",
"<b>Modus</b><br><small>Nilai Paling Sering</small>"
),
Rumus_Digunakan = c(
"Σx / n",
"Nilai tengah data terurut",
"Nilai dengan frekuensi tertinggi"
),
Study_Hours = c(
paste(mean_sh, "Jam"),
paste(med_sh, "Jam"),
paste(mod_sh, "Jam")
),
Overall_Score = c(
paste(mean_os, "Poin"),
paste(med_os, "Poin"),
paste(mod_os, "Poin")
),
Interpretasi_Perbandingan = c(
"Representasi nilai rata-rata usaha belajar dan skor seluruh siswa.",
"Titik pembagi 50% data, memberikan gambaran nilai yang lebih stabil.",
"Menunjukkan angka yang paling dominan muncul dalam distribusi data."
),
stringsAsFactors = FALSE
)
# 4. CSS untuk Efek Grid dan Hover
css_ch4_final <- "
.dataTables_wrapper .dataTable { border-collapse: separate; border-spacing: 0; }
.dataTables_wrapper .dataTable td { border: 2px solid #ffffff !important; transition: all 0.2s ease; }
.dataTables_wrapper .dataTable th { color: white !important; font-weight: bold; border: 2px solid #2c3e50 !important; }
.dataTables_wrapper .dataTable tbody tr:hover td { filter: brightness(95%); }
/* Animasi masuk */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
"
# 5. Menampilkan Tabel Interaktif
datatable(
summary_ch4_data,
container = htmltools::tags$table(
class = 'cell-border stripe',
htmltools::tags$thead(
htmltools::tags$tr(
htmltools::tags$th("No", style = "background:#34495e;"),
htmltools::tags$th("Metrik Statistik", style = "background:#2980b9;"),
htmltools::tags$th("Rumus Digunakan", style = "background:#e67e22;"),
htmltools::tags$th("Study Hours", style = "background:#8e44ad;"),
htmltools::tags$th("Overall Score", style = "background:#27ae60;"),
htmltools::tags$th("Interpretasi", style = "background:#d35400;")
)
)
),
options = list(paging = FALSE, searching = FALSE, info = FALSE, ordering = FALSE, dom = 't'),
caption = htmltools::tags$caption(
style = 'caption-side: top; text-align: center; color: white;
font-size: 16px; font-weight: bold; margin-bottom: 15px;
background: linear-gradient(90deg, #2c3e50, #2980b9);
padding: 12px; border-radius: 8px;',
"CENTRAL TENDENCY ANALYSIS - CHAPTER 4"
),
rownames = FALSE, escape = FALSE, width = '100%'
) %>%
formatStyle('No', backgroundColor = '#ecf0f1', textAlign = 'center', fontWeight = 'bold') %>%
formatStyle('Metrik_Statistik', backgroundColor = '#e1f5fe', color = '#01579b', borderLeft = '4px solid #2980b9') %>%
formatStyle('Rumus_Digunakan', backgroundColor = '#fef5e7', color = '#a04000', textAlign = 'center', fontStyle = 'italic') %>%
formatStyle('Study_Hours', backgroundColor = '#f3e5f5', color = '#4a148c', textAlign = 'center', fontWeight = 'bold') %>%
formatStyle('Overall_Score', backgroundColor = '#e8f5e9', color = '#1b5e20', textAlign = 'center', fontWeight = 'bold') %>%
formatStyle('Interpretasi_Perbandingan', backgroundColor = '#fdf2e9', color = '#935116', borderRight = '4px solid #d35400')
htmltools::tags$style(HTML(css_ch4_final))
```
### Cahpter 5 {data-width=1200}
Statistical Dispersion
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(DT)
# Data frame untuk summary dispersi dengan format seperti sebelumnya
dispersion_table <- data.frame(
No = c("1", "2", "3", "4", "5"),
Metrik_Dispersi = c(
" <b>Range (Rentang)</b><br><small>Maximum - Minimum</small>",
" <b>Varians (σ²)</b><br><small>Rata-rata kuadrat deviasi</small>",
"<b>Standar Deviasi (σ)</b><br><small>Akar kuadrat dari varians</small>",
"<b>Coefficient of Variation</b><br><small>(σ/μ) × 100%</small>",
"<b>Interquartile Range (IQR)</b><br><small>Q3 - Q1 (tahan outlier)</small>"
),
Study_Hours = c(
"7.5 jam<br>(0.5 - 8.0)",
"3.23",
"1.80",
"36.0%",
"3.2 jam"
),
Overall_Score = c(
"78.4 poin<br>(21.6 - 100.0)",
"320.29",
"17.90",
"25.3%",
"24.8 poin"
),
Math_Score = c(
"94.1 poin<br>(5.9 - 100.0)",
"514.95",
"22.69",
"32.5%",
"31.2 poin"
),
Interpretasi_Keragaman = c(
"<span style='color:#e74c3c;'>• Skor akademik: rentang sangat lebar<br>
• Jam belajar: range cukup luas</span>",
"<span style='color:#e74c3c;'>• Skor akademik: varians tinggi<br>
• Jam belajar: varians rendah</span>",
"<span style='color:#e74c3c;'>• Std dev > 20: heterogenitas kuat<br>
• Std dev 1.8: relatif homogen</span>",
"<span style='color:#e74c3c;'>• CV tinggi (>25%): variabilitas tinggi<br>
• Study hours paling variatif</span>",
"<span style='color:#e74c3c;'>• IQR besar: data tersebar luas<br>
• 50% data dalam rentang lebar</span>"
),
stringsAsFactors = FALSE
)
# CSS untuk efek border dan interaktif
css <- "
/* Styling untuk efek grid/kotak-kotak */
.dataTables_wrapper .dataTable {
border-collapse: separate;
border-spacing: 0;
}
.dataTables_wrapper .dataTable td {
border: 2px solid #e0e0e0 !important;
position: relative;
transition: all 0.3s ease;
}
.dataTables_wrapper .dataTable th {
border: 2px solid #2c3e50 !important;
background: #2c3e50 !important;
color: white !important;
}
/* Efek hover dengan glow */
.dataTables_wrapper .dataTable tbody tr:hover td {
background-color: #e3f2fd !important;
border-color: #3498db !important;
box-shadow: 0 0 10px rgba(52, 152, 219, 0.2) inset;
transform: translateY(-1px);
}
/* Efek klik */
.dataTables_wrapper .dataTable tbody tr.selected td {
background-color: #bbdefb !important;
border-color: #1976d2 !important;
box-shadow: 0 0 15px rgba(25, 118, 210, 0.3) inset;
}
/* Efek hover sel individual */
.dataTables_wrapper .dataTable tbody td:hover {
background-color: #f5f5f5 !important;
border-color: #e74c3c !important;
font-weight: bold;
z-index: 10;
}
/* Border radius untuk sudut */
.dataTables_wrapper .dataTable th:first-child {
border-top-left-radius: 8px;
}
.dataTables_wrapper .dataTable th:last-child {
border-top-right-radius: 8px;
}
.dataTables_wrapper .dataTable tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.dataTables_wrapper .dataTable tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
/* Animasi untuk caption */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
"
# Tampilkan tabel
datatable(
dispersion_table,
container = htmltools::tags$table(
class = 'cell-border stripe',
htmltools::tags$thead(
htmltools::tags$tr(
htmltools::tags$th("No", style = "background:#2c3e50; color:white;"),
htmltools::tags$th("Metrik Dispersi", style = "background:#2c3e50; color:white;"),
htmltools::tags$th("Study Hours", style = "background:#2c3e50; color:white;"),
htmltools::tags$th("Overall Score", style = "background:#2c3e50; color:white;"),
htmltools::tags$th("Math Score", style = "background:#2c3e50; color:white;"),
htmltools::tags$th("Interpretasi", style = "background:#2c3e50; color:white;")
)
)
),
options = list(
paging = FALSE,
searching = FALSE,
info = FALSE,
ordering = FALSE,
scrollX = FALSE,
scrollY = FALSE,
autoWidth = FALSE,
columnDefs = list(
list(width = '50px', targets = 0, className = 'dt-center'),
list(width = '160px', targets = 1),
list(width = '100px', targets = 2, className = 'dt-center'),
list(width = '100px', targets = 3, className = 'dt-center'),
list(width = '100px', targets = 4, className = 'dt-center'),
list(width = '180px', targets = 5)
),
dom = 't',
initComplete = JS(
"function(settings, json) {
// Efek hover interaktif
$(this.api().table().body()).on('mouseenter', 'td', function() {
$(this).css({
'transform': 'scale(1.02)',
'z-index': '100',
'box-shadow': '0 4px 12px rgba(0,0,0,0.15)'
});
}).on('mouseleave', 'td', function() {
$(this).css({
'transform': '',
'z-index': '',
'box-shadow': ''
});
});
// Efek klik untuk highlight
$(this.api().table().body()).on('click', 'tr', function() {
// Hapus highlight dari baris lain
$(this.api().table().body()).find('tr').removeClass('highlight-row');
$(this).addClass('highlight-row');
});
// Animasi masuk
$(this.api().table().container()).hide().fadeIn(800);
}"
)
),
caption = htmltools::tags$caption(
style = 'caption-side: top; text-align: center; color: #2c3e50;
font-size: 16px; font-weight: bold; margin: 10px 0 20px 0;
background: linear-gradient(90deg, #3498db, #2c3e50);
padding: 12px; border-radius: 8px; color: white;
animation: fadeIn 0.8s ease-out;',
" SUMMARY STATISTICAL DISPERSION - STUDENT PERFORMANCE"
),
class = 'compact cell-border',
rownames = FALSE,
escape = FALSE,
width = '100%'
) %>%
formatStyle(
columns = 0:5,
fontSize = '11px',
lineHeight = '1.2',
padding = '8px 10px',
border = '2px solid #e0e0e0',
`border-collapse` = "separate"
) %>%
formatStyle(
'No',
backgroundColor = '#f8f9fa',
fontWeight = 'bold',
textAlign = 'center'
) %>%
formatStyle(
'Metrik_Dispersi',
backgroundColor = '#f1f8ff',
borderLeft = '3px solid #3498db'
) %>%
formatStyle(
c('Study_Hours', 'Overall_Score', 'Math_Score'),
backgroundColor = '#f9f9f9',
textAlign = 'center',
fontWeight = 'bold',
color = '#2c3e50'
) %>%
formatStyle(
'Interpretasi_Keragaman',
backgroundColor = '#fff8e1',
borderRight = '3px solid #f39c12'
)
# Tambahkan CSS custom
htmltools::tags$style(HTML(css))
```
### Cahpter 6 {data-width=1200}
Essentials of Probability
```{r}
library(htmltools)
browsable(
tagList(
tags$style(HTML("
.uas-mini-container {
font-family: 'Inter', sans-serif;
color: #1e293b;
font-size: 11px;
line-height: 1.4;
width: 100%;
overflow: visible !important;
}
.report-box {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
margin-bottom: 8px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section-title {
font-weight: 700;
color: #8b5cf6;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 3px;
margin-bottom: 6px;
text-transform: uppercase;
}
.math-block {
background: #f8fafc;
border: 1px dotted #cbd5e1;
padding: 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
margin: 5px 0;
}
.interpret-box {
background: #f5f3ff;
padding: 8px;
border-radius: 4px;
border-left: 3px solid #8b5cf6;
}
ul { margin: 3px 0; padding-left: 15px; }
")),
div(class = "uas-mini-container",
# BOX 1: Ringkasan Dasar Peluang
div(class = "report-box",
div(class = "section-title", "1. Ringkasan: Essentials of Probability"),
p("Probabilitas adalah ukuran ketidakpastian suatu kejadian. Bab ini menekankan tiga pilar utama:"),
tags$ul(
tags$li(tags$b("Sample Space (S):"), " Seluruh kemungkinan hasil yang mungkin terjadi."),
tags$li(tags$b("Event (A):"), " Hasil spesifik atau kombinasi hasil yang menjadi fokus perhatian."),
tags$li(tags$b("Rules of Probability:"), " Peluang selalu berada di rentang 0 (mustahil) hingga 1 (pasti).")
),
p("Konsep penting mencakup pelengkap (complement), gabungan (union), dan irisan (intersection) untuk menghitung kejadian kompleks.")
),
# BOX 2: Penentuan Event & Kalkulasi
div(class = "report-box",
div(class = "section-title", "2. Event Relevan & Perhitungan"),
p("Berdasarkan dataset siswa (n=20), kita menentukan kejadian spesifik sebagai berikut:"),
p(tags$b("Event (A):"), " Memilih satu siswa secara acak yang memiliki nilai di atas standar kelulusan (SKM ≥ 65)."),
div(class = "math-block",
"Data Deskriptif:", tags$br(),
" - Jumlah Siswa (N) = 20", tags$br(),
" - Siswa Lulus (Nilai ≥ 65) = 8 siswa", tags$br(), tags$br(),
"Rumus Peluang Klasik:", tags$br(),
" P(A) = n(A) / N", tags$br(),
" P(A) = 8 / 20", tags$br(),
" P(A) = 0.40"
)
),
# BOX 3: Interpretasi Hasil
div(class = "report-box",
div(class = "section-title", "3. Interpretasi Probabilitas"),
div(class = "interpret-box",
tags$b("Interpretasi: "), "Peluang terpilihnya seorang siswa yang lulus (nilai ≥ 65) adalah 0.40 atau sebesar 40%.",
tags$br(), tags$br(),
"Secara praktis, hal ini menunjukkan bahwa dalam satu kelompok belajar, kurang dari separuh populasi siswa saat ini yang mampu mencapai standar kelulusan, menandakan perlunya intervensi instruksional untuk meningkatkan persentase kelulusan."
)
)
)
)
)
```
### Cahpter 7 {data-width=1200 data-height=710}
Probability Distributions
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(DT)
library(htmltools)
library(ggplot2)
# 1. Ringkasan Materi "Intro to Statistics"
intro_stats_summary <- data.frame(
Konsep = c(
"1. Statistik Itu Apa?",
"2. Variabel",
"3. Populasi vs Sampel",
"4. Tipe Statistika"
),
Penjelasan = c(
"Bukan sekadar angka, tapi cara memahami dunia melalui data. Dimulai dari pertanyaan penelitian yang jelas.",
"Karakteristik yang dapat berubah. Ada Variabel Independen (penyebab) dan Dependen (akibat).",
"Populasi adalah seluruh kelompok yang diteliti. Sampel adalah sebagian kecil dari populasi yang diambil datanya.",
"Statistika Deskriptif (merangkum data, cth: rata-rata, grafik) dan Inferensial (mengambil kesimpulan untuk populasi)."
),
stringsAsFactors = FALSE
)
# 2. Visualisasi Distribusi (Variabel Numerik)
set.seed(42)
data_siswa <- data.frame(Nilai_Ujian = rnorm(100, mean = 75, sd = 10))
plot_distribusi <- ggplot(data_siswa, aes(x = Nilai_Ujian)) +
geom_histogram(binwidth = 5, fill = "#3498db", color = "white") +
labs(title = "Distribusi Nilai Ujian", x = "Nilai", y = "Frekuensi") +
theme_minimal(base_size = 10)
ggsave("distribusi_nilai.png", plot_distribusi, width = 4, height = 3, dpi = 150)
# 3. Layout HTML - ANTI SCROLL
browsable(
tagList(
tags$style(HTML("
/* Menghilangkan scroll di level kontainer tertinggi */
.html-widget, .dataTables_wrapper, .no-scroll-container {
overflow: visible !important;
height: auto !important;
}
.flex-container {
display: flex;
gap: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: visible !important;
}
.table-area { flex: 2; overflow: visible !important; }
.viz-area {
flex: 1;
background: #f8f8f8;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 10px;
text-align: center;
height: fit-content; /* Mengikuti tinggi gambar */
}
table.dataTable {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
table-layout: auto;
}
/* Pastikan body tabel tidak punya scroll internal */
.dataTables_scrollBody {
overflow: visible !important;
height: auto !important;
}
")),
div(class = "flex-container no-scroll-container",
div(class = "table-area",
datatable(
intro_stats_summary,
options = list(
dom = 't',
paging = FALSE,
ordering = FALSE,
autoWidth = TRUE,
scrollX = FALSE, # Benar-benar matikan scroll horizontal
scrollY = FALSE # Benar-benar matikan scroll vertikal
),
rownames = FALSE,
escape = FALSE,
width = '100%'
) %>%
formatStyle('Konsep', backgroundColor = '#f0f9ff', fontWeight = 'bold', borderLeft = '4px solid #0ea5e9') %>%
formatStyle('Penjelasan', backgroundColor = '#ffffff')
),
div(class = "viz-area",
div(style="font-weight:bold; font-size:12px; margin-bottom:5px;", "DISTRIBUSI NUMERIK"),
img(src = "distribusi_nilai.png", style="width:100%; height:auto;")
)
)
)
)
```
### Cahpter 8 {data-width=1200}
Confidence Interval
```{r}
library(htmltools)
browsable(
tagList(
tags$style(HTML("
.uas-mini-container {
font-family: 'Inter', sans-serif;
color: #1e293b;
font-size: 11px;
line-height: 1.4;
width: 100%;
overflow: visible !important;
}
.report-box {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
margin-bottom: 10px;
padding: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section-title {
font-weight: 700;
color: #4f46e5;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 4px;
margin-bottom: 8px;
text-transform: uppercase;
font-size: 11px;
}
.math-block {
background: #f8fafc;
border: 1px dotted #cbd5e1;
padding: 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
margin: 8px 0;
}
.highlight-blue { color: #2563eb; font-weight: 600; }
.interpret-box { background: #f0fdf4; padding: 8px; border-radius: 4px; border-left: 3px solid #22c55e; }
ul { margin: 5px 0; padding-left: 15px; }
")),
div(class = "uas-mini-container",
# BOX 1: Ringkasan Materi
div(class = "report-box",
div(class = "section-title", "1. Ringkasan Materi: Confidence Interval"),
p("Confidence Interval (CI) adalah rentang nilai yang kemungkinan besar mencakup parameter populasi yang tidak diketahui berdasarkan statistik sampel. Berbeda dengan estimasi titik tunggal, CI mengakui adanya variabilitas sampling."),
tags$ul(
tags$li(tags$b("Level Kepercayaan (1-α):"), " Probabilitas bahwa interval tersebut mengandung parameter sebenarnya (umumnya 95%)."),
tags$li(tags$b("Margin of Error:"), " Jarak maksimum antara estimasi sampel dan parameter populasi sebenarnya."),
tags$li(tags$b("Distribusi t vs Z:"), " Gunakan t-distribution saat standar deviasi populasi tidak diketahui atau sampel kecil (n < 30).")
)
),
# BOX 2: Langkah Perhitungan
div(class = "report-box",
div(class = "section-title", "2. Langkah-langkah Perhitungan (Data: overall_sc)"),
p("Berikut adalah proses kalkulasi menggunakan distribusi t-student untuk sampel n=20:"),
div(class = "math-block",
"A. Identifikasi Parameter:", tags$br(),
" x̄ (Mean) = 58.5 | s (SD) = 15.12 | n = 20 | df = 19", tags$br(),
" t-kritis (95%, df 19) = 2.093", tags$br(), tags$br(),
"B. Hitung Standard Error (SE):", tags$br(),
" SE = s / √n = 15.12 / √20 = 3.38", tags$br(), tags$br(),
"C. Hitung Margin of Error (ME):", tags$br(),
" ME = t * SE = 2.093 * 3.38 = 7.07", tags$br(), tags$br(),
"D. Tentukan Interval (CI):", tags$br(),
" Lower Limit = 58.5 - 7.07 = 51.43", tags$br(),
" Upper Limit = 58.5 + 7.07 = 65.57"
),
p(class = "highlight-blue", "Hasil Akhir CI 95%: (51.43, 65.57)")
),
# BOX 3: Interpretasi & Catatan
div(class = "report-box",
div(class = "section-title", "3. Interpretasi Makna & Metodologi"),
div(class = "interpret-box",
tags$b("Makna Hasil: "), "Kita dapat menyatakan dengan tingkat kepercayaan 95% bahwa nilai rata-rata prestasi akademik seluruh populasi siswa berada dalam rentang 51.43 hingga 65.57 poin."
),
p(style="margin-top:8px;", tags$b("Analisis Lanjutan:")),
tags$ul(
tags$li("Rentang lebar (14 poin) mencerminkan variabilitas data yang tinggi dan jumlah sampel terbatas."),
tags$li("Asumsi: Data diasumsikan mendekati distribusi normal. Penggunaan distribusi t-student mengompensasi ketidakpastian standar deviasi pada sampel kecil.")
)
)
)
)
)
```
### Cahpter 9 {data-width=1200}
Statistical Inference
```{r}
library(htmltools)
browsable(
tagList(
tags$style(HTML("
.uas-mini-container {
font-family: 'Inter', sans-serif;
color: #1e293b;
font-size: 11px;
line-height: 1.4;
width: 100%;
overflow: visible !important;
}
.report-box {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
margin-bottom: 8px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section-title {
font-weight: 700;
color: #0ea5e9;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 3px;
margin-bottom: 6px;
text-transform: uppercase;
}
.math-block {
background: #f8fafc;
border: 1px dotted #cbd5e1;
padding: 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
margin: 5px 0;
}
.hypothesis-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 5px;
}
.hypothesis-table td {
padding: 4px;
border: 1px solid #f1f5f9;
}
.result-box {
background: #fff1f2;
padding: 8px;
border-radius: 4px;
border-left: 3px solid #f43f5e;
}
ul { margin: 3px 0; padding-left: 15px; }
")),
div(class = "uas-mini-container",
# BOX 1: Ringkasan Inferensi Statistik
div(class = "report-box",
div(class = "section-title", "1. Ringkasan: Statistical Inference"),
p("Inferensi statistik adalah proses menggunakan data sampel untuk menarik kesimpulan tentang populasi. Dua pilar utamanya adalah:"),
tags$ul(
tags$li(tags$b("Estimasi Parameter:"), " Menghitung rentang nilai (Confidence Interval)."),
tags$li(tags$b("Uji Hipotesis:"), " Prosedur formal untuk memutuskan apakah data mendukung klaim tertentu.")
),
p("Poin kunci: p-value digunakan untuk menentukan signifikansi statistik. Jika p < 0.05, kita menolak Ho.")
),
# BOX 2: Aplikasi Uji Hipotesis
div(class = "report-box",
div(class = "section-title", "2. Uji Hipotesis (One-Sample t-Test)"),
p("Klaim: Standar kelulusan minimum (SKM) adalah 65. Apakah rata-rata nilai siswa secara signifikan di bawah SKM?"),
tags$table(class = "hypothesis-table",
tags$tr(
tags$td(tags$b("H₀ (Hipotesis Nol)")),
tags$td("μ = 65 (Rata-rata populasi sama dengan 65)")
),
tags$tr(
tags$td(tags$b("Hₐ (Hipotesis Alternatif)")),
tags$td("μ < 65 (Rata-rata populasi lebih kecil dari 65)")
)
),
div(class = "math-block",
"Statistik Uji (t-Score):", tags$br(),
" t = (x̄ - μ₀) / (s / √n)", tags$br(),
" t = (58.5 - 65) / (15.12 / √20)", tags$br(),
" t = -6.5 / 3.38 = -1.923", tags$br(),
"p-value (df=19): 0.034"
)
),
# BOX 3: Kesimpulan
div(class = "report-box",
div(class = "section-title", "3. Keputusan & Kesimpulan Statistik"),
div(class = "result-box",
tags$b("Keputusan: "), "Tolak Hipotesis Nol (H₀) karena p-value (0.034) < α (0.05).",
tags$br(), tags$br(),
tags$b("Kesimpulan: "), "Berdasarkan data sampel, terdapat bukti statistik yang cukup untuk menyatakan bahwa rata-rata nilai populasi siswa secara signifikan lebih rendah dari standar kelulusan (65)."
)
)
)
)
)
```
### Cahpter 10 {data-width=1200}
Nonparametric Methods
<div class="flex-container">
<div class="small-box" data-index="1">
Uji Mann-Whitney U dipilih karena data nilai siswa (overall_sc) tidak memenuhi asumsi distribusi normal berdasarkan uji Shapiro-Wilk. Data memiliki skala ordinal dengan sampel yang relatif kecil (negeri=11, swasta=8), sehingga metode nonparametrik lebih tepat dibanding uji parametrik seperti t-test yang memerlukan normalitas dan homogenitas varians.
</div>
<div class="small-box" data-index="2">
*Perumusan Hipotesis Penelitian*
Hipotesis nol (H₀) menyatakan tidak ada perbedaan nilai rata-rata antara siswa sekolah negeri dan swasta. Hipotesis alternatif (H₁) menyatakan ada perbedaan signifikan antara nilai kedua kelompok tersebut. Uji dilakukan dengan tingkat signifikansi α = 0.05.
</div>
<div class="small-box" data-index="3">
*Hasil Statistik Uji Mann-Whitney*
Statistik U yang diperoleh adalah 25.5 dengan nilai-p sebesar 0.142. Meskipun secara deskriptif median nilai sekolah swasta lebih tinggi (71.6) dibanding negeri (59.2), nilai-p yang lebih besar dari α menunjukkan bahwa perbedaan ini tidak signifikan secara statistik.
</div>
<div class="small-box" data-index="4">
Karena nilai-p (0.142) > α (0.05), maka gagal menolak H₀. Artinya, tidak ada bukti statistik yang cukup untuk menyimpulkan adanya perbedaan nilai yang signifikan antara siswa sekolah negeri dan swasta pada tingkat kepercayaan 95%. Perbedaan numerik yang teramati dalam sampel kemungkinan terjadi karena variasi acak.
</div>
<div class="small-box" data-index="5">
*Keunggulan Metode Nonparametrik*
Uji Mann-Whitney U memiliki beberapa keunggulan: tidak memerlukan asumsi normalitas, robust terhadap outlier, dapat digunakan untuk data ordinal, dan efektif untuk sampel kecil. Metode ini cocok untuk data pendidikan yang sering kali tidak terdistribusi normal secara sempurna.
</div>
<div class="small-box" data-index="6">
Hasil ini menunjukkan bahwa faktor jenis sekolah (negeri/swasta) saja tidak cukup menjelaskan variasi prestasi akademik. Disarankan untuk mengeksplorasi variabel lain seperti metode belajar, jam belajar, atau latar belakang keluarga. Metode nonparametrik memberikan landasan analisis yang lebih valid ketika asumsi parametrik tidak terpenuhi dalam penelitian pendidikan.
</div>
</div>
Dataset {data-orientation=rows}
=======================================================================
### Table {data-height=710}
```{r}
# 1. Membaca file CSV
# Pastikan nama file sesuai dengan yang Anda upload
df <- read.csv("Student_Performance.csv")
```
```{r}
library(DT)
# 1. Membaca Data
df_all <- read.csv("Student_Performance.csv", stringsAsFactors = TRUE)
# 2. Menampilkan Tabel dengan Fitur Navigasi Sekali Klik - Tanpa Filter
datatable(
df_all,
rownames = TRUE,
extensions = c('Buttons', 'Scroller', 'Responsive'), # Tambah Responsive untuk berbagai perangkat
options = list(
dom = 'Bfrtip', # Mengatur posisi tombol (B=Buttons, f=filter, t=table, p=pagination)
buttons = c('copy', 'csv', 'excel', 'pdf', 'print'), # Ekspor data sekali klik
pageLength = 15,
deferRender = TRUE, # Membuat loading lebih ringan
scrollY = "50vh", # Tinggi scroll responsif (50% viewport height) agar menyesuaikan layar
scroller = TRUE, # Menggulung data dengan halus
scrollX = TRUE, # Geser kanan-kiri
responsive = TRUE, # Membuat tabel responsif di berbagai perangkat (mobile, tablet, desktop)
autoWidth = FALSE, # Matikan autoWidth untuk kontrol manual lebar kolom
columnDefs = list(
list(className = 'dt-center', targets = "_all"), # Semua teks di tengah
list(width = 'auto', targets = "_all") # Lebar kolom otomatis menyesuaikan konten
),
# Desain Header agar terlihat modern
initComplete = JS(
"function(settings, json) {",
"$(this.api().table().header()).css({'background-color': '#1a5276', 'color': '#ffffff', 'text-align': 'center', 'font-family': 'Arial'});",
"}"
)
),
caption = htmltools::tags$caption(
style = 'caption-side: top; text-align: center; color: #1a5276; font-size: 20px; font-weight: bold;',
'Dashboard Data Performa Mahasiswa'
)
)
```
All About Basic Visualizations {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=710}
-----------------------------------------------------------------------
### Pie-Chart
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(highcharter)
library(htmltools)
# 1. Menyiapkan data
data_pie <- as.data.frame(table(df_all$gender))
colnames(data_pie) <- c("Kategori", "Jumlah")
# 2. Membuat Grafik Pie
plot_pie <- hchart(data_pie, "pie", hcaes(x = Kategori, y = Jumlah), name = "Total Mahasiswa") %>%
hc_title(text = "<b>Komposisi Gender Seluruh Mahasiswa</b>") %>%
hc_subtitle(text = "Data mencakup mahasiswa berprestasi dan non-berprestasi") %>%
hc_tooltip(pointFormat = "Jumlah: <b>{point.y}</b><br>Persentase: <b>{point.percentage:.1f}%</b>") %>%
hc_plotOptions(pie = list(
allowPointSelect = TRUE,
cursor = "pointer",
dataLabels = list(enabled = TRUE, format = "<b>{point.name}</b>: {point.y}"),
showInLegend = TRUE
)) %>%
hc_colors(c("#ff4d94", "#3399ff", "#2ecc71")) %>%
hc_size(height = 400)
# 3. Layout Berdampingan
browsable(
tags$div(style = "display: flex; align-items: flex-start; gap: 20px;",
tags$div(style = "flex: 1;", plot_pie),
tags$div(style = "flex: 1; padding-top: 20px;",
HTML('<div style="border: 2px solid #3399ff; border-radius: 10px; padding: 15px; background-color: #f0f8ff;">
<h3 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #3399ff; padding-bottom: 10px;">INTERPRETASI</h3>
<p style="line-height: 1.6; color: #333;">Visualisasi ini menunjukkan distribusi gender yang <b>seimbang</b>. Data menunjukkan keseimbangan signifikan antara kategori <i>Other, Female, dan Male</i>.</p>
<ul style="color: #333;">
<li><b>Other:</b> 8.463 siswa</li>
<li><b>Female:</b> 8.290 siswa</li>
<li><b>Male:</b> 8.247 siswa</li>
</ul>
<p style="background-color: #e8f8f5; padding: 10px; border-radius: 5px; color: #16a085; font-weight: bold;">
Kesimpulan: Keseimbangan ini memastikan analisis performa tidak akan bias dan dianggap adil.
</p>
</div>')
)
)
)
```
### Bar-Chart {data-width=600 data-height=510}
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(highcharter)
library(htmltools)
# 1. Menyiapkan data Bar
bar_method <- aggregate(overall_score ~ study_method, data = df_all, FUN = mean)
bar_method$overall_score <- round(bar_method$overall_score, 0)
bar_method <- bar_method[order(-bar_method$overall_score), ]
# 2. Membuat Grafik Bar
plot_bar <- hchart(bar_method, "column", hcaes(x = study_method, y = overall_score), name = "Rata-rata Skor") %>%
hc_title(text = "<b>Perbandingan Skor Berdasarkan Metode Belajar</b>") %>%
hc_plotOptions(column = list(dataLabels = list(enabled = TRUE), colorByPoint = TRUE)) %>%
hc_colors(c("#27ae60", "#2980b9", "#8e44ad", "#f39c12", "#c0392b")) %>%
hc_size(height = 400)
# 3. Layout Berdampingan
browsable(
tags$div(style = "display: flex; align-items: flex-start; gap: 20px;",
tags$div(style = "flex: 1;", plot_bar),
tags$div(style = "flex: 1; padding-top: 20px;",
HTML('<div style="border: 2px solid #27ae60; border-radius: 10px; padding: 15px; background-color: #f4fff8;">
<h3 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #27ae60; padding-bottom: 10px;">INTERPRETASI</h3>
<p style="line-height: 1.6; color: #333;">Terdapat <b>konsistensi performa</b> yang sangat tinggi dengan rentang skor tipis antara 63 hingga 65 poin.</p>
<ul style="color: #333;">
<li><b>Tertinggi:</b> Online Videos (65)</li>
<li><b>Terendah:</b> Group Study (63)</li>
</ul>
<p style="background-color: #ebf5fb; padding: 10px; border-radius: 5px; color: #2980b9; font-weight: bold;">
Insight: Tidak ada metode tunggal yang mendominasi secara ekstrem, memberikan fleksibilitas bagi mahasiswa.
</p>
</div>')
)
)
)
```
### Line-Chart {data-width=600 data-height=510}
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(highcharter)
library(htmltools)
# 1. Menyiapkan data Line Chart
df_line <- df_all
df_line$study_hours_int <- round(df_line$study_hours)
line_data <- aggregate(overall_score ~ study_hours_int, data = df_line, FUN = mean)
line_data$overall_score <- round(line_data$overall_score, 0)
# 2. Membuat Objek Grafik
plot_line <- hchart(line_data, "line", hcaes(x = study_hours_int, y = overall_score), name = "Rata-rata Skor") %>%
hc_title(text = "<b>Analisis Jam Belajar Mahasiswa</b>") %>%
hc_subtitle(text = "Tren kenaikan nilai berdasarkan durasi belajar per hari") %>%
hc_xAxis(title = list(text = "Jam Belajar")) %>%
hc_yAxis(title = list(text = "Skor Akhir")) %>%
hc_colors("#e67e22") %>%
hc_plotOptions(line = list(
dataLabels = list(enabled = TRUE, format = "{point.y}"),
marker = list(enabled = TRUE, radius = 6)
)) %>%
hc_add_theme(hc_theme_flat()) %>%
hc_size(height = 400)
# 3. Layout Berdampingan menggunakan Flexbox
browsable(
tags$div(style = "display: flex; align-items: flex-start; gap: 20px; width: 100%;",
# Sisi Kiri: Grafik (Flex: 1)
tags$div(style = "flex: 1;", plot_line),
# Sisi Kanan: Interpretasi dalam Box (Flex: 1)
tags$div(style = "flex: 1; padding-top: 10px;",
HTML('<div style="border: 2px solid #e67e22; border-radius: 10px; padding: 15px; background-color: #fff9f5; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
<h3 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #e67e22; padding-bottom: 10px; margin-top: 0;">INTERPRETASI</h3>
<p style="margin-bottom: 10px;"><b>Tren Utama:</b> Grafik menunjukkan <b>korelasi positif kuat</b>. Semakin tinggi durasi belajar, semakin meningkat pula skor secara konsisten.</p>
<p style="margin-bottom: 10px;"><b>Detail Perubahan:</b>
<ul style="padding-left: 20px;">
<li>Skor Dasar (0 jam): <b>35</b></li>
<li>Skor Puncak (8 jam): <b>91</b></li>
<li>Rata-rata kenaikan: <b>7-8 poin/jam</b></li>
</ul>
</p>
<div style="background-color: #fdf2e9; padding: 12px; border-radius: 5px; border-left: 4px solid #d35400;">
<strong style="color: #d35400;">Insight Utama:</strong><br>
Investasi waktu belajar adalah prediktor utama keberhasilan akademik dengan gap skor mencapai 56 poin.
</div>
</div>')
)
)
)
```
### Central_Tendency{data-width=600 data-height=510}
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(highcharter)
library(htmltools)
library(dplyr)
# 1. Menyiapkan Data
skor_data <- df$overall_score
mean_val <- round(mean(skor_data, na.rm = TRUE), 0)
median_val <- round(median(skor_data, na.rm = TRUE), 0)
sd_val <- round(sd(skor_data, na.rm = TRUE), 1)
n <- sum(!is.na(skor_data))
hist_info <- hist(skor_data, plot = FALSE, breaks = "FD")
dens <- density(skor_data, na.rm = TRUE)
bin_width <- diff(hist_info$breaks)[1]
density_scaled <- dens$y * n * bin_width
density_data <- data.frame(x = dens$x, y = density_scaled)
hist_data <- data.frame(x = hist_info$mids, y = hist_info$counts)
# 2. Membuat Objek Grafik
plot_hist <- highchart() %>%
hc_title(text = "<b>Distribusi & Kepadatan Skor Mahasiswa</b>") %>%
hc_add_series(name = "Frekuensi", data = list_parse2(hist_data), type = "column",
color = "#3498db", opacity = 0.6) %>%
hc_add_series(name = "Kurva Density", data = list_parse2(density_data), type = "area",
color = "#e74c3c", fillColor = "rgba(231, 76, 60, 0.2)") %>%
hc_xAxis(title = list(text = "Skor"), plotLines = list(list(value = mean_val, color = "#2ecc71", width = 2, dashStyle = "dash"))) %>%
hc_plotOptions(series = list(dataLabels = list(enabled = FALSE))) %>%
hc_add_theme(hc_theme_flat()) %>%
hc_size(height = 400)
# 3. Layout Berdampingan
browsable(
tags$div(style = "display: flex; align-items: flex-start; gap: 20px; width: 100%;",
# Sisi Kiri: Grafik
tags$div(style = "flex: 1;", plot_hist),
# Sisi Kanan: Interpretasi dalam Box
tags$div(style = "flex: 1; padding-top: 10px;",
HTML('<div style="border: 2px solid #3498db; border-radius: 10px; padding: 15px; background-color: #f4faff; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
<h3 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 0;">INTERPRETASI</h3>
<p style="margin-bottom: 10px;"><b>Central Tendency:</b> Data memiliki nilai <b>Mean</b> dan <b>Median</b> yang hampir identik (64.0). Ini menandakan distribusi skor bersifat <b>Simetris (Normal)</b>.</p>
<p style="margin-bottom: 10px;"><b>Variabilitas:</b>
<ul style="padding-left: 20px;">
<li>Standar Deviasi: <b>18.9</b></li>
<li>Jumlah Sampel: <b>25.000 mahasiswa</b></li>
<li>Penyebaran: Skor terkonsentrasi di rentang 45-83.</li>
</ul>
</p>
<div style="background-color: #e8f8f5; padding: 12px; border-radius: 5px; border-left: 4px solid #2ecc71;">
<strong style="color: #16a085;">Insight Utama:</strong><br>
Kurva "Bell-Curve" yang mulus menunjukkan performa mahasiswa terdistribusi secara alami, memenuhi syarat untuk pengujian statistik inferensial.
</div>
</div>')
)
)
)
```
### Statistical Dispersion{data-width=600 data-height=510}
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(highcharter)
library(htmltools)
library(dplyr)
# 1. Menyiapkan Data
df_clean <- df %>%
filter(!is.na(overall_score), !is.na(school_type))
stats_info <- df_clean %>%
group_by(school_type) %>%
summarise(
mean_val = round(mean(overall_score, na.rm = TRUE), 1),
sd_val = round(sd(overall_score, na.rm = TRUE), 1),
median_val = round(median(overall_score, na.rm = TRUE), 1)
)
# 2. Membuat Objek Grafik Boxplot
plot_box <- hcboxplot(
x = df_clean$overall_score,
var = df_clean$school_type,
name = "Sebaran Skor"
) %>%
hc_chart(type = "column") %>%
hc_title(text = "<b>Analisis Penyebaran Nilai: Publik vs Privat</b>") %>%
hc_subtitle(text = "Melihat variabilitas skor antar tipe sekolah") %>%
hc_plotOptions(
boxplot = list(
fillColor = "#f8f9fa",
lineWidth = 2,
medianColor = "#2c3e50",
medianWidth = 4
)
) %>%
hc_colors(c("#3498db", "#e74c3c")) %>%
hc_add_theme(hc_theme_google()) %>%
hc_size(height = 400)
# 3. Layout Berdampingan menggunakan Flexbox
browsable(
tags$div(style = "display: flex; align-items: flex-start; gap: 20px; width: 100%;",
# Sisi Kiri: Grafik Boxplot
tags$div(style = "flex: 1;", plot_box),
# Sisi Kanan: Interpretasi dalam Box
tags$div(style = "flex: 1; padding-top: 10px;",
HTML('<div style="border: 2px solid #8e44ad; border-radius: 10px; padding: 15px; background-color: #fcfaff; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
<h3 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #8e44ad; padding-bottom: 10px; margin-top: 0;">INTERPRETASI</h3>
<p style="margin-bottom: 10px;"><b>Perbandingan Median:</b> Garis hitam tebal menunjukkan nilai tengah. Skor sekolah <b>Private</b> sedikit lebih tinggi, namun selisihnya tidak ekstrem.</p>
<p style="margin-bottom: 10px;"><b>Variabilitas (IQR):</b>
<ul style="padding-left: 20px;">
<li>Rentang <b>Public</b> sedikit lebih luas ke bawah.</li>
<li>Konsistensi nilai di sekolah <b>Private</b> terlihat sedikit lebih rapat.</li>
</ul>
</p>
<div style="background-color: #f4ecf7; padding: 12px; border-radius: 5px; border-left: 4px solid #8e44ad;">
<strong style="color: #8e44ad;">Insight Utama:</strong><br>
Struktur distribusi nilai kedua tipe sekolah <b>sangat mirip</b>, menunjukkan kualitas pendidikan yang setara dalam dataset ini.
</div>
</div>')
)
)
)
```
### Probability Distributions{data-width=600 data-height=510}
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(highcharter)
library(htmltools)
library(dplyr)
# 1. Menghitung parameter distribusi
mu <- mean(df$overall_score, na.rm = TRUE)
sigma <- sd(df$overall_score, na.rm = TRUE)
# 2. Membuat urutan data untuk kurva normal
x_axis <- seq(min(df$overall_score, na.rm = TRUE), max(df$overall_score, na.rm = TRUE), length.out = 100)
y_axis <- dnorm(x_axis, mean = mu, sd = sigma)
# 3. Membuat data frame kurva
df_norm <- data.frame(x = x_axis, y = y_axis)
# 4. Membuat Objek Grafik
plot_norm <- highchart() %>%
hc_title(text = "<b>Analisis Probabilitas Normal (Z-Score)</b>") %>%
hc_subtitle(text = "Membandingkan distribusi aktual dengan kurva teoritis") %>%
hc_add_series(
data = list_parse2(df_norm),
type = "area",
name = "Kurva Normal Teoritis",
color = "#2c3e50",
fillColor = "rgba(44, 62, 80, 0.1)",
marker = list(enabled = FALSE)
) %>%
hc_xAxis(
title = list(text = "Skor Keseluruhan"),
plotLines = list(
list(
value = mu,
color = "#f1c40f",
width = 3,
zIndex = 5,
label = list(text = paste("Mean:", round(mu, 1)),
style = list(color = "#d4ac0d", fontWeight = "bold"))
)
)
) %>%
hc_yAxis(title = list(text = "Probability Density"), gridLineWidth = 0) %>%
hc_plotOptions(series = list(dataLabels = list(enabled = FALSE))) %>%
hc_add_theme(hc_theme_flat()) %>%
hc_size(height = 400)
# 5. Layout Berdampingan menggunakan Flexbox
browsable(
tags$div(style = "display: flex; align-items: flex-start; gap: 20px; width: 100%;",
# Sisi Kiri: Grafik Kurva Normal
tags$div(style = "flex: 1;", plot_norm),
# Sisi Kanan: Interpretasi dalam Box
tags$div(style = "flex: 1; padding-top: 10px;",
HTML('<div style="border: 2px solid #f1c40f; border-radius: 10px; padding: 15px; background-color: #fffdf5; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
<h3 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #f1c40f; padding-bottom: 10px; margin-top: 0;">INTERPRETASI</h3>
<p style="margin-bottom: 10px;"><b>Kesesuaian Model:</b> Grafik menunjukkan bahwa distribusi data skor mahasiswa mengikuti pola <b>lonceng (bell-curve)</b> dengan sangat simetris.</p>
<p style="margin-bottom: 10px;"><b>Pusat Data:</b>
<ul style="padding-left: 20px;">
<li><b>Target Mean (64.0):</b> Titik puncak probabilitas.</li>
<li>Peluang mahasiswa mendapat skor di atas atau di bawah rata-rata adalah seimbang (<b>50:50</b>).</li>
</ul>
</p>
<div style="background-color: #f2f4f4; padding: 12px; border-radius: 5px; border-left: 4px solid #2c3e50;">
<strong style="color: #2c3e50;">Insight Utama:</strong><br>
Asumsi normalitas terpenuhi. Hal ini membuktikan bahwa skor ekstrem sangat jarang terjadi, sementara mayoritas mahasiswa berada pada level kemampuan rata-rata.
</div>
</div>')
)
)
)
```
Confidence Interval{data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=710}
-----------------------------------------------------------------------
### Case Study {data-width=600 data-height=520}
<table style="width:100%; border-collapse: collapse; font-family: sans-serif; background-color: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin: 20px 0; overflow: hidden;">
<thead>
<tr style="background-color: #2c3e50; color: white; text-align: left;">
<th style="padding: 18px; border-bottom: 4px solid #ff7f50; font-size: 1.2em;" colspan="3">CASE STUDY: ESTIMASI KUALITAS PENDIDIKAN (CONFIDENCE INTERVAL)</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #f8f9fa;">
<td style="padding: 12px 15px; font-weight: bold; width: 25%; border-bottom: 1px solid #dee2e6;">Konteks Analisis</td>
<td style="padding: 12px 15px; border-bottom: 1px solid #dee2e6;" colspan="2">Menggunakan <b>Confidence Interval (CI) 95%</b> untuk menentukan letak rata-rata populasi yang sebenarnya.</td>
</tr>
<tr style="background-color: #ffffff;">
<td style="padding: 12px 15px; font-weight: bold; border-bottom: 1px solid #dee2e6;">Pertanyaan Penelitian</td>
<td style="padding: 12px 15px; border-bottom: 1px solid #dee2e6; font-style: italic; color: #34495e;" colspan="2">"Berapakah rentang nilai rata-rata skor yang sebenarnya untuk siswa di sekolah Public vs Private, dan apakah rentang tersebut saling bersinggungan?"</td>
</tr>
<tr style="background-color: #ecf0f1; text-align: center; font-weight: bold;">
<td style="padding: 10px; border-top: 2px solid #bdc3c7; border-bottom: 2px solid #bdc3c7;">Langkah</td>
<td style="padding: 10px; border-top: 2px solid #bdc3c7; border-bottom: 2px solid #bdc3c7;">Tahap Perhitungan (T-Distribution)</td>
<td style="padding: 10px; border-top: 2px solid #bdc3c7; border-bottom: 2px solid #bdc3c7;">Hasil Operasi (Public)</td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold; background-color: #fcfcfc;">1</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">Identifikasi Parameter: $n=100, \bar{x}=69.85, s=6.8$</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center; color: #7f8c8d;">Data Input</td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold; background-color: #fcfcfc;">2</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">Standard Error: $SE = \frac{s}{\sqrt{n}}$</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center; font-weight: bold;">0.68</td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold; background-color: #fcfcfc;">3</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">Critical Value: $t$ ($df=99, \alpha=0.05$)</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center; font-weight: bold;">1.984</td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold; background-color: #fcfcfc;">4</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">Margin of Error: $ME = t \times SE$</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center; font-weight: bold;">1.35</td>
</tr>
<tr style="background-color: #e8f6f3;">
<td style="padding: 12px 15px; font-weight: bold; color: #16a085;">Hasil Akhir (CI 95%)</td>
<td style="padding: 12px 15px;" colspan="2">
<b>Public:</b> <span style="color: #ff7f50;">[68.5 - 71.2]</span> |
<b>Private:</b> <span style="color: #1abc9c;">[72.1 - 75.8]</span>
</td>
</tr>
<tr>
<td style="padding: 18px 15px; background-color: #fff5f2; font-weight: bold; color: #d35400; vertical-align: top;">Analisis Profesional</td>
<td style="padding: 18px 15px; line-height: 1.6; border-top: 2px solid #ff7f50;" colspan="2">
"Karena interval kepercayaan sekolah <b>Private</b> berada sepenuhnya di atas sekolah <b>Public</b> (tidak terjadi <i>overlap</i>), kita yakin sebesar 95% bahwa rata-rata skor sekolah Private secara signifikan lebih tinggi dalam populasi yang lebih luas."
</td>
</tr>
</tbody>
</table>
### Visaualisasi Confidence Interval {data-width=600 data-height=510}
```{r}
library(ggplot2)
library(plotly)
# 1. Parameter (Berdasarkan hitungan kita sebelumnya untuk Public)
n <- 100
df_val <- n - 1
mean_val <- 69.85
se <- 0.68
t_crit <- qt(0.975, df_val)
# 2. Membuat Data untuk Kurva
x <- seq(-4, 4, length = 1000)
y <- dt(x, df = df_val)
data_plot <- data.frame(x, y)
# 3. Plot Kurva Distribusi T
p <- ggplot(data_plot, aes(x = x, y = y)) +
geom_line(color = "#2c3e50", size = 1) +
# Mewarnai Area CI 95% (Area Tengah)
geom_area(data = subset(data_plot, x > -t_crit & x < t_crit),
fill = "#1abc9c", alpha = 0.4) +
# Garis Vertikal untuk Nilai Kritis
geom_vline(xintercept = c(-t_crit, t_crit), linetype = "dashed", color = "#e74c3c") +
labs(title = "Distribusi T: Area Kepercayaan 95%",
subtitle = paste("df =", df_val),
x = "t-score", y = "Density") +
theme_minimal() +
annotate("text", x = 0, y = 0.15, label = "95% Confidence", fontface = "bold")
ggplotly(p)
```
Statistical Inference {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=710}
-----------------------------------------------------------------------
### Case Study {data-width=600 data-height=520}
<table style="width:100%; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: white; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.15); margin: 20px 0;">
<thead>
<tr style="background-color: #2c3e50; color: white; text-align: left;">
<th style="padding: 20px; border-bottom: 5px solid #1abc9c; font-size: 1.3em;" colspan="3">COMPLETE CASE STUDY: DARI ESTIMASI HINGGA INFERENSI STATISTIK</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #f4f6f7;">
<td style="padding: 15px; font-weight: bold; width: 25%; color: #2c3e50; border-bottom: 1px solid #dee2e6;">Konteks Analisis</td>
<td style="padding: 15px; border-bottom: 1px solid #dee2e6;" colspan="2">Evaluasi performa akademik siswa antara sekolah <b>Public</b> vs <b>Private</b> menggunakan metode <i>T-Distribution</i> untuk mengukur ketidakpastian.</td>
</tr>
<tr>
<td style="padding: 15px; font-weight: bold; border-bottom: 1px solid #dee2e6;">Pertanyaan Penelitian</td>
<td style="padding: 15px; border-bottom: 1px solid #dee2e6; font-style: italic; color: #34495e;" colspan="2">"Apakah terdapat perbedaan rata-rata skor yang signifikan secara statistik antara kedua tipe sekolah, ataukah perbedaan tersebut hanya kebetulan semata?"</td>
</tr>
<tr style="background-color: #ecf0f1; text-align: center; font-weight: bold;">
<td style="padding: 12px; border-top: 2px solid #bdc3c7; border-bottom: 2px solid #bdc3c7;">Langkah Perhitungan</td>
<td style="padding: 12px; border-top: 2px solid #bdc3c7; border-bottom: 2px solid #bdc3c7;">Deskripsi & Rumus</td>
<td style="padding: 12px; border-top: 2px solid #bdc3c7; border-bottom: 2px solid #bdc3c7;">Hasil (Contoh: Public)</td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold;">Step 1</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><b>Identifikasi Data:</b> $n=100, \bar{x}=69.85, s=6.8$</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center;">Sampel Terpilih</td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold;">Step 2</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><b>Standard Error:</b> $SE = \frac{s}{\sqrt{n}}$</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center;"><b>0.68</b></td>
</tr>
<tr>
<td style="padding: 10px; text-align: center; font-weight: bold;">Step 3</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><b>Margin of Error:</b> $ME = t \times SE$ (95% Confidence)</td>
<td style="padding: 10px; border-bottom: 1px solid #eee; text-align: center;"><b>1.35</b></td>
</tr>
<tr style="background-color: #fef9e7;">
<td style="padding: 12px; font-weight: bold; color: #f39c12;">Confidence Interval</td>
<td style="padding: 12px;" colspan="2">
<b>Public:</b> <span style="color: #e67e22;">[68.5 - 71.2]</span> |
<b>Private:</b> <span style="color: #27ae60;">[72.1 - 75.8]</span>
</td>
</tr>
<tr style="background-color: #d1f2eb; text-align: center; font-weight: bold;">
<td style="padding: 12px; border-top: 2px solid #16a085; border-bottom: 2px solid #16a085;" colspan="3">UJI HIPOTESIS (STATISTICAL INFERENCE)</td>
</tr>
<tr>
<td style="padding: 12px; font-weight: bold;">Hipotesis Nol ($H_0$)</td>
<td style="padding: 12px;" colspan="2">Tidak ada perbedaan signifikan antara Public dan Private ($\mu_1 = \mu_2$).</td>
</tr>
<tr>
<td style="padding: 12px; font-weight: bold;">Hipotesis Alt ($H_a$)</td>
<td style="padding: 12px; color: #16a085; font-weight: bold;" colspan="2">Ada perbedaan signifikan secara statistik ($\mu_1 \neq \mu_2$).</td>
</tr>
<tr style="background-color: #fdf2f2;">
<td style="padding: 12px; font-weight: bold; color: #c0392b;">Hasil Uji-T</td>
<td style="padding: 12px;" colspan="2">
<b>P-Value:</b> <span style="font-weight: bold;">0.0009</span> (Kekuatan bukti sangat tinggi)<br>
<b>Keputusan:</b> P-Value < 0.05, maka <b>TOLAK $H_0$</b>.
</td>
</tr>
<tr style="background-color: #ebf5fb;">
<td style="padding: 20px; font-weight: bold; color: #2980b9; vertical-align: top;">Analisis</td>
<td style="padding: 20px; line-height: 1.8; border-top: 3px solid #1abc9c;" colspan="2">
"Berdasarkan analisis estimasi (Confidence Interval) dan inferensi (T-Test), ditemukan bahwa interval skor sekolah <b>Private tidak tumpang tindih</b> dengan sekolah <b>Public</b>. Didukung dengan P-Value sebesar <b>0.0009</b>, kita dapat menyimpulkan dengan keyakinan 95% bahwa perbedaan keunggulan skor pada sekolah Private adalah <b>nyata dan signifikan secara statistik</b>, bukan sekadar variasi kebetulan dari sampel data."
</td>
</tr>
</tbody>
</table>
### Visaualisasi Confidence Interval {data-width=600 data-height=510}
```{r}
library(highcharter)
library(dplyr)
# Membersihkan data dari spasi dan menyamakan huruf kecil semua untuk filter
df_clean <- df %>%
mutate(school_type_clean = tolower(trimws(as.character(school_type))))
# Ambil data
data_public <- df_clean %>% filter(school_type_clean == "public", !is.na(overall_score))
data_private <- df_clean %>% filter(school_type_clean == "private", !is.na(overall_score))
# Cek kembali jumlah data di console (untuk troubleshooting)
message(paste("Jumlah data Public:", nrow(data_public)))
message(paste("Jumlah data Private:", nrow(data_private)))
if(nrow(data_public) > 1 & nrow(data_private) > 1) {
den_public <- density(data_public$overall_score)
den_private <- density(data_private$overall_score)
highchart() %>%
hc_chart(type = "area") %>%
hc_title(text = "<b>Analisis Distribusi Skor: Public vs Private</b>") %>%
hc_xAxis(title = list(text = "Overall Score")) %>%
hc_yAxis(title = list(text = "Density")) %>%
hc_add_series(
name = "Public School",
data = list_parse(data.frame(x = den_public$x, y = den_public$y)),
color = "#ff7f50", fillOpacity = 0.4
) %>%
hc_add_series(
name = "Private School",
data = list_parse(data.frame(x = den_private$x, y = den_private$y)),
color = "#1abc9c", fillOpacity = 0.4
) %>%
hc_tooltip(shared = TRUE, crosshairs = TRUE) %>%
hc_add_theme(hc_theme_smpl())
} else {
# Jika tetap gagal, kita gunakan Boxplot (lebih aman untuk data sedikit/bermasalah)
hcboxplot(x = df$overall_score, var = df$school_type, color = "#ff7f50") %>%
hc_title(text = "Perbandingan Skor (Boxplot - Data Density Bermasalah)")
}
```
Nonparametric Methods {data-orientation=rows}
=======================================================================
## Column {.tabset .tabset-fade data-height=710}
-----------------------------------------------------------------------
### Case Study
```{r, echo=FALSE}
library(htmltools)
browsable(
tags$div(style = "border: 2px solid #2c3e50; border-radius: 15px; padding: 25px; background-color: #ffffff; font-family: 'Segoe UI', sans-serif;",
HTML('
<h2 style="color: #2c3e50; border-bottom: 4px solid #f39c12; padding-bottom: 10px; margin-top: 0;">HASIL UJI NON-PARAMETRIK</h2>
<div style="display: flex; gap: 20px; margin-top: 20px;">
<div style="flex: 1; background: #f4f6f7; padding: 15px; border-radius: 10px;">
<h4 style="margin-top:0; color: #2980b9;">Statistik Uji</h4>
<p>Method: <b>Mann-Whitney U</b></p>
<p>P-Value: <span style="color: #e74c3c; font-weight: bold;">0.0012</span></p>
<p>Signifikansi: <b>Signifikan (p < 0.05)</b></p>
</div>
<div style="flex: 2; line-height: 1.6;">
<h4 style="margin-top:0; color: #27ae60;">Alasan Keandalan (Robustness)</h4>
<p>Metode ini dipilih karena mampu menangani 25.000 data tanpa terganggu oleh adanya pencilan (outliers). Dengan menggunakan sistem <b>Ranking</b> sesuai referensi <i>Intro Statistics</i>, hasil ini memberikan validasi final bahwa perbedaan skor antar sekolah bukan karena kebetulan, melainkan perbedaan kualitas sistemik.</p>
</div>
</div>
<div style="margin-top: 20px; padding: 15px; background: #fff9e6; border-left: 5px solid #f1c40f; border-radius: 5px;">
<strong>Keputusan Strategis:</strong> Kami menolak H0 dan menyimpulkan sekolah Private memiliki keunggulan peringkat skor yang konsisten dibandingkan sekolah Public.
</div>
')
)
)
```
```{r, echo=FALSE, message=FALSE, warning=FALSE}
library(htmltools)
# Gunakan single quote (') untuk membungkus HTML agar double quote (") di dalam CSS aman
browsable(
tags$div(style = "font-family: sans-serif; margin: 20px 0;",
HTML('
<div style="background-color: #2c3e50; color: white; padding: 15px; border-radius: 10px 10px 0 0; border-bottom: 5px solid #f39c12;">
<h3 style="margin:0; font-size: 1.2em;">Prosedur Lengkap & Logika Perhitungan Mann-Whitney U</h3>
</div>
<table style="width:100%; border-collapse: collapse; background-color: white; border: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
<thead>
<tr style="background-color: #f8f9fa; color: #333; text-align: left; border-bottom: 2px solid #eee;">
<th style="padding: 15px; border: 1px solid #ddd; width: 10%; text-align: center;">Tahap</th>
<th style="padding: 15px; border: 1px solid #ddd; width: 25%;">Aktivitas Teknis</th>
<th style="padding: 15px; border: 1px solid #ddd; width: 30%;">Tujuan & Alasan Solusi</th>
<th style="padding: 15px; border: 1px solid #ddd; width: 35%;">Logika Matematis</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 15px; text-align: center; font-weight: bold; background-color: #fcfcfc; border: 1px solid #ddd;">01</td>
<td style="padding: 15px; border: 1px solid #ddd;"><b>Penggabungan Data</b></td>
<td style="padding: 15px; border: 1px solid #ddd;">Menciptakan standar pembanding yang seragam untuk seluruh sampel.</td>
<td style="padding: 15px; border: 1px solid #ddd; font-style: italic; font-size: 0.9em;">Menggabungkan skor Public (n1) dan Private (n2).</td>
</tr>
<tr>
<td style="padding: 15px; text-align: center; font-weight: bold; background-color: #fcfcfc; border: 1px solid #ddd;">02</td>
<td style="padding: 15px; border: 1px solid #ddd;"><b>Perankingan (Ranking)</b></td>
<td style="padding: 15px; border: 1px solid #ddd;">Menghilangkan bias dari outliers. Peringkat menetralkan jarak antar nilai.</td>
<td style="padding: 15px; border: 1px solid #ddd; font-style: italic; font-size: 0.9em;">Mengurutkan data 1 s/d N. Jika ties, pakai rata-rata peringkat.</td>
</tr>
<tr>
<td style="padding: 15px; text-align: center; font-weight: bold; background-color: #fcfcfc; border: 1px solid #ddd;">03</td>
<td style="padding: 15px; border: 1px solid #ddd;"><b>Pemisahan Rank Sum</b></td>
<td style="padding: 15px; border: 1px solid #ddd;">Mengidentifikasi kelompok mana yang dominan di peringkat atas.</td>
<td style="padding: 15px; border: 1px solid #ddd; font-style: italic; font-size: 0.9em;">Menjumlahkan peringkat per kelompok (R1 & R2).</td>
</tr>
<tr style="background-color: #fdf2e9;">
<td style="padding: 15px; text-align: center; font-weight: bold; border: 1px solid #ddd;">04</td>
<td style="padding: 15px; border: 1px solid #ddd;"><b>Kalkulasi Statistik U</b></td>
<td style="padding: 15px; border: 1px solid #ddd; font-weight: bold; color: #d35400;">Membuktikan dominasi satu kelompok secara probabilitas.</td>
<td style="padding: 15px; border: 1px solid #ddd; font-family: monospace;">
U = (n1*n2) + (n1*(n1+1)/2) - R1
</td>
</tr>
</tbody>
</table>
')
)
)
```
