Cara membuat diagram garis di html

Bagan garis (alias plot garis, grafik garis) menggunakan titik-titik yang dihubungkan oleh segmen garis dari kiri ke kanan untuk menunjukkan perubahan nilai. Sumbu horizontal menggambarkan perkembangan berkelanjutan, sering kali dari waktu, sedangkan sumbu vertikal melaporkan nilai untuk metrik yang diminati di seluruh perkembangan tersebut

Cara membuat diagram garis di html

Bagan garis di atas menunjukkan nilai tukar antara dua mata uang fiktif selama periode enam bulan. Seiring berjalannya waktu dari kiri ke kanan, poin menghubungkan nilai tukar harian. Kita dapat membaca dari kemiringan umum garis dan posisi vertikalnya bahwa lajunya meningkat dari sekitar 0. 75 ke 0. 78 antara Maret dan awal April, kemudian turun secara bertahap menjadi sekitar 0. 765 pada akhir Mei dan Juni

Kapan Anda harus menggunakan bagan garis

Anda akan menggunakan bagan garis saat ingin menekankan perubahan nilai untuk satu variabel (diplot pada sumbu vertikal) untuk nilai kontinu dari variabel kedua (diplot pada horizontal). Penekanan pada pola perubahan ini dijual dengan segmen garis yang bergerak secara konsisten dari kiri ke kanan dan mengamati kemiringan garis yang bergerak naik atau turun.

Pada sumbu horizontal, Anda memerlukan variabel yang menggambarkan nilai kontinu yang memiliki interval pengukuran yang teratur. Sangat umum, variabel ini bersifat sementara, menghasilkan pengamatan setiap menit, jam, hari, minggu, atau bulan. Pilihan ukuran interval, atau bin, adalah keputusan yang biasanya perlu dibuat oleh analis untuk data, daripada menjadi karakteristik data yang melekat.

Pada sumbu vertikal, Anda akan melaporkan nilai variabel numerik kedua untuk titik yang termasuk dalam setiap interval yang ditentukan oleh variabel sumbu horizontal. Seringkali, ini akan menjadi ringkasan statistik seperti nilai total atau rata-rata di seluruh peristiwa dalam setiap kotak

Beberapa garis juga dapat diplot dalam satu bagan garis untuk membandingkan tren antar rangkaian. Kasus penggunaan umum untuk ini adalah mengamati perincian data di berbagai subkelompok. Kemampuan untuk memplot beberapa garis juga menyediakan bagan garis kasus penggunaan khusus yang biasanya tidak dipilih. Biasanya, kita akan menggunakan histogram untuk menggambarkan distribusi frekuensi dari satu variabel numerik. Namun, karena sulit untuk memplot dua histogram pada sumbu yang sama, bagan garis berfungsi sebagai mode perbandingan yang baik sebagai pengganti. Bagan garis yang digunakan untuk menggambarkan distribusi frekuensi sering disebut poligon frekuensi

Cara membuat diagram garis di html
Bagan garis ini menunjukkan bahwa ada lebih banyak perjalanan pelanggan daripada tamu, tetapi rata-rata tamu cenderung melakukan perjalanan yang lebih lama

Contoh struktur data

TanggalTamuPelanggan2019-05-01191032019-05-02221052019-05-0320982019-05-042683………

Untuk menggunakan bagan garis, data seringkali perlu digabungkan ke dalam tabel dengan dua kolom atau lebih. Nilai di kolom pertama menunjukkan posisi titik pada sumbu horizontal untuk setiap garis yang akan diplot. Setiap kolom berikutnya menunjukkan posisi vertikal untuk titik-titik dari satu garis

Alat tertentu membuat bagan garis dari format data yang berbeda di mana tiga kolom diharapkan terlepas dari berapa banyak garis yang akan diplot. Dalam kasus ini, kolom menentukan nilai horizontal, nilai vertikal, dan baris mana yang akan ditetapkan ke setiap baris

