Pustaka pembuatan bagan untuk ilmuwan data yang dibangun di atas D3 dan stack.gl

Perkenalan

Plotly adalah perusahaan komputasi yang berkantor pusat di Montreal, Quebec, yang mengembangkan alat analitik dan visualisasi data online. Ini menyediakan grafik online, analitik, dan alat statistik untuk individu dan kolaborasi dan pustaka grafik ilmiah untuk Python, R , MATLAB, Perl, Julia, Arduino, dan REST. Alat Plotly juga dapat digunakan untuk menata grafik interaktif dengan notebook Jupyter.

Plotly juga merupakan nama produk. Plotly.js adalah pustaka charting yang dibangun di atas D3 dan stack.gl , yang merupakan komponen WebGL modular. Ini adalah perpustakaan bagan deklaratif tingkat tinggi, dan dikirimkan dengan lebih dari 40 jenis bagan, termasuk peta 3D, statistik, ilmiah, keuangan, dan SVG. Selain pustaka JavaScript, Plotly juga mendukung plotly.py dan plotly.R . Grafik plot diadopsi secara luas oleh komunitas AI/ilmu data, seperti MLflow , demo Point-E di Hugging Face .

Mari kita lihat cara kerja Plotly.

Siapkan Plotly.js di Create React App

Kami menggunakan Create React App sebagai basis untuk menjelajahi plotly.js. Perintah berikut membuat proyek React:

% yarn create react-app react-plotly
% cd react-plotly

% yarn add plotly.js react-plotly.js

"dependencies": {
  "plotly.js": "^2.17.0",
  "react-plotly.js": "^2.6.0"
}

Bagan Batang

Bagan batang menyajikan data kategorikal dengan batang persegi panjang dengan tinggi atau panjang sebanding dengan nilai yang diwakilinya. Batang dapat diplot secara vertikal atau horizontal. Bagan batang vertikal terkadang disebut bagan kolom.

Di Plotly , rangkaian disebut data, yang terdiri dari larik jejak. Setiap jejak objek terdiri dari type, x, y, dan informasi lainnya.

• xmengatur xkoordinat, yang merupakan larik dari perkembangan nilai berurutan. Nilai default adalah urutan yang dimulai dari 0, dengan kenaikan 1.
• ymengatur ykoordinat, yang merupakan larik nilai pada setiap titik y.
• Jenis diagram batang adalah 'bar'.

• Pada baris 3–7, ia membuat objek tata letak, dengan title, width, dan height.
• Pada baris 9–18, ia membuat larik data yang terdiri dari dua objek jejak. Kedua jejak didefinisikan sebagai jenis 'bar', bersama dengan ynilai.
• Pada baris 21, diagram batang dibuat.

Kita dapat mengubah salah satu bilah ke orientasi horizontal dengan kode ini:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
  },
];

Orientasi campuran hanya untuk demonstrasi. Kemungkinan besar, kasus penggunaan nyata memiliki semua batang dalam orientasi yang sama.

Setel kedua bilah ke orientasi horizontal menggunakan kode berikut:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
    orientation: 'h',
  },
];

Bagan Sebar

Bagan garis menghubungkan serangkaian titik data menggunakan garis, dan bagan sebar menampilkan kumpulan titik. Di Plotly, bagan garis dan bagan sebar memiliki tipe 'scatter'. Ini digunakan modeuntuk menentukan mode menggambar:

• 'lines': Ini menarik plot garis.
• 'markers': Ini menggambar plot pencar.
• 'text': Ini menampilkan teks.
• 'none': Tidak menampilkan apa-apa.

Berikut modifikasinya src/App.js:

• Pada baris 3–7, ia membuat objek tata letak, dengan title, width, dan height.
• Pada baris 9–20, ia membuat larik data yang terdiri dari dua objek jejak. Kedua jejak didefinisikan sebagai jenis 'scatter', bersama dengan ynilai. Jejak pertama disetel modeke 'lines', dan set kedua modeke 'markers'.
• Pada baris 23, bagan sebar dibuat.

Berikut adalah modifikasi src/App.jsyang menggunakan mode gabungan.

• Pada baris 3–7, ia membuat objek tata letak, dengan title, width, dan height.
• Pada baris 9–28, ia membuat larik data yang terdiri dari dua objek jejak.
  – Pada baris 10–14, jejak pertama mengatur mode ke 'lines+markers'.
  – Pada baris 15–26, jejak kedua mengatur mode ke 'markers+lines'. Selain itu, ditetapkan marker.colorke 'green', marker.sizeke 12, line.colorke 'red', dan line.widthke 3.
• Pada baris 31, bagan sebar dibuat.

Berikut ini dataArrayditambahkan textke modeuntuk kedua pelacakan, bersama dengan larik nilai teks. Ini kodenya:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Ini berfungsi, kecuali ada beberapa tumpang tindih antara penanda dan teks.

Kita dapat menggeser posisi teks untuk menghindari tumpang tindih:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
    textposition: 'top center',
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    textposition: 'bottom center',
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Kami telah melihat xdan ydimensi dalam bagan Plotly, dan ada dimensi lain, dimensi warna, dalam bagan sebar. Dalam contoh berikut, kami membuat bagan dengan tujuh jejak pencar horizontal dengan penanda. Penanda ini digunakan untuk menjelaskan bagaimana dimensi warna bekerja.

Inilah grafik target kami:

Dan berikut adalah modifikasinya src/App.js:

• Pada baris 10–18, trace 0tentukan ynilai menjadi [6, 6, 6, 6, 6, 6](baris 12), dan marker.colormenjadi warna sederhana, 'red'(baris 15).

• Pada baris 19–28, trace 1tentukan ynilai menjadi [5, 5, 5, 5, 5, 5](baris 21), dan marker.colorscalemenjadi [[0, 'green'], [1, 'blue']](baris 24). colorscaleadalah larik yang berisi larik yang memetakan nilai normal ke rgb, rgba, hex, hsl, hsv, atau string warna bernama. Minimal, diperlukan pemetaan untuk nilai terendah (0) dan tertinggi (1). colorscalememiliki efek hanya jika marker.colordiatur ke larik numerik (baris 25).

• Pada baris 29–39, trace 2tentukan ynilai menjadi [4, 4, 4, 4, 4, 4](baris 31). Karena marker.colorscaletidak ditentukan, default colorscalediterapkan. marker.cmin(baris 35) menetapkan batas bawah domain warna, dan marker.cmax(baris 36) menetapkan batas atas domain warna. Jika tidak, marker.cmindan marker.cmaxakan dikurangkan dari marker.color(baris 34).

• Pada baris 40–49, trace 3tentukan ynilai menjadi [3, 3, 3, 3, 3, 3](baris 42). marker.cmid(baris 46) menyetel titik tengah domain warna dengan mengatur skala marker.cmindan/atau marker.cmaxberjarak sama dengan titik ini.

• Pada baris 50–59, trace 4tentukan ynilai menjadi [2, 2, 2, 2, 2, 2](baris 52). Selain mendefinisikan colorscale, kita dapat menggunakan nama palet yang telah ditentukan dari daftar: 'Blackbody', 'Bluered', 'Blues', 'Cividis', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Jet', , 'Picnic', 'Portland', 'Rainbow', 'RdBu', 'Reds', 'Viridis', 'YlGnBu'dan 'YlOrRd'. Untuk trace 4, marker.colorscalediatur ke 'Greens'(baris 56).

• Pada baris 60–69, trace 5tetapkan ynilai menjadi [1, 1, 1, 1, 1, 1](baris 62), dan marker.colorscalemenjadi 'YlOrRd'(kuning atau merah, baris 66).

• Pada baris 70–85, trace 6tentukan ynilai menjadi [0, 0, 0, 0, 0, 0](baris 72), dan marker.colorscalemenjadi 'Jet'(baris 76).

• Pada baris 78–83 in trace 6, colorbardidefinisikan dengan title, orientation, x, dan y. colorbardiatur dengan orientasi horizontal (baris 80) untuk menghindari overlay legenda. colorbar.xmengatur xposisi bilah warna, dengan angka antara atau sama dengan -2 dan 3.
  Nilai defaultnya adalah 1,02. colorbar.ymengatur posisi y dari bilah warna, dengan angka antara atau sama dengan -2 dan 3. Nilai standarnya adalah 0,5. In trace 6, colorbar.xdiatur ke 0,48 (baris 81), dan colorbar.ydiatur ke -0,2 (baris 82). Lokasi telah dipindahkan dari atas (default untuk orientasi horizontal) ke bawah, di sebelah trace 6. Ini menunjukkan bagaimana dimensi warna dari titik-titik yang tersebar cocok colorbar.

• Pada baris 94, bagan sebar dengan dimensi tujuh warna dibuat.

colorbar: {
  title: 'y = 0',
  orientation: 'v',
}

Rupanya, colorbartumpang tindih dengan legenda. Alih-alih membuat colorbarhorizontal, kita bisa mengubah legenda menjadi horizontal.

Berikut ini dimodifikasi src/App.js.

• Pada baris 7–9, legenddiatur ke horizontal.
• Pada baris 81–83, orientasi colorbardihapus. Nilai defaultnya adalah vertikal ( 'v').

Contoh di atas menunjukkan bahwa dimensi warna cerah dan mudah digunakan.

Opsi Konfigurasi

Saat mengarahkan kursor ke sudut kanan atas bagan, modebarmuncul dengan daftar tombol. Dari kiri ke kanan adalah Download, Zoom, Pan, Box Select, Lasso Select, Zoom in, Zoom out, Autoscale, Reset axes, dan Plotly Logo.

• Download: Mengunduh grafik melalui browser. Secara default, ini mengunduh file PNG dengan dimensi 700x450. Berikut adalah contoh untuk mengonfigurasinya untuk mengunduh file SVG bernama 'custom_image', dan dimensinya 800x600.

const configObj = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    width: 800,
    height: 600,
    scale: 1, // multiply title/legend/axis/canvas sizes by this factor
  },
};

Menyetel scrollZoomke true memungkinkan pengguna untuk memperbesar dan memperkecil menggunakan roda gulir pada mouse.

const configObj = {
  scrollZoom: true,
};

• Box Select: Hal ini memungkinkan memilih bagian dari grafik dengan sebuah kotak.

• Lasso Select: Memungkinkan pemilihan bagian bagan dengan batas bebas.

• Zoom in: Itu membuat gambar lebih besar dan lebih dekat.

• Zoom out: Itu membuat gambar lebih kecil dan lebih jauh.

• Autoscale: Ini melihat semua titik (data) di plot dan mengubah tata letak untuk menampilkan semuanya.
• Reset axes: Ini kembali ke detail tata letak yang ditentukan untuk bagan, bahkan jika itu meninggalkan beberapa poin.
• Plotly Logo: Tooltip menampilkan versi Plotly, dan mengkliknya akan membukahttps://plotly.com/.

<Plot layout={layoutObj} data={dataArray} config={configObj} />

• Matikan respons lebar dan tinggi:

const configObj = {
  responsive: false,
};

const configObj = {
  staticPlot: true,
};

const configObj = {
  displayModeBar: true,
};

const configObj = {
  displaylogo: false,
};

const configObj = {
  modeBarButtonsToRemove: ['pan', 'lasso'], // Pan and Lasso are removed
};

const configObj = {
  modeBarButtonsToAdd: [
    'drawline',
    'drawopenpath',
    'drawclosedpath',
    'drawcircle',
    'drawrect',
    'eraseshape',
  ],
};

Alat Peraga Penangan Acara

Di bagian sebelumnya, kami memperkenalkan Box Selectdan Lasso Select, Bagian bagan pilihan ini. Apa kasus penggunaan untuk itu?

Bagan yang mendengarkan acara selectdapat bereaksi terhadap pilihan pengguna.

Berikut modifikasinya src/App.js:

• Pada baris 10, ini dijadikan Box selectsebagai tindakan default dari modebar.
• Pada baris 98–101, ia membuat objek konfigurasi, yang membuat modebarselalu terlihat dan menyembunyikan Logo Plotly di file modebar.
• Pada baris 103–105, pengendali terpilih dibuat untuk mencatat selectedinformasi.
• Pada baris 109, bagan dibuat dengan props dari layout, data, config, dan onSelected.

Di konsol Inspeksi, selectedditampilkan informasi yang dapat digunakan untuk membangun aplikasi.

Berikut adalah daftar props untuk event handler: onAfterExport, onAfterPlot, onAnimated, onAnimatingFrame, onAnimationInterrupted, onAutoSize, onBeforeExport, , , onBeforeHover, onButtonClicked, onClick, onClickAnnotation, onDeselect, onDoubleClick, onError, onFramework, onHover, onInitialized, onLegendClick, onLegendDoubleClick, onPurge, onRelayout, onRelayouting, onRestyle, onRedraw, onSelected, onSelecting, onSliderChange, onSliderEnd, onSliderStart, onSunburstClick, onTransitioning, onTransitionInterrupted, onUnhover, onUpdatedan onWebGlContextLost.

Kesimpulan

Kami telah menunjukkan cara kerja plotly.js untuk bagan batang dan bagan pencar. Selain kemampuan bagan lengkap, dimensi warnanya cerah dan mudah digunakan. Tombolnya modebarberlebihan dan bertenaga. Namun, itu tidak memiliki aksesibilitas.

Dibandingkan dengan Highcharts , bagan statistik dan ilmiah Plotly diadopsi secara luas oleh komunitas AI/ilmu data. Kami akan memberikan contoh dalam artikel berikut.

Terima kasih sudah membaca.

Want to Connect? 

If you are interested, check out my directory of web development articles.