Cara menambahkan grafik ke situs WordPress Anda menggunakan D3.js

Anda mungkin akrab dengan istilah "visualisasi data", karena istilah ini telah menjadi lebih umum baik sebagai jalur praktik maupun karier. Ada alasan mengapa bidang yang baru muncul ini berjalan dengan baik – penting bagi kami untuk terus belajar lebih banyak tentang pengguna kami, serta menunjukkan kepada mereka data untuk mendukung klaim kami.

Ketika data disajikan dengan cara yang bersih dan profesional, itu membuatnya mudah untuk dipahami dan ditafsirkan. Dalam kebanyakan kasus, pengguna Anda adalah orang-orang visual, jadi cara apa yang lebih baik untuk mengilustrasikan data selain dengan bagan? D3.js, juga disebut sebagai Dokumen Berbasis Data, adalah cara yang bagus untuk menambahkan grafik ke situs WordPress Anda.

Mengapa D3?

Pustaka ini membantu desainer menampilkan data di web. Kemungkinannya tidak terbatas, menjadikannya perpustakaan yang sangat populer. Dari yang sederhana hingga yang kompleks hingga apa pun di antaranya, D3 dapat dikustomisasi untuk membuat hampir semua jenis bagan. Ini berfungsi dengan baik dengan teknologi web standar, dapat memanipulasi DOM, sangat fleksibel, dan bagan dapat disesuaikan sesuai keinginan Anda.

Sekarang, kemungkinan besar Anda telah menemukan Grafik Vektor Scalable, yang sering disebut sebagai SVG. Ini adalah tipe format yang dibuat oleh perpustakaan D3. SVG bagus karena ukurannya kecil, skalabel, dan tidak bergantung pada resolusi.

Untuk memperjelas, solusi ini tidak disertakan dengan bagan yang dibuat sebelumnya di luar kotak – Anda harus membuatnya sendiri! Lihatlah galeri D3 dan Anda dapat melihat banyak contoh bagus untuk menginspirasi Anda.

Sebagai solusi Open Source, Anda tidak perlu khawatir tentang lisensi dan biaya. Karena bersifat Open Source, pengembangan terus dilakukan. Untuk tetap up to date dengan versi terbaru, Anda dapat melakukan fork D3 di Github.

Membuat grafik D3 sederhana

Sekarang kita tahu betapa hebatnya D3, mari kita membangun sesuatu. Kami akan membuat bagan donat sederhana, yang akan mencakup konsep dasar D3.

Langkah satu: tambahkan skrip ke situs Anda

Pertama, Anda perlu menambahkan skrip D3 ke situs WordPress Anda. Situs web d3 menyediakannya untuk diunduh atau Anda dapat menautkan langsung ke versi terbaru. Anda akan melihat bahwa saya menggunakan versi yang diperkecil untuk tutorial ini. D3 secara alami berukuran cukup kecil, tetapi yang diperkecil masih sedikit lebih kecil hanya 148 KB.

Selanjutnya, Anda akan membuat file JavaScript baru tempat skrip bagan khusus berada. Beri nama file yang dapat dikenali agar mudah ditemukan.

Sangat penting bahwa skrip D3 dipanggil sebelum JavaScript khusus bagan. Jika hal-hal tidak dipanggil dalam urutan yang benar, grafik tidak akan ditampilkan. (Saya tahu ini dari pengalaman pribadi, dan jika Anda tidak segera memahaminya, Anda mungkin akan menghabiskan banyak waktu untuk memperbaiki hal-hal yang tidak rusak.)

Skrip ini harus ditambahkan ke situs Anda setelah tag body penutup. Saat memeriksa halaman, pastikan tampilannya seperti ini:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Ingatlah bahwa jalur file Anda mungkin berbeda dari ini, tergantung pada struktur file Anda.

Langkah kedua: tambahkan skrip untuk membuat bagan

Anda tidak akan menyentuh file d3.js sama sekali, hanya bekerja di file bagan khusus Anda. Dalam hal ini, ini disebut charts.js .

Mari kita pecahkan semuanya sepotong demi sepotong. Pertama, buat variabel Anda dan tentukan apa yang Anda perlukan dalam fungsi Anda. Saya akan menamai variabel ini donut .

var donut = (function(one) {
})();

Di dalam kurung kurawal, Anda akan menambahkan informasi ukuran Anda.

var width = 400,

height = 400,

radius = 200

Selanjutnya, tentukan warna Anda. Bagaimana dengan grafik abu-abu dan biru? Warna pertama yang tercantum di sini adalah abu-abu muda yang akan menjadi warna default. Yang kedua adalah warna biru yang akan mewakili data.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Anda akan memerlukan beberapa data untuk menguji ini, jadi mari kita tambahkan berikutnya. Untuk tutorial ini, data di-hardcode, tetapi Anda juga dapat menggunakan data spreadsheet dan data dinamis dengan D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Sekarang Anda dapat menambahkan lebih banyak detail yang membantu menentukan bagaimana bagan dirender.