TanggalJenis PenggunaPerjalanan2019-03-01Tamu232019-03-01Pelanggan1022019-03-02Tamu242019-03-03Pelanggan77………

Praktik terbaik untuk menggunakan bagan garis

Pilih interval pengukuran yang sesuai

Aspek penting dalam membuat bagan garis adalah memilih interval atau ukuran bin yang tepat. Untuk data temporal, interval pengukuran yang terlalu luas dapat berarti terlalu lama untuk melihat ke mana tren data mengarah, menyembunyikan sinyal yang berguna. Di sisi lain, interval pengukuran yang terlalu pendek hanya dapat mengungkapkan kebisingan daripada sinyal

Menguji interval yang berbeda atau mengandalkan pengetahuan domain Anda tentang data apa yang sedang direkam dapat memberi tahu Anda tentang pilihan ukuran nampan yang bagus. Dimungkinkan juga untuk menggunakan beberapa baris, dengan satu baris untuk interval berbutir halus, dan kemudian baris kedua untuk tren keseluruhan, rata-rata di atas jendela bergulir

Cara membuat diagram garis di html

Jangan plot terlalu banyak garis

Dengan kekuatan yang besar datanglah tanggung jawab yang besar, jadi meskipun ada kapasitas teknis untuk menempatkan banyak garis ke dalam satu bagan garis, merupakan ide bagus untuk berhati-hati dalam jumlah data yang Anda rencanakan. Aturan praktis yang baik adalah membatasi diri Anda hingga lima baris atau kurang, agar plot tidak terlihat seperti kusut yang tidak dapat dibaca. Namun, jika garis dipisahkan dengan baik, Anda masih dapat memplot semua nilai yang ingin dilacak

Cara membuat diagram garis di html

Jika Anda merasa perlu memplot lebih banyak garis daripada yang dapat dibaca dalam satu sumbu, maka Anda dapat mempertimbangkan untuk membagi plot menjadi kisi-kisi bagan garis yang lebih kecil. Akan lebih sulit untuk melihat detail dalam plot ini, jadi ada baiknya mengurutkannya berdasarkan beberapa karakteristik penting (seperti rata-rata atau nilai akhir) untuk membantu menarik poin-poin penting. Jika Anda menggunakan alat yang memungkinkan plot interaktif, alternatif lain adalah dapat menyorot setiap garis atau garis abu-abu agar tidak fokus seperti yang diinginkan pembaca.

Penyalahgunaan umum

Benar-benar menggunakan baseline nilai nol

Meskipun garis dasar nol untuk sumbu vertikal menjadi persyaratan untuk bagan batang dan histogram, Anda tidak perlu menyertakan garis dasar nol untuk bagan garis. Ingatlah bahwa tujuan utama bagan garis adalah untuk menekankan perubahan nilai, bukan besarnya nilai itu sendiri. Dalam kasus di mana garis nol tidak berarti atau berguna, tidak apa-apa untuk memperbesar rentang sumbu vertikal ke dalam apa yang akan membuat perubahan nilai paling informatif

Cara membuat diagram garis di html

Namun, ada satu kasus penggunaan di mana baseline nol masih diperlukan. Ketika bagan garis digunakan untuk menampilkan distribusi frekuensi, maka bagan tersebut digunakan dalam kapasitas yang setara dengan bagan batang dan histogram. Dengan demikian, ini akan mengikuti persyaratan yang sama yaitu perlu menyertakan garis dasar nilai nol sebagai jangkar untuk ketinggian bagan garis.

Gagal mengidentifikasi celah yang tidak rata antar titik

Ketika bagan garis tidak memiliki informasi untuk tempat sampah tertentu, celah dalam catatan dapat diinterpretasikan sebagai nilai hantu jika garis tersebut tidak menyertakan titik yang berbeda pada setiap pengamatan. Ketika tidak banyak titik untuk diplot, coba tunjukkan semua titik dan bukan hanya garisnya. Jika menyertakan poin akan memperkeruh interpretasi plot, alternatif lain adalah menyertakan celah di baris untuk menunjukkan di mana ada nilai yang hilang

