Belajar untuk membuat visualisasi data D3.js dengan contoh

d3.js: Lukis visualisasi data dinamik dengan JavaScript

Artikel ini membincangkan D3.js, perpustakaan JavaScript yang kuat untuk mewujudkan visualisasi data dinamik dan interaktif. Ia menggunakan HTML, SVG dan CSS untuk memberikan data dalam pelayar web.

mata teras:

D3.js adalah perpustakaan JavaScript yang serba boleh yang membolehkan pemaju membuat visualisasi data interaktif yang dinamik dalam pelayar web menggunakan HTML, SVG dan CSS.
Perpustakaan menyediakan banyak alat untuk pemprosesan data, menukar data mentah ke dalam perwakilan visual yang bermakna, dan boleh disesuaikan secara meluas untuk memenuhi idea -idea kreatif yang unik.
D3.js menggunakan bar skala untuk memetakan nilai data ke sifat paparan visual seperti saiz atau warna, mencipta carta dan elemen visual lain yang mencerminkan data dengan tepat.
Artikel ini menyediakan contoh praktikal carta bar, carta baris, dan visualisasi animasi, menunjukkan cara menjadikan graf data yang mudah dan kompleks menggunakan D3.Js.
D3.js menyokong ciri -ciri canggih seperti peralihan dan animasi, yang membolehkan pemaju untuk membuat visualisasi secara visual, dinamik dikemas kini secara dinamik yang meningkatkan pengalaman pengguna dan interaksi data.

D3.js adalah operasi dokumen berasaskan data JavaScript Library. Ia membantu anda membawa data anda ke kehidupan menggunakan HTML, SVG dan CSS. Tiga perpustakaan JavaScript yang setiap pemaju web harus belajar adalah: jQuery, underscore, dan D3. Perpustakaan ini membolehkan anda memikirkan kod dengan cara baru: JQuery membolehkan anda melakukan lebih banyak mengenai DOM dengan kurang kod; pemprosesan data dan pengaturcaraan grafik. Jika anda baru ke D3, luangkan masa untuk melayari contoh -contoh perpustakaan yang mengagumkan untuk melihat apa yang boleh dilakukannya. Ini bukan perpustakaan carta dari masa ayah anda. William Playfair mencipta carta bar

, carta baris dan carta kawasan pada tahun 1786, dan mencipta carta pai pada tahun 1801. Ini masih merupakan cara utama kebanyakan dataset dibentangkan hari ini. Carta ini sangat baik, tetapi D3 memberi anda alat dan fleksibiliti untuk membuat visualisasi data web yang unik, dan kreativiti anda adalah satu -satunya faktor yang membatasi. D3 adalah perpustakaan visualisasi peringkat rendah yang sangat fleksibel dengan API seperti JQuery untuk memetakan data ke dokumen HTML dan SVG. Ia mengandungi sejumlah besar fungsi matematik yang berguna untuk transformasi data dan pengiraan fizikal, walaupun kebanyakan fungsinya berasal dari memanipulasi angka dan laluan geometri dalam SVG. Artikel ini bertujuan untuk memberi anda gambaran keseluruhan tahap ciri-ciri D3, dalam setiap contoh anda akan dapat melihat input data, Convert dan output Dokumen. Saya tidak akan menerangkan apa yang setiap fungsi tidak, tetapi sebaliknya menunjukkan kepada anda kod, anda sepatutnya dapat mendapatkan idea yang kasar tentang bagaimana ia berfungsi. Saya hanya masuk ke dalam konsep yang paling penting: skala dan pilih .

carta bar

Mencipta carta bar mudah menggunakan HTML adalah salah satu cara paling mudah untuk memahami bagaimana D3 menukar data ke dalam dokumen. Kodnya adalah seperti berikut:

d3.select('#chart')
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("div")
  .style("height", (d)=> d + "px")

Kod ini memaparkan data input

ke html output. [4, 8, 15, 16, 23, 42]

Carta sumbangan GitHub

Dengan hanya beberapa baris tambahan kod, carta bar di atas boleh ditukar menjadi carta sumbangan yang serupa dengan GitHub.

Kami tidak lagi menetapkan ketinggian mengikut nilai berangka data, tetapi tetapkan warna latar belakang.

pemula svg

Kebanyakan fungsi D3 berasal dari fakta bahawa ia berfungsi dengan SVG, yang mengandungi label untuk melukis grafik 2D seperti bulatan, poligon, laluan, dan teks.

pekeliling

D3 boleh mengendalikan jenis data yang lebih kompleks.

carta baris

Melukis carta garis dalam SVG sangat mudah.

Skala

Skala adalah fungsi yang memetakan domain input ke julat output.

Visualisasi Penerbangan Animasi

Ini adalah contoh visualisasi animasi yang menunjukkan penerbangan antara Melbourne dan Sydney. Kesimpulan Artikel ini hanya meliputi sebahagian kecil daripada perpustakaan D3.JS. Semoga gambaran keseluruhan lanjutan ini dan beberapa contoh praktikal akan memberi anda idea bagaimana menggunakan pilihan, skala, dan transformasi. Fikirkan cara terbaik untuk mewakili data dan nikmati mewujudkan visualisasi data unik anda sendiri.

(kedudukan imej tetap tidak berubah)

Atas ialah kandungan terperinci Belajar untuk membuat visualisasi data D3.js dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!