Busur mendefinisikan radius bagian dalam. Bayangkan radius luar bagan – Anda akan menginginkannya cukup tebal, jadi mengurangkan 100 sudah cukup.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Ini membuat wadah SVG dan #donut adalah apa yang akan Anda targetkan di halaman Anda untuk benar-benar merender bagan. Di sinilah Anda akan mulai melihat warna Anda dari langkah di atas.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Kode selesai

Untuk berjaga-jaga jika Anda ingin membandingkan apa yang Anda miliki dengan sampel, berikut adalah cuplikan kode lengkapnya.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Melihat grafik

Anda perlu membuat halaman atau posting baru sehingga Anda dapat "memanggil" bagan donat untuk benar-benar melihatnya. Pastikan Anda berada dalam mode Edit teks.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Kotak tampilan dan rasio aspek terhadap bagan ukuran

Ada sesuatu yang ekstra di tag SVG, yaitu viewBox dan preserveAspectRatio . Ini tidak dihasilkan oleh D3, dan sepenuhnya opsional. Anda mungkin memiliki metode penentuan ukuran lain yang disukai, tetapi ini cenderung berfungsi dengan baik, dan ini membantu respons grafik.

Khususnya dalam kasus ini, karena kami ingin mempertahankan bentuk bulat sempurna, menyetel rasio aspek akan memastikan bahwa skala SVG pas. Di sinilah viewBox berperan. Keuntungan dari viewBox adalah ia mendefinisikan bagaimana semua pengukuran dan koordinat yang digunakan di dalam SVG harus diskalakan agar sesuai dengan ruang yang tersedia. Jika Anda juga menggunakan 400 sebagai ukuran, berikut penjelasan singkat tentang cara mempertahankan bentuk lingkaran.

Kami memiliki dua nilai 400 yang sama; alasannya adalah agar skala gambar benar. Dengan viewBox="0 0 400 400" , kami membuat sistem koordinat untuk grafik. Lebarnya 400 unit dan tinggi 400 unit. Lebar dan tinggi grafik SVG menetapkan area yang terlihat dan pengaturan viewBox memungkinkan Anda untuk menentukan bahwa grafik Anda dapat diregangkan agar sesuai dengan wadah tertentu (kemungkinan besar viewport secara default, yang merupakan bagian dari halaman web yang dapat diakses pengguna saat ini lihat).

Ada sedikit lebih karena bahkan dengan viewBox yang ditentukan, itu masih tidak akan menskala dengan sempurna. Itu tidak akan terdistorsi, yang merupakan hal yang baik, tetapi ada lebih banyak persamaan. Temui wingman, preserveAspectRatio . Ini tidak berpengaruh kecuali ada viewBox yang mendefinisikan rasio aspek gambar. Skala akan disesuaikan untuk mempertahankan rasio aspek, sehingga Anda dapat mempertahankan bagan melingkar yang sempurna. Saat menyertakan preserveAspectRatio , Anda merencanakan contoh ketika viewBox tidak cocok dengan rasio aspek area pandang atau wadah tempat bagan berada. Dalam kebanyakan kasus, secara default, gambar akan diskalakan hingga sesuai dengan tinggi dan lebar tetapi memusatkan dirinya di dalam ruang ekstra apa pun. Kami telah menyertakan preserveAspectRatio="xMidYMid" yang memberi tahu browser untuk memusatkan grafik di dalam viewport di kedua arah.

Hal yang paling penting adalah mengetahui bahwa grafik tidak akan terpotong dan dapat diskalakan. Kunci untuk benar-benar memahami ini adalah bereksperimen dengan nilai-nilai. Cara yang baik untuk melakukannya adalah dengan melihat apa yang terjadi ketika nilai diubah dan bagaimana kaitannya dengan viewport.

Dukungan browser dan d3

Kemungkinannya adalah Anda menggunakan browser modern, tetapi perlu disebutkan jika Anda harus mendukung browser lama. Secara keseluruhan, dukungan browser sangat bagus, dan Anda mungkin tidak akan mengalami masalah apa pun, tetapi D3.js tidak berfungsi dengan baik dengan browser lama seperti IE8.

Membuat bagan sederhana adalah cara yang bagus untuk memulai dan menjalankan D3.js. Mengetahui dasar-dasarnya, dan menjadi terbiasa dengan bagan pemula D3 akan sangat membantu Anda saat Anda mendesain data dan beralih ke lebih banyak jenis bagan. Dari yang sederhana hingga yang kompleks, pilihan desainnya tidak terbatas.

Bagaimana grafik Anda? Beri tahu kami di komentar!

Apa berikutnya?

Unduh ebook ini untuk daftar plugin yang paling kami rekomendasikan untuk pengembang! Kami menemukan semua plugin ini mudah digunakan, tidak terlalu berat kinerjanya di situs Anda, dan benar-benar andal.

Siap memasang plugin favorit baru Anda? Klik di bawah ini!