Cara membuat diagram garis di html

Menginterpolasi kurva antar titik

Dalam bagan garis standar, setiap titik dihubungkan ke titik berikutnya dengan segmen garis lurus, dari awal hingga akhir. Namun, mungkin ada godaan estetis untuk mencoba menghubungkan semua titik dengan lancar, menyesuaikan kurva yang melewati semua titik sekaligus. Anda harus benar-benar menahan godaan ini. Seperti yang terlihat pada contoh di bawah ini, mencoba penyesuaian semacam ini pasti akan mendistorsi persepsi tren dalam data. Arah dan kecuraman garis seharusnya menjadi indikasi perubahan nilai, sehingga kurva tersebut mungkin berakhir dengan adanya titik data tambahan antara pengukuran sebenarnya yang tidak ada.

Cara membuat diagram garis di html

Menggunakan sumbu ganda yang menyesatkan

Contoh bagan garis dengan banyak garis sejauh ini memiliki setiap garis menjadi bagian dari domain yang sama, dan dengan demikian dapat diplot pada sumbu yang sama. Namun, tidak ada yang membatasi setiap baris untuk menggambarkan nilai pada unit yang sama. Ketika plot garis mencakup dua seri, masing-masing menggambarkan ringkasan dari variabel yang berbeda, maka kita berakhir dengan plot sumbu ganda

Masalah dengan plot sumbu ganda adalah dapat dengan mudah dimanipulasi menjadi menyesatkan. Bergantung pada bagaimana masing-masing sumbu diskalakan, hubungan yang dirasakan antara dua garis dapat diubah. Dalam dua plot di bawah ini, jumlah uji coba dan langganan mingguan diplot dalam plot sumbu ganda. Datanya persis sama untuk masing-masing, tetapi karena pilihan penskalaan vertikal untuk setiap variabel, hubungan yang disimpulkan antara variabel akan berubah.

Cara membuat diagram garis di html

Sementara banyak alat visualisasi mampu membuat bagan sumbu ganda, rekomendasi umum menyarankan hal ini, terlepas dari apakah kedua sumbu berada di domain yang sama atau terpisah. Alih-alih, membagi dua garis menjadi plot terpisah masih memungkinkan pola umum perubahan diamati untuk kedua variabel, sekaligus mengurangi godaan untuk membandingkannya dengan cara yang menyesatkan.

Cara membuat diagram garis di html

Opsi bagan garis umum

Sertakan baris tambahan untuk menunjukkan ketidakpastian

Saat kami memiliki garis yang menggambarkan ringkasan statistik seperti rata-rata atau median, kami juga dapat memiliki opsi untuk ditambahkan ke plot untuk menampilkan ketidakpastian atau variabilitas data di setiap titik yang diplot. Salah satu cara untuk melakukan ini adalah dengan menambahkan bilah kesalahan di setiap titik untuk menunjukkan standar deviasi atau ukuran ketidakpastian lainnya. Alternatif lain adalah menambahkan garis pendukung di atas atau di bawah garis untuk menunjukkan batas-batas tertentu pada data. Garis-garis ini mungkin dirender sebagai bayangan untuk menunjukkan nilai data yang paling umum, seperti pada contoh di bawah ini

Cara membuat diagram garis di html

Sparkline

Kasus penggunaan khusus untuk bagan garis adalah grafik mini. Grafik mini pada dasarnya adalah bagan garis kecil, dibuat untuk disejajarkan dengan teks atau di samping banyak nilai dalam tabel. Karena ukurannya yang kecil, itu tidak akan menyertakan label apa pun. Statistik dapat ditempatkan di sebelah grafik mini untuk menunjukkan nilai awal dan akhir, atau mungkin nilai minimum atau maksimum. Poin utama dari grafik mini adalah untuk menunjukkan perubahan selama periode waktu tertentu, dan sering terlihat dalam konteks keuangan

Cara membuat diagram garis di html

Plot punggung bukit

Satu jenis bagan varian untuk bagan garis dengan banyak garis adalah plot ridgeline. Dalam plot garis bubungan, setiap garis diplot pada sumbu yang berbeda, sedikit diimbangi satu sama lain secara vertikal. Offset kecil ini dapat menghemat ruang dibandingkan dengan faset plot yang lengkap. Seperti grafik mini, tanda sumbu vertikal biasanya dihindari. akan sulit untuk membaca nilai tersebut pada sumbu yang berbeda. Plot Ridgeline terutama digunakan untuk membandingkan banyak kelompok pada distribusi frekuensinya. Ini sangat berguna ketika pola yang jelas terlihat ketika garis diurutkan dengan cara tertentu

Cara membuat diagram garis di html

Plot terkait

Grafik batang

Jika variabel yang ingin kita tampilkan pada sumbu horizontal bukan numerik atau terurut, melainkan kategorikal, maka kita perlu menggunakan bagan batang daripada bagan garis. Batang dalam bagan batang biasanya dipisahkan oleh celah kecil, yang membantu menekankan sifat diskrit dari kategori yang diplot. Perhatikan, bagaimanapun, ketika sumbu horizontal kami numerik atau terurut, kami tidak dibatasi untuk menggunakan bagan batang, seperti yang terlihat pada contoh di bawah ini

Cara membuat diagram garis di html
Kiri. Bagan batang di atas grup kategorikal. Benar. Diagram batang di atas grup temporal

Plot titik

Jenis bagan lain yang dapat kita gunakan saat variabel sumbu horizontal adalah kategorikal adalah petak titik, atau petak titik Cleveland. Plot titik seperti plot garis, hanya saja tidak ada segmen garis yang menghubungkan titik-titik yang berurutan. Kurangnya segmen garis ini membebaskan titik dari perkembangan berurutannya, sehingga urutan label dan titik dapat disesuaikan secara bebas seperti bagan batang. Keuntungan utama menggunakan plot titik dibandingkan bagan batang adalah bahwa plot titik, seperti diagram garis, tidak wajib menyertakan garis dasar nol. Jika kita memiliki nilai di atas level variabel kategorikal, tetapi nilai terkait tidak memiliki garis dasar nol yang bermakna, maka plot titik dapat menjadi opsi jenis bagan yang baik.

Cara membuat diagram garis di html

Histogram

Saat sumbu vertikal bagan garis menggambarkan informasi tentang distribusi frekuensi, kami memiliki opsi untuk memvisualisasikan data sebagai histogram. Salah satu manfaat utama dari histogram adalah bahwa bar adalah tampilan frekuensi yang lebih konsisten dalam setiap bin. Penilaian frekuensi bisa menyesatkan dalam bagan garis, terutama di puncak dan palung distribusi. Namun, bagan garis memang memiliki satu keunggulan untuk memvisualisasikan distribusi frekuensi. jika kita perlu membandingkan dua grup yang berbeda, ini sangat sulit untuk sebuah histogram. Seperti yang terlihat di bagian sebelumnya saat menggunakan bagan garis, kita cukup memplot garis kedua kelompok pada sumbu yang sama dengan sedikit masalah.

Cara membuat diagram garis di html

Kurva kepadatan

Alternatif lain untuk bagan garis berbasis frekuensi adalah kurva kepadatan, atau perkiraan kepadatan kernel (KDE). Sementara bagan garis menggabungkan jumlah frekuensi berdasarkan bin ke dalam satu titik, KDE menggabungkan kontribusi setiap titik secara berkelanjutan. Dalam KDE, setiap titik menyumbangkan sebongkah kecil volume yang berpusat di sekitar nilai sebenarnya (kernel tituler); . Karena ada begitu banyak pilihan untuk bentuk kernel, estimasi densitas kernel biasanya dicadangkan untuk pendekatan pemrograman untuk visualisasi data

Cara membuat diagram garis di html

Bagan wilayah

Perpanjangan ke bagan garis melibatkan penambahan bayangan antara garis dan garis dasar nol, yang disebut bagan area. Bagan area dapat dianggap sebagai gabungan dari bagan garis dengan bagan batang, karena nilai dapat dibaca tidak hanya dari posisi vertikalnya, tetapi juga ukuran area yang diarsir antara setiap titik dan garis dasar.

Cara membuat diagram garis di html

Plot pencar yang terhubung

Jika Anda memiliki dua rangkaian nilai yang ingin Anda plot menggunakan bagan garis, tipe bagan alternatif yang dapat Anda gunakan adalah plot sebar terhubung. Dalam plot sebar standar, kedua sumbu mewakili dua variabel yang menarik, dan titik yang diplot pada sumbu menunjukkan nilai pada variabel tersebut. Jika kita menghubungkan titik dalam urutan yang ditentukan oleh variabel ketiga seperti waktu, kita mendapatkan plot pencar yang terhubung. Plot sebar yang terhubung bagus untuk melihat tidak hanya hubungan antara dua variabel, tetapi juga bagaimana mereka berubah sepanjang waktu atau nilai dari variabel ketiga

Cara membuat diagram garis di html
Plot sebar yang terhubung (kanan bawah) adalah kombinasi dari dua bagan garis (kanan atas, kiri bawah). Perhatikan sumbu yang ditukar untuk bagan kanan atas

Alat visualisasi

Bagan garis adalah jenis bagan yang serbaguna dan berguna, sehingga harus tersedia di hampir semua alat visualisasi data yang Anda pilih. Bagan garis dasar di mana satu atau beberapa garis diplot pada satu sumbu seharusnya sudah umum, tetapi opsi tingkat lanjut seperti sumbu ganda mungkin tidak ada atau memerlukan data tambahan untuk menyiapkannya. Varian ridgeline bukanlah built-in umum, dan biasanya membutuhkan pemrograman khusus atau paket khusus untuk dibuat. Grafik mini juga tidak umum dengan sendirinya, dan lebih sering dilihat sebagai bawaan sebagai bagian dari alat pelaporan lainnya

Bagan garis adalah salah satu dari berbagai jenis bagan yang dapat digunakan untuk memvisualisasikan data. Pelajari lebih lanjut dari artikel kami tentang jenis bagan penting, cara memilih jenis visualisasi data, atau dengan menelusuri koleksi lengkap artikel dalam kategori bagan

Bagaimana Anda membuat grafik garis dalam HTML dan CSS?

Untuk memulai, kita membuat halaman HTML dasar dengan elemen blok . Untuk mereferensikan elemen blok ini nanti dalam kode, kami memberinya atribut id seperti "container". Di sini, kami menyediakan

Bagaimana cara membuat bagan garis?

Buat bagan garis .
Salin data lembar kerja contoh ke dalam lembar kerja kosong, atau buka lembar kerja yang berisi data yang ingin Anda plot ke bagan garis. .
Pilih data yang ingin Anda plot di bagan garis
Klik tab Sisipkan, lalu klik Sisipkan Bagan Garis atau Area
Klik Baris dengan Penanda

Bagaimana cara membuat diagram batang sederhana dalam HTML?

<. DOCTYPE html>
< title >Bagan Batang JavaScript < body >
< div id = "wadah" style = "lebar. 100%; . 100%" >

Bagaimana cara membuat diagram lingkaran dalam HTML?

Anda dapat membuat Bagan Pai dalam HTML menggunakan fungsi CSS sederhana bernama conic-gradient . Pertama, kita menambahkan elemen