{"id":2533,"date":"2023-04-19T21:24:00","date_gmt":"2023-04-19T14:24:00","guid":{"rendered":"https:\/\/student-activity.binus.ac.id\/himmat\/?p=2533"},"modified":"2023-04-19T21:24:00","modified_gmt":"2023-04-19T14:24:00","slug":"membuat-diagram-dan-visualisasi-data-menggunakan-teks-dan-kode","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/himmat\/2023\/04\/membuat-diagram-dan-visualisasi-data-menggunakan-teks-dan-kode\/","title":{"rendered":"Membuat Diagram dan Visualisasi Data Menggunakan Teks dan Kode"},"content":{"rendered":"

\"\"<\/a><\/p>\n

\u00a0 \u00a0 \u00a0Banyak peralatan yang dapat digunakan untuk membuat diagram atau visualisasi data. Kita bisa saja memvisualisasikan data tersebut dengan design tools<\/em>, seperti Figma<\/em> atau Canva<\/em>. Namun, saat kita membutuhkan visualisasi data yang dinamis, dibutuhkan juga tools<\/em> yang sesuai. Hal ini dikarenakan tools<\/em> yang sesuai dapat memudahkan kita dalam pembuatan visualisasi dan membuat kita dapat menambahkan detail-detail tertentu pada visualisasi kita.<\/p>\n

\u00a0 \u00a0 \u00a0Salah satu aplikasi visualisasi data yang paling umum digunakan adalah Microsoft Excel<\/em>. Namun, Microsoft Excel<\/em> memiliki beberapa kelemahan. Selain aplikasinya yang berat dan berbayar, halaman Excel<\/em> juga tidak bisa sembarangan di-embed<\/em> di mana pun. Berikut adalah salah satu alternatif-nya:<\/p>\n

Mermaid JS<\/h4>\n

\u00a0 \u00a0 \u00a0Salah satu tools<\/em> yang bisa kita gunakan adalah Mermaid JS<\/em>, yang merupakan suatu Javascript Library<\/em> yang merupakan bahasa utama dalam Web Development<\/em>. Kita bisa dengan mudah menyematkan diagram atau visualisasi yang dinamis pada media yang lebih banyak lagi, termasuk juga mengekspor dalam bentuk file .png<\/em> atau .svg<\/em>, seperti Canva<\/em> atau Figma<\/em>.<\/p>\n

\u00a0 \u00a0 \u00a0Diagram dapat kita tulis dalam bentuk teks, kemudian Mermaid JS<\/em> akan memvisualisasikan teks tersebut menjadi diagram. Berikut adalah contoh teks dan hasil visualisasi-nya:<\/p>\n

Flowchart<\/h4>\n

<pre>
\nflowchart LR
\nA[Hard] –>|Text| B(Round)
\nB –> C{Decision}
\nC –>|One| D[Result 1]
\nC –>|Two| E[Result 2]
\n<\/pre><\/p>\n

\"\"<\/a><\/p>\n

Pie Chart<\/h4>\n

<pre>
\npie
\n“Dogs” : 386
\n“Cats” : 85.9
\n“Rats” : 15
\n<\/pre><\/p>\n

\"\"<\/a><\/p>\n

Sequential Diagram<\/h4>\n

<pre>
\nsequenceDiagram
\nAlice->>John: Hello John, how are you?
\nloop Healthcheck
\nJohn->>John: Fight against hypochondria
\nend
\nNote right of John: Rational thoughts!
\nJohn–>>Alice: Great!
\nJohn->>Bob: How about you?
\nBob–>>John: Jolly good!
\n<\/pre><\/p>\n

\"\"<\/a><\/p>\n

Selain Flow Chart<\/em>, Pie Chart<\/em>, dan Sequential Diagram<\/em>; kita juga bisa membuat banyak jenis visualisasi lainnya, antara lain:<\/p>\n