Boost d3.js grafik dengan gradien SVG

Nadieh Bremer akan berada di Hasilkan London. pada bulan September, di mana dia akan menunjukkan cara mengambil Svg di luar bentuk belaka , menggunakan Javascript, CSS dan D3.JS untuk membuat visualisasi data bahkan lebih menyenangkan dan mengasyikkan. Pesan tiket Anda sekarang !

D3.JS telah mengambil alih dunia visualisasi data interaktif. Banyak contoh yang sangat besar dapat ditemukan, masing-masing menampilkan sentuhan yang menyenangkan dan berguna di perpustakaan. Anda lihat, D3 bukan perpustakaan grafik, tetapi sesuatu yang jauh lebih baik. Ini memberi Anda hanya alat dasar untuk membuat visualisasi data, dan dengan demikian memungkinkan Anda untuk membuat apa pun yang dapat Anda pikirkan. Meskipun beberapa ide mungkin membutuhkan lebih banyak waktu daripada yang lain, Anda akan sampai di sana pada akhirnya. Dan kebebasan ini persis seperti yang saya sukai dari D3.

Pada intinya, setiap visual D3 dibangun dari elemen SVG. Misalnya, untuk setiap datapoint dalam bagan ScatterPlot, untuk membuat bagan batang, sebagai sumbu, koordinat paralel atau grafik kemiringan, sebagai label, dan sangat berguna untuk hampir semua hal lain. Selanjutnya, SVG adalah resolusi-independen, sehingga terlihat bagus pada tingkat tampilan atau zoom apa pun.

Bahkan jika Anda hanya menggunakan SVG untuk bentuk mereka, Anda dapat membuat visualisasi yang indah. Namun, mereka dapat melakukan lebih banyak - pikirkan filter SVG misalnya. Dalam tutorial ini, kami akan melakukan penyelaman dalam ke dalam satu aspek tertentu dan melihat beberapa cara berbeda dapat diterapkan untuk mencerahkan visualisasi. Izinkan saya memperkenalkan Anda pada gradien SVG!

Temukan semua file yang Anda butuhkan untuk tutorial ini sini .

Gradien linear.

Kadang-kadang ketika saya membuat bagan garis dengan satu baris itu hanya terasa agak terlalu kosong dan bisa hilang di latar belakang putih. Untuk membuatnya lebih menonjol, saya menempatkan gradien ringan di bawahnya menggunakan D3's d3.svg.area Fungsi, diisi dengan gradien SVG (lihat Gambar 1).

Saya ingin gradien untuk berjalan secara vertikal dari atas (di mana warna yang sama dengan garis tetapi warna yang lebih ringan) ke bawah (di mana itu harus menjadi putih, atau transparan). Inilah yang dikenal sebagai gradien linier; sesuatu yang berubah warna sepanjang garis lurus.

Kami mulai dengan SVG. Ini adalah kanvas di mana grafik garis kami akan ditarik. Kami kemudian membuat def. elemen ke mana kita dapat menambahkan a lineargradient. elemen. Sangat penting untuk memberikan gradien id unik - kita akan menggunakan ini nanti ketika kita perlu memberikan area di bawah garis isi.

 var areagradient = svg.append ("defs")
.append ("lineargradient")
.attr ("ID", "AreaGradient")
.attr ("x1", "0%"). Attr ("Y1", "0%")
.attr ("x2", "0%"). Attr ("Y2", "100%"); 

Dua baris terakhir dari kode di atas menentukan bagaimana gradien harus berjalan. Anggap saja sebagai garis yang tidak terlihat: X1. dan Y1. adalah posisi awal dari garis yang tidak terlihat dan x2. dan Y2. Tunjukkan titik akhirnya, untuk memberikan arah gradien. Seringkali paling mudah untuk mendefinisikan ini sebagai persentase, meskipun dimungkinkan untuk menggunakan lokasi piksel yang tepat. Secara default lokasi mengacu pada kotak pembatas elemen ke mana gradien diterapkan. Kami ingin gradien berjalan secara vertikal, jadi X1. dan x2. harus sama ( 0% baik-baik saja), Y1. harus 0% dan Y2 100% .

Sekarang kita bisa mendefinisikan warna gradien. Setidaknya dua warna diperlukan untuk gradien, tetapi Anda dapat menggunakan sebanyak yang Anda suka. Untuk setiap warna di gradien yang Anda tambahkan berhenti elemen. Dalam ini Anda menentukan naungan dengan Stop-Color. , dan lokasi (sepanjang garis yang tidak terlihat) di mana Anda ingin warna ini murni (warna yang tepat) dengan mengimbangi .

Secara opsional, kami juga dapat mengatur opacity setiap warna dengan Stop-Opacity. . Di sini saya membuat naungan sedikit lebih ringan di bagian atas dan sepenuhnya transparan di bagian bawah.

AreaGradient.append ("Stop")
.attr ("offset", "0%")
.attr ("Stop-Color", "# 21825C")
.attr ("stop-opacity", 0,6);
AreaGradient.append ("Stop")
.attr ("Offset", "80%")
.attr ("Stop-color", "White")
.attr ("stop-opacity", 0); 

Sekarang gradien linier diatur, kita dapat membuat bagan area dan mengisinya dengan gradien. Untuk melakukan ini, gunakan URL (# Gradient-ID) Dalam gaya pengisian, bersama dengan ID unik yang kami atur sebelumnya.

 svg.append ("path")
.tyle ("Isi", "URL (#areagradient)")
.attr ("d", fungsi fungsi (dataset)); 

Setelah itu, buat garis di atas area grafik ini sehingga penampil dapat membaca hasil dari grafik Anda. Dalam grafik saya, saya juga menempatkan lingkaran untuk menekankan lokasi titik data tertentu.

Legenda yang halus

Legenda sangat umum dalam visualisasi data. Ketika Anda menggunakan warna untuk mewakili aspek tertentu dari data Anda, Anda perlu menjelaskan apa arti setiap warna. Di sinilah legenda masuk.

Dalam beberapa grafik, Anda akan menggunakan warna untuk mendiskriminasi antara kasus-kasus diskrit (misalnya, berbagai negara), dalam hal ini warna seringkali sangat berbeda. Namun, Anda juga dapat menggunakan warna untuk menunjukkan nilai kuantitatif.

Di sini kita mewakili suhu di luar (lihat Gambar 2). Perubahan warna secara bertahap untuk menunjukkan suhu dari rendah ke tinggi. Untuk menunjukkan ini dalam legenda, kita akan membuat persegi panjang panjang dan mengisinya dengan gradien dari kiri ke kanan. Kita dapat menggunakan kembali gradien yang kami buat untuk bagan baris kami, tetapi terbalik 90 derajat (jadi x2. Sekarang beroperasi 100% , daripada Y2. ). Meskipun umumnya palet pelangi tidak dianjurkan dalam visualisasi data, orang-orang digunakan untuk melihat peta suhu penuh warna, dan saya telah memilih sembilan warna untuk digunakan dalam contoh kami.

Bukannya menulis masing-masing berhenti untuk menambahkan, kita dapat menempatkan semua warna dalam dataset dan menggunakan nifty D3 data Langkah untuk membuat proses lebih cepat. Dengan D3 dimungkinkan untuk mengakses properti dari dataset dalam langkah-langkah rantai berikutnya menggunakan fungsi anonim, sehingga memungkinkan kita untuk mengatur warna dan mengimbangi hanya dalam dua baris.

 svg.append ("defs")
.append ("lineargradient")
.attr ("id", "legendgradientmulti")
.attr ("x1", "0%"). Attr ("Y1", "0%")
.attr ("x2", "100%"). Attr ("Y2", "0%")
.selectall ("Stop")
.data([
{Offset: "0%", Warna: "# 2C7BB6"},
{Offset: "12,5%", Warna: "# 00A6CA"},
{Offset: "25%", Warna: "# 00CCBC"},
{Offset: "37,5%", Warna: "# 90EB9D"},
{Offset: "50%", Warna: "# ffff8c"},
{OFFSET: "62,5%", Warna: "# F9D057"},
{Offset: "75%", Warna: "# F29E2E"},
{Offset: "87,5%", Warna: "# E76818"},
{Offset: "100%", Warna: "# D7191C"}])
.enter (). Append ("Stop")
.attr ("offset", fungsi (d) {return d.offset;})
.attr ("stop-color", fungsi (d) {return d.color;}); 

Seperti sebelumnya, langkah terakhir adalah membuat Rect. dan isi ini menggunakan ID gradien unik.

 svg.append ("Rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("lebar", 500) .attr ("tinggi", 20)
.tyle ("Isi", "URL (#legendgradientmulti)"); 

Grafik yang dilalui legenda ini diciptakan kembali setelah pekerjaan luar biasa www.weather-radials.com. Menampilkan suhu di New York atau Beijing pada tahun 2015. Suhu rata-rata setiap hari ditunjukkan oleh garis berwarna, dan garis-garis ini diatur untuk membentuk grafik melingkar. Legenda di bawah ini menjelaskan apa arti setiap warna. Salah satu grafik menggunakan gradien dari satu warna ke warna lainnya, dan yang lainnya berkembang melalui sembilan warna.

Gradien berbasis data

Dengan cara yang mirip dengan contoh sebelumnya, kita juga dapat membuat beberapa gradien. Kami dapat membuat gradien unik untuk setiap titik data, berdasarkan pada aspek tertentu dari data. Saya menggunakan pendekatan ini dalam visualisasi exoplanet. , di mana setiap planet diberi gradien berdasarkan kelas bintang Bintang IT Orbits. Saya menggunakan efek bola halus untuk memberi kesan masing-masing menyala oleh bintang di tengah.

Jadi mari kita kembali ke tahun 90-an dan mengubah koleksi lingkaran datar yang mewakili planet-planet di tata surya kita sendiri menjadi bola yang tampak 3D dengan gradien radial (Gambar 4). Saya telah membuat dataset kecil yang berisi nama dan diameter planet. Masing-masing akan digeneralisasi oleh satu warna, yang akan kita gunakan untuk membuat gradien unik untuk setiap planet.

 var gradientradial = svg.append ("defs")
.selectall ("radialgradient")
.data (planet)
.enter (). Tambahkan ("radialgradient")
.attr ("id", fungsi (d) {return "gradien-" + d.planet;})
.attr ("cx", "15%")
.attr ("CY", "50%")
.attr ("R", "85%"); 

Kode ini sedikit berbeda di sini: bukannya pertama-tama menambahkan elemen gradien, sekarang kita segera menambahkan planet-planet dataset dan hanya setelah memasukkan apakah kita membuat elemen gradien (dalam hal ini radialgradient. ). Dengan cara ini, gradien dibuat untuk setiap titik dalam dataset. Simpan ID Point unik dengan mendasarkannya pada data. Indeks saya Biasanya berfungsi, tetapi di sini nama planet lebih aman. Ini memastikan kita dapat mengakses gradien yang benar nanti.

Gradien radial sedikit berbeda dengan satu linier. Kami membuatnya dengan cara yang sama dengan lingkaran SVG: memasok pusat gradien sehubungan dengan batas objek yang akan diterapkan, menggunakan cx. dan Cy. . Nilai-nilai ini default ke 50% , yang merupakan pusat dari objek.

Untuk mensimulasikan penampilan bintang yang bersinar di planet-planet dari satu sisi, kami akan memindahkan pusat gradien ke kiri dengan mengatur cx. untuk 15% . Jari-jari gradien (di mana gradien berhenti 100% harus berakhir) ditunjukkan oleh R. . Ini juga default untuk 50% , tetapi karena kami cx. offset, ini sekarang 85% Jadi itu mengisi seluruh lingkaran.

Kita dapat menggunakan data planet untuk menambahkan perhentian warna. Untuk menciptakan penampilan bola yang bersinar, warnanya di 0% harus lebih ringan. Dengan menggunakan d3.rgb (). Lebih cerah (k) Saya tidak perlu menentukan warna yang terpisah, karena D3 akan melakukan perhitungan itu untuk saya. Nilai K. mendefinisikan seberapa besar lebih ringan saya ingin warna menjadi. Di sekitar 50% Saya mengatur warna sejati dalam dataset. Di tepi saya ingin warna yang sedikit lebih gelap, memberikan penampilan naungan. Secara logis, ada juga a d3.rgb (). Lebih gelap (k) yang bisa kita gunakan.

 GradientRadial.append ("Stop")
.attr ("offset", "0%")
.attr ("stop-color", fungsi (d) {
Kembalikan d3.rgb (d.color) .brighter (1); });
Gradientradial.append ("Stop")
.attr ("offset", "50%")
.Attr ("stop-color", fungsi (d) {return d.color;});
Gradientradial.append ("Stop")
.attr ("Offset", "100%")
.attr ("stop-color", fungsi (d) {
Kembalikan d3.rgb (d.color) .darker (2.5); }); 

Jika Anda ingin memeriksa HTML setelah menjalankan ini, akan ada delapan gradien radial yang berbeda. Terakhir, kita perlu membuat delapan lingkaran, beri mereka radius sebagaimana didefinisikan oleh data, dan mengisinya dengan gradien yang benar.

 svg.selectall (". Planet")
.data (planet)
.enter (). Tambahkan ("lingkaran")
/ * Atur kelas, lokasi, dan radius atribut ... * /
.tyle ("isi", fungsi (d) {
Return "URL (# Gradient-" + D.Planet + ")"; }); 

Saya juga menambahkan matahari, yang memiliki gradien radialnya sendiri, tetapi saya sudah pergi cx. , Cy. dan R. dengan pengaturan default 50% Untuk membuatnya terlihat seperti matahari bersinar dari tengah ke luar.

Penafian: Meskipun diameter semua bidang benar relatif satu sama lain, jarak tentu saja benar-benar bogus. Dan saya minta maaf bahwa Saturnus tidak memiliki cincin

Bermain dengan orientasi

Kami sekarang telah mengeksplorasi cara mengatur aspek warna berdasarkan data, tetapi ada lebih banyak kemungkinan. Kita dapat menetapkan hampir semua hal berdasarkan data - bahkan orientasi masing-masing gradien.

Untuk mencobanya, mari kita buat diagram chord D3 menunjukkan kolaborasi antara Avengers di Marvel Cinematic Universe (Gbr 5). Akord yang berjalan antara enam Avengers berukuran sesuai dengan jumlah film di mana keduanya muncul. Kita akan mengisi akord ini dengan gradien linear sederhana, berubah dari satu warna Avenger ke yang lain.

Sebuah akor biasanya tidak terlalu horizontal atau vertikal. Jadi kita harus mengatur x1, x2. , Y1. dan Y2. nilai-nilai berdasarkan lokasi dari busur luar Avenger. Data ini tidak ada dalam dataset asli kami, tetapi setelah kami menyediakannya ke D3 d3.layout.chord. fungsi, kami akan mendapatkan kembali dataset baru yang berisi sudut awal dan akhir setiap busur (sebagai d.source.Startangle. dan d.target.endangle. ). Ini adalah dataset yang kami berikan saat membuat gradien.

Kita perlu mengetahui posisi piksel dari garis tak kasat mata yang berjalan dari satu ujung akord ke ujung lainnya. Ini kemudian digunakan untuk memberikan x1, .., y2 atribut masing-masing gradien. Kita dapat menerapkan beberapa trigonometri menggunakan jari-jari diagram akor dan lokasi setengah jalan di sepanjang busur Avenger untuk mendapatkan kembali posisi ini. Formula trigonometri penuh telah dihapus dari kode berikut, tetapi Anda akan menemukannya repo github yang menyertai artikel ini .

Untuk membuat ID unik untuk setiap akor, kami membuat kombinasi string dari nilai indeks Avenger di setiap ujung akor. D3's. d3.layout.chord. selalu menetapkan satu (dari Avengers) ke sumber dan yang lainnya untuk target , yang membuat pasangan unik. Kemudian, ketika menggambar akord, kita dapat menggunakan teknik yang sama untuk memanggil gradien yang benar.

 var grads = svg.append ("defs"). Selectall ("lineargradient")
.data (chord.chords ())
.enter (). Append ("lineargradient")
.attr ("id", fungsi (d) {return "gradientchord-" + d.source.
indeks + "-" + d.target.index; })
.attr ("GradientUnits", "userspaceonuse")
// lokasi piksel dari satu ujung akord
.attr ("x1", fungsi (d, i) {return / * ... trigonometri berdasarkan
Nilai D.Source ... * /; })
.attr ("y1", fungsi (d, i) {return / * ... * /})
// Lokasi piksel ujung lain dari akor
.attr ("x2", fungsi (d, i) {return / * ... * /})
.attr ("y2", fungsi (d, i) {return / * ... * /}); 

Karena setiap Avenger didefinisikan dengan nomor indeks sendiri, kita dapat membuat fungsi warna, warna , yang mengembalikan setiap warna Avenger per nilai indeks. Ini membuatnya mudah untuk merujuk pada warna yang tepat saat menambahkan dua perhentian warna.

 Grads.append ("Stop")
.attr ("offset", "0%")
.Attr ("stop-color", fungsi (d) {Warna Kembali (d.source.index);
});
Grads.append ("Stop")
.attr ("Offset", "100%")
.attr ("stop-color", fungsi (d) {Warna Kembali (d.target.index);
}); 

Semua yang tersisa hanyalah memanggil ID gradien yang tepat saat mengatur gaya pengisian akord (dengan fungsi yang sama seperti yang kami gunakan untuk mengatur ID gradien).

Pembulatan hingga

Selama tutorial ini, kami telah melihat empat cara berbeda untuk menggunakan gradien SVG dalam visualisasi data, tetapi selalu ada lebih banyak hal yang dapat Anda lakukan. Dengan animasi gradien, Anda dapat mensimulasikan aliran dari satu bagian dari visualisasi data ke yang lain, misalnya.

Jadi lain kali Anda merancang visualisasi data, biarkan kreativitas Anda berjalan bebas. Dengan d3.js, Anda tidak perlu dibatasi oleh apa yang Anda pikirkan adalah batasan alat. Dengan pemikiran dan upaya yang sedikit di luar kotak, Anda dapat membuat hal-hal yang paling menakjubkan.

Jangan lewatkan sesi Nadieh, SVG di luar bentuk, pada Hasilkan London, 21-23 September. Pesan sekarang !

Artikel ini awalnya muncul di Net Magazine. masalah 280; Beli di sini !