Tutorial JavaScript: Visualisasi data yang mudah dengan React-vis

Visualisasi data adalah bagian penting dari bercerita, tetapi Anda bisa tersesat di rumput liar dengan D3.js selama berjam-jam hanya untuk membuat beberapa bagan sederhana. Jika Anda hanya membutuhkan bagan, ada banyak pustaka yang membungkus D3 dan memberi Anda cara mudah untuk membuat visualisasi sederhana. Minggu ini, kita akan mulai melihat React-vis, pustaka diagram yang dibuat dan bersumber terbuka oleh Uber.

React dan d3.js memiliki hubungan yang menarik. React adalah tentang rendering deklaratif komponen dan D3.js adalah tentang memanipulasi elemen DOM secara imperatif. Menggunakannya bersama-sama dimungkinkan menggunakan refs, tetapi jauh lebih baik untuk merangkum semua kode manipulasi dalam komponen terpisah sehingga Anda tidak perlu terlalu sering berpindah konteks. Untungnya, pustaka React-vis sudah melakukannya untuk kita dengan banyak komponen yang dapat disusun yang dapat kita gunakan untuk membangun visualisasi kita.

Cara terbaik untuk menguji pustaka visualisasi data, atau pustaka apa pun sebenarnya, adalah dengan membuat sesuatu dengannya. Ayo lakukan itu, menggunakan kumpulan data Nama Bayi Populer di Kota New York.

Mempersiapkan data untuk React-vis

Untuk memulai, saya telah mem-bootstrap proyek React create-react-appdan menambahkan beberapa dependensi: react-vis, d3-fetchuntuk membantu menarik data CSV, dan momentuntuk membantu pemformatan tanggal. Saya juga mengumpulkan sedikit kode boilerplate untuk menarik dan mengurai CSV yang menyertakan nama-nama populer yang digunakan d3-fetch. Dalam format JSON, kumpulan data yang kami tarik memiliki sekitar 11.000 baris dan setiap entri terlihat seperti ini:

{

  "Tahun Lahir": "2016",

  "Jenis kelamin perempuan",

  "Etnis": "PULAU ASIA DAN PASIFIK",

  "Nama Depan Anak": "Olivia",

  "Hitung": "172",

  "Peringkat": "1"

}

Karena spasi di kunci dan angka yang direpresentasikan sebagai string akan membuat data ini tidak nyaman untuk digunakan, kami akan memodifikasi data pada waktu buka untuk melakukan pemijatan. Kode itu hanya menggunakan dsvmetode dari d3-fetch:

impor {dsv} dari 'd3-fetch';

impor momen dari 'momen';

dsv (",", dataUrl, (d) => {

  kembali {

    yearOfBirth: + d ['Year of Birth'],

    jenis kelamin: d ['Jenis Kelamin'],

    etnis: d ['Ethnicity'],

    firstName: d ['Nama Depan Anak'],

    hitung: + d ['Hitung'],

    peringkat: + d ['Pangkat'],

  };

});

Sekarang data masukan kita jauh lebih ramah. Ini terlihat seperti ini:

{

  "yearOfBirth": 2016,

  "jenis kelamin perempuan",

  "etnis": "PULAU ASIA DAN PASIFIK",

  "firstName": "Olivia",

  "hitung": 172,

  "peringkat": 1

}

Plot pertama kami dengan React-vis

Komponen pertama yang mungkin Anda gunakan adalah suatu bentuk XYPlot, yang berisi komponen lain dan ada di hampir setiap bagan yang Anda buat. Ini sebagian besar hanya pembungkus yang menentukan ukuran visualisasi, tetapi dapat menyertakan beberapa properti yang juga diteruskan ke anak-anak. Dengan sendirinya, XYPlottidak membuat apa pun kecuali beberapa ruang kosong:

   
    

  lebar = {300}

  tinggi = {300}

Untuk benar-benar menampilkan data, kita perlu menggunakan semacam rangkaian. Seri adalah komponen yang benar-benar menggambar data, seperti bagan batang vertikal ( VerticalBarSeries) atau bagan garis ( LineSeries). Kami memiliki 14 seri yang dapat kami gunakan, tetapi kami akan mulai dengan yang sederhana VerticalBarSeries. Setiap seri mewarisi dari kumpulan atribut dasar. Yang paling berguna bagi kami adalah dataatribut:

   
    

  lebar = {300}

  tinggi = {300}

    data = {data}

  />

Ini akan gagal, karena React-vis mengharapkan elemen dalam larik data berada dalam bentuk berikut:

{

  x: 2016, // Ini akan dipetakan ke sumbu x

  y: 4 // Ini akan dipetakan ke sumbu y

}

Misalnya, untuk menunjukkan jumlah total bayi yang dihitung dalam kumpulan data berdasarkan tahun, kita perlu memproses data untuk mendapatkan satu objek untuk setiap tahun dengan xatributnya adalah tahun dan yatributnya adalah jumlah total bayi di kumpulan data. Kode yang saya tulis untuk melakukannya cukup singkat:

const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => {

  if (row.yearOfBirth di acc) {

    acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count

  } lain {

    acc [row.yearOfBirth] = row.count

  }

  kembali acc;

}, {})). peta (([k, v]) => ({x: + k, y: v}));

Saat Anda mencolokkannya ke VerticalBarSeries, kami mendapatkan beberapa hasil!

Ini tidak terlalu membantu, tetapi untungnya perpustakaan React-vis menyediakan beberapa komponen tambahan yang dapat digunakan untuk mengkontekstualisasikan informasi. Mari impor XAxisdan YAxisagar kami dapat menampilkan lebih banyak informasi di bagan kami. Kami akan membuat komponen tersebut di dalam XYPlotbersama kami VerticalBarSeries. Kode dan hasilnya terlihat seperti ini:

   
    

  lebar = {600}

  tinggi = {600}

    data = {totalBabiesByYear}

  />

Label sumbu y kami terpotong dan label sumbu x kami diformat sebagai angka, tetapi kami membuat kemajuan. Untuk mendapatkan sumbu x yang diperlakukan sebagai nilai ordinal diskrit sebagai lawan dari rentang numerik kontinu, kita akan menambahkannya xType="ordinal"sebagai properti pada XYPlot. Sementara kita melakukannya, kita dapat menambahkan beberapa margin kiri ke grafik sehingga kita dapat melihat lebih banyak label sumbu y:

   
    

  lebar = {600}

  tinggi = {600}

  margin = {{

    kiri: 70

  }}

  xType = "ordinal"

Kami dalam bisnis! Bagan kami sudah terlihat bagus — dan sebagian besar pekerjaan yang harus kami lakukan terkait dengan memijat data, bukan merendernya.

Minggu depan, kita akan terus menjelajahi komponen perpustakaan React-vis dan mendefinisikan beberapa interaksi dasar. Lihat proyek ini di GitHub jika Anda ingin bermain-main dengan kumpulan data dan pustaka React-vis. Punya visualisasi yang Anda buat dengan React-vis? Kirimi saya tangkapan layar di Twitter @freethejazz.