Visualisasi data interaktif dengan JavaScript moden dan D3

Dalam artikel ini, saya ingin membawa anda melalui projek contoh yang saya bina baru -baru ini - A

Totally Original jenis visualisasi menggunakan perpustakaan D3, yang mempamerkan bagaimana setiap komponen ini menambah untuk membuat D3 perpustakaan yang hebat untuk belajar.

D3 bermaksud dokumen yang didorong oleh data. Ia adalah perpustakaan JavaScript yang boleh digunakan untuk membuat pelbagai visualisasi dan carta data yang indah.

Jika anda pernah melihat mana -mana cerita interaktif yang hebat dari New York Times, anda akan melihat D3 dalam tindakan. Anda juga dapat melihat beberapa contoh projek hebat yang telah dibina dengan D3 di sini.

Kurva pembelajaran cukup curam untuk memulakan dengan perpustakaan, kerana D3 mempunyai beberapa kebiasaan khas yang mungkin tidak akan dilihat sebelumnya. Walau bagaimanapun, jika anda dapat melepasi fasa pertama pembelajaran cukup D3 menjadi berbahaya, maka anda akan dapat membina beberapa barangan yang sangat sejuk untuk diri sendiri.

Terdapat tiga faktor utama yang benar -benar membuat D3 menonjol dari mana -mana perpustakaan lain di luar sana:

1. fleksibiliti. D3 membolehkan anda mengambil apa -apa jenis data, dan secara langsung mengaitkannya dengan bentuk dalam tetingkap penyemak imbas. Data ini boleh apa -apa , yang membolehkan pelbagai kes penggunaan yang menarik untuk membuat visualisasi yang benar -benar asli.
2. keanggunan. Sangat mudah untuk menambah elemen interaktif dengan peralihan lancar antara kemas kini. Perpustakaan itu ditulis dengan indah , dan sebaik sahaja anda mendapat sintaks, mudah untuk memastikan kod anda bersih dan kemas.
3. Komuniti. Terdapat ekosistem yang luas pemaju hebat menggunakan D3 sudah, yang dengan mudah berkongsi kod mereka dalam talian. Anda boleh menggunakan laman web seperti bl.ocks.org dan blockbuilder.org untuk dengan cepat mencari kod pra-ditulis oleh orang lain, dan menyalin coretan ini terus ke dalam projek anda sendiri.

Takeaways Key

D3, berdiri untuk dokumen yang didorong data, adalah perpustakaan JavaScript yang kuat untuk mewujudkan visualisasi data yang pelbagai dan interaktif, seperti yang ditunjukkan oleh penggunaannya yang luas dalam platform seperti The New York Times.
• Perpustakaan menawarkan fleksibiliti yang tiada tandingannya, yang membolehkan pemaju mengikat apa -apa jenis data kepada representasi grafik secara langsung dalam penyemak imbas, memupuk kreativiti dalam reka bentuk visualisasi.
• D3 cemerlang dalam menambahkan unsur -unsur interaktif dan dinamik dengan peralihan yang lancar, meningkatkan pengalaman visual dan penglibatan pengguna melalui pengaturcaraan dan sintaks yang elegan.
• Komuniti pemaju yang mantap menyokong D3, menyediakan sumber yang kaya dengan kod bersama dan contoh pada platform seperti bl.ocks.org, yang boleh dimanfaatkan untuk pembelajaran dan pembangunan projek.
Tutorial terperinci penciptaan visualisasi inovatif pengagihan pendapatan, menggunakan keupayaan D3 untuk memanipulasi dan mempersembahkan data secara dinamik, menyesuaikan unsur -unsur visual seperti radii carta pai berdasarkan nilai data sebenar.
Projek ini dibangunkan melalui pinjaman dan menyesuaikan kod sedia ada, menunjukkan kebolehsuaian D3 dan kepentingan komuniti dalam pengekodan, sebelum bergerak ke peningkatan dinamik dan interaktif.
• Visualisasi interaktif akhir termasuk ciri -ciri seperti butang Play/Jeda dan gelangsar untuk pemilihan tahun, menggambarkan bagaimana D3 boleh digunakan untuk membuat visualisasi data bukan sahaja bermaklumat tetapi juga menarik.
• Projek
• Sebagai majoriti ekonomi di kolej, saya sentiasa berminat dengan ketidaksamaan pendapatan. Saya mengambil beberapa kelas mengenai subjek, dan ia menyerang saya sebagai sesuatu yang tidak difahami sepenuhnya pada tahap yang sepatutnya.

Saya mula meneroka ketidaksamaan pendapatan menggunakan Explorer Data Awam Google ...

Apabila anda menyesuaikan diri dengan inflasi, pendapatan isi rumah mempunyai tinggal cukup banyak untuk bahagian bawah 40% masyarakat, walaupun produktiviti per-pekerja telah meroket. Ia hanya benar -benar 20% teratas yang telah meraih lebih banyak faedah (dan dalam kurungan itu, perbezaannya lebih mengejutkan jika anda melihat 5%teratas).

di sini adalah mesej yang saya ingin dapatkan dengan cara yang meyakinkan, yang memberikan peluang yang sempurna untuk menggunakan beberapa d3.js, jadi saya mula melukis beberapa idea.

Sketching

Kerana kita bekerja dengan D3, saya boleh lebih kurang hanya mula melukis apa -apa sahaja yang boleh saya fikirkan. Membuat graf garis mudah, carta bar, atau carta gelembung pasti cukup mudah, tetapi saya ingin membuat sesuatu yang berbeza.

Saya mendapati bahawa analogi yang paling biasa yang orang cenderung digunakan sebagai penangguhan kepada kebimbangan mengenai ketidaksamaan adalah bahawa "jika pai semakin besar, maka ada lebih banyak lagi yang dapat dikunjungi". Intuisi adalah, jika jumlah bahagian KDNK berjaya meningkat secara besar -besaran, maka walaupun sesetengah orang mendapat kepingan tipis pai, maka mereka masih akan menjadi lebih baik . Walau bagaimanapun, seperti yang dapat kita lihat, ia benar -benar mungkin bagi pai untuk mendapatkan lebih besar dan bagi orang untuk mendapatkan lebih sedikit keseluruhannya.

idea pertama saya untuk menggambarkan data ini kelihatan seperti ini:

Ideanya ialah kita akan mempunyai carta pai yang berdenyut ini, dengan setiap kepingan yang mewakili kelima pengagihan pendapatan AS. Kawasan setiap kepingan pai akan berkaitan dengan berapa banyak pendapatan yang segmen penduduk mengambil, dan jumlah kawasan carta akan mewakili jumlah KDNK.

Walau bagaimanapun, saya tidak lama lagi menemui sedikit masalah. Ternyata otak manusia adalah

sangat miskin untuk membezakan antara saiz kawasan yang berbeza

. Apabila saya memetakan ini dengan lebih konkrit, mesej itu tidak berada di mana -mana dekat kerana ia sepatutnya:

di sini, ia sebenarnya kelihatan seperti orang Amerika yang paling miskin mendapat lebih kaya

dari masa ke masa, yang mengesahkan apa yang kelihatannya benar. Saya memikirkan masalah ini lebih banyak lagi, dan penyelesaian saya melibatkan menjaga sudut setiap arka berterusan, dengan jejari setiap arka berubah secara dinamik.

Inilah bagaimana ini akhirnya mencari dalam amalan:

Saya ingin menunjukkan bahawa imej ini masih cenderung untuk mengecilkan kesan di sini. Kesannya akan lebih jelas jika kita menggunakan carta bar mudah:

Walau bagaimanapun, saya komited untuk membuat visualisasi yang unik, dan saya ingin memukul mesej ini bahawa

pie boleh mendapatkan lebih besar , manakala kongsi daripada itu boleh mendapatkan lebih kecil . Sekarang saya mempunyai idea saya, sudah tiba masanya untuk membinanya dengan D3.

Kod pinjaman

Jadi, sekarang saya tahu apa yang akan saya bina, sudah tiba masanya untuk masuk ke dalam daging sebenar projek ini, dan mulakan

menulis beberapa kod .

Anda mungkin berfikir bahawa saya akan mula dengan menulis beberapa baris pertama kod saya dari awal, tetapi anda akan salah. Ini adalah D3, dan sejak kami bekerja dengan D3, kami sentiasa dapat mencari beberapa kod pra-ditulis dari masyarakat untuk memulakan kami.

Kami mencipta sesuatu yang benar -benar baru, tetapi ia mempunyai banyak persamaan dengan carta pai biasa, jadi saya melihat dengan cepat di bl.ocks.org, dan saya memutuskan untuk pergi dengan pelaksanaan klasik ini oleh Mike Bostock, salah satu pencipta D3. Fail ini mungkin telah disalin beribu -ribu kali, dan lelaki yang menulisnya adalah penyihir sebenar dengan JavaScript, jadi kami dapat memastikan bahawa kami bermula dengan blok kod yang bagus.

Fail ini ditulis dalam D3 V3, yang kini dua versi dari tarikh, sejak versi 5 akhirnya dikeluarkan bulan lepas. Perubahan besar dalam D3 V4 adalah bahawa perpustakaan bertukar menggunakan ruang nama rata, supaya fungsi skala seperti d3.scale.ordinal () ditulis seperti d3.scaleordinal () sebaliknya. Dalam versi 5, perubahan terbesar ialah fungsi pemuatan data kini berstruktur sebagai janji, yang menjadikannya lebih mudah untuk mengendalikan pelbagai dataset sekaligus.

Untuk mengelakkan kekeliruan, saya sudah mengalami masalah membuat versi V5 yang dikemas kini kod ini, yang saya telah simpan di blockbuilder.org. Saya juga telah menukar sintaks agar sesuai dengan konvensyen ES6, seperti menukar fungsi anonim ES5 ke fungsi anak panah.

inilah yang kita mulakan dengan:

Saya kemudian menyalin fail ini ke dalam direktori kerja saya, dan memastikan saya dapat meniru segala -galanya di mesin saya sendiri. Jika anda mahu mengikuti tutorial ini sendiri, maka anda boleh mengklonkan projek ini dari repo GitHub kami. Anda boleh mulakan dengan kod dalam starter.html fail. Sila ambil perhatian bahawa anda memerlukan pelayan (seperti ini) untuk menjalankan kod ini, seperti di bawah tudung ia bergantung pada API Fetch untuk mengambil data.

izinkan saya memberi anda rundown cepat bagaimana kod ini berfungsi.

berjalan melalui kod kami

Pertama, kami mengisytiharkan beberapa pemalar di bahagian atas fail kami, yang akan kami gunakan untuk menentukan saiz carta pai kami:

Ini menjadikan kod kita boleh diguna semula, kerana jika kita mahu menjadikannya lebih besar atau lebih kecil, maka kita hanya perlu bimbang tentang mengubah nilai -nilai ini di sini.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Seterusnya, kami memasuki kanvas SVG ke skrin. Jika anda tidak tahu banyak tentang SVGs, maka anda boleh memikirkan kanvas sebagai ruang pada halaman yang kita boleh menarik bentuk. Jika kita cuba melukis SVG di luar kawasan ini, maka ia tidak akan muncul di skrin:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Kami merebut div kosong dengan id kawasan carta dengan panggilan ke d3.Select (). Kami juga melampirkan kanvas SVG dengan kaedah D3.Append (), dan kami menetapkan beberapa dimensi untuk lebar dan ketinggiannya menggunakan kaedah D3.attr ().

Kami juga melampirkan elemen kumpulan SVG ke kanvas ini, yang merupakan jenis elemen khas yang boleh kita gunakan untuk struktur unsur bersama. Ini membolehkan kami mengalihkan keseluruhan visualisasi kami ke tengah skrin, menggunakan atribut transformasi kumpulan kumpulan.

Selepas itu, kami menubuhkan skala lalai yang akan kami gunakan untuk menetapkan warna baru untuk setiap keping pai kami:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Seterusnya, kami mempunyai beberapa baris yang menubuhkan susun atur pai D3:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Dalam D3, susun atur adalah fungsi khas yang boleh kita panggil pada satu set data. Fungsi susun atur mengambil pelbagai data dalam format tertentu, dan meludahkan array yang diubah dengan beberapa nilai yang dihasilkan secara automatik, yang kemudiannya dapat melakukan sesuatu dengan.

kita perlu menentukan penjana laluan yang boleh kita gunakan untuk menarik arka kita. Penjana laluan membolehkan kami melukis laluan SVG dalam penyemak imbas web. Semua yang sebenarnya dilakukan oleh D3 adalah untuk mengaitkan kepingan data dengan bentuk pada skrin, tetapi dalam kes ini, kami ingin menentukan bentuk yang lebih rumit daripada hanya bulatan atau persegi yang mudah. Laluan SVG berfungsi dengan menentukan laluan untuk garis yang akan ditarik di antara, yang boleh kita tentukan dengan atributnya.

inilah yang kelihatan seperti ini:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

atribut D mengandungi pengekodan khas yang membolehkan penyemak imbas melukis jalan yang kami inginkan. Jika anda benar -benar ingin tahu apa maksud rentetan ini, anda boleh mengetahui tentangnya dalam dokumentasi SVG MDN. Untuk pengaturcaraan di D3, kita tidak perlu mengetahui apa -apa tentang pengekodan khas ini, kerana kita mempunyai penjana yang akan meludahkan atribut D kita untuk kita, yang kita hanya perlu memulakan dengan beberapa parameter mudah. ​​

Untuk arka, kita perlu memberikan penjana jalan kita sebagai innerradius dan nilai ouarradius dalam piksel, dan penjana akan menyusun matematik kompleks yang masuk ke dalam mengira setiap sudut untuk kita:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Untuk carta kami, kami menggunakan nilai sifar untuk innerradius kami, yang memberikan kami carta pai standard. Walau bagaimanapun, jika kita mahu melukis carta donat sebaliknya, maka semua yang perlu kita lakukan ialah memasangkan nilai yang lebih kecil daripada nilai oUterradius kita.

Selepas beberapa pengisytiharan fungsi, kami memuatkan dalam data kami dengan fungsi D3.json ():

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

dalam versi D3 5.x, panggilan ke d3.json () mengembalikan janji, yang bermaksud bahawa D3 akan mengambil kandungan fail JSON yang ditemui di jalan relatif yang kami berikan, dan melaksanakan fungsi yang Kami memanggil kaedah kemudian () sebaik sahaja ia dimuatkan. Kami kemudian mempunyai akses kepada objek yang kami lihat dalam hujah data panggilan balik kami.

Kami juga lulus dalam rujukan fungsi di sini - jenis - yang akan menukar semua nilai yang kita muatkan ke dalam nombor, yang boleh kita bekerjasama kemudian:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Jika kita menambah konsol.log (data); Kenyataan ke bahagian atas panggilan balik D3.Json kami, kami dapat melihat data yang kami sedang bekerjasama dengan:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Data kami dibahagikan kepada dua array yang berbeza di sini, mewakili data kami untuk epal dan oren, masing -masing.

Dengan garis ini, kami akan menukar data yang kami lihat setiap kali salah satu butang radio kami diklik:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Kami juga perlu memanggil fungsi kemas kini () pada larian pertama visualisasi kami, lulus dalam nilai awal (dengan array "epal" kami).

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Mari kita lihat apa fungsi kemas kini () kami lakukan. Jika anda baru ke D3, ini mungkin menyebabkan kekeliruan, kerana ia adalah salah satu bahagian yang paling sukar D3 untuk memahami ...

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>

Pertama, kami menggunakan parameter fungsi lalai untuk nilai. Sekiranya kita menyampaikan hujah ke fungsi kemas kini () kami (apabila kita menjalankannya untuk kali pertama), kita akan menggunakan rentetan itu, atau sebaliknya kita akan mendapat nilai yang kita inginkan dari acara klik Input radio kami.

Kami kemudian menggunakan corak kemas kini

dalam D3 untuk mengendalikan tingkah laku arka kami. Ini biasanya melibatkan melakukan gabungan data, keluar dari unsur -unsur lama, mengemas kini elemen sedia ada di skrin, dan menambah unsur -unsur baru yang ditambah ke data kami. Dalam contoh ini, kita tidak perlu bimbang tentang unsur -unsur keluar, kerana kita sentiasa mempunyai jumlah kepingan pai yang sama di skrin.

Pertama, ada data kami menyertai:

d3<span>.json("data.json", type).then(data => {
</span>  <span>// Do something with our data
</span><span>});
</span>

Setiap kali kemas kini visualisasi kami, ini mengaitkan pelbagai data baru dengan SVG kami pada skrin. Kami lulus data kami (sama ada array untuk "epal" atau "oren") ke dalam fungsi susun atur kami (), yang mengira beberapa sudut permulaan dan akhir, yang boleh digunakan untuk menarik arka kami. Pembolehubah laluan ini kini mengandungi pemilihan maya

dari semua arka pada skrin. Seterusnya, kami mengemas kini semua SVG pada skrin yang masih wujud dalam array data kami. Kami menambah dalam peralihan di sini - ciri hebat perpustakaan D3 - untuk menyebarkan kemas kini ini lebih daripada 200 milisaat:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Kami menggunakan kaedah attrtween () pada panggilan d3.transition () untuk menentukan peralihan tersuai yang harus digunakan D3 untuk mengemas kini kedudukan setiap arka (peralihan dengan atribut D). Kita tidak perlu melakukan ini jika kita cuba menambah peralihan ke kebanyakan atribut kita, tetapi kita perlu melakukan ini untuk peralihan antara jalan yang berbeza. D3 tidak dapat benar -benar memikirkan bagaimana untuk beralih antara laluan tersuai, jadi kami menggunakan fungsi arctween () untuk membiarkan D3 tahu bagaimana setiap laluan kita harus ditarik pada setiap masa dalam masa.

Inilah fungsi ini seperti:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

kami menggunakan d3.interpolate () di sini untuk membuat apa yang disebut interpolator. Apabila kita memanggil fungsi yang kita simpan dalam pembolehubah saya dengan nilai antara 0 dan 1, kita akan mendapatkan nilai yang ada di antara ini._current dan a. Dalam kes ini, ini.

Sebaik sahaja kami mempunyai interpolator yang disediakan, kami mengemas kini nilai ini. Laluan yang harus dimiliki oleh arka kita, berdasarkan nilai T ini. Peralihan kami akan menjalankan fungsi ini pada setiap tanda jam (lulus dalam hujah antara 0 dan 1), dan kod ini akan bermakna peralihan kami akan tahu di mana arka kami harus ditarik pada bila -bila masa.

Akhirnya, fungsi kemas kini kami () perlu menambah unsur -unsur baru yang tidak berada dalam pelbagai data sebelumnya:

Blok kod ini akan menetapkan kedudukan awal setiap arka kami, kali pertama fungsi kemas kini ini dijalankan. Kaedah Enter () di sini memberi kita semua elemen dalam data kami yang perlu ditambah ke skrin, dan kemudian kami dapat melengkung ke atas setiap elemen ini dengan kaedah attr (), untuk menetapkan mengisi dan kedudukan setiap kami arka. Kami juga memberikan setiap arka kami sempadan putih, yang menjadikan carta kami kelihatan sedikit kemas. Akhirnya, kami menetapkan harta ini._Current bagi setiap arka ini sebagai nilai awal item dalam data kami, yang kami gunakan dalam fungsi arctween ().

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Jangan bimbang jika anda tidak dapat mengikuti dengan tepat bagaimana ini berfungsi, kerana ia adalah topik yang cukup maju dalam D3. Perkara yang hebat tentang perpustakaan ini ialah anda tidak perlu mengetahui semua kerja dalamannya untuk membuat beberapa perkara yang kuat dengannya. Selagi anda dapat memahami bit yang perlu anda ubah, maka baiklah untuk abstrak beberapa butiran yang tidak sepenuhnya penting.

yang membawa kita ke langkah seterusnya dalam proses ...

Adapting Code

Sekarang kita mempunyai kod di persekitaran tempatan kita, dan kita faham apa yang sedang dilakukannya, saya akan menghidupkan data yang kita lihat, sehingga ia berfungsi dengan data yang kami minati .

Saya telah memasukkan data yang akan kami bekerjasama dalam data/ folder projek kami. Oleh kerana fail income.csv baru ini dalam format CSV kali ini (ia adalah jenis fail yang boleh anda buka dengan Microsoft Excel), saya akan menggunakan fungsi D3.csv (), bukannya D3.json ( ) Fungsi:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Fungsi ini pada dasarnya sama seperti d3.json () - menukar data kami ke dalam format yang boleh kami gunakan. Saya juga mengeluarkan fungsi inisialisasi jenis () sebagai hujah kedua di sini, kerana itu khusus untuk data lama kami.

Jika anda menambah pernyataan konsol.log (data) ke bahagian atas panggil balik D3.CSV, anda akan dapat melihat bentuk data yang kami kerjakan dengan:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Kami mempunyai pelbagai 50 item, dengan setiap item yang mewakili setahun dalam data kami. Untuk setiap tahun, kami mempunyai objek, dengan data untuk setiap lima kumpulan pendapatan, serta beberapa bidang lain. Kita boleh membuat carta pai di sini untuk salah satu daripada tahun -tahun ini, tetapi pertama -tama kita perlu mengosongkan data kami sedikit, supaya ia berada dalam format yang betul. Apabila kita ingin menulis data bergabung dengan D3, kita perlu lulus dalam array, di mana setiap item akan terikat dengan SVG.

Ingatlah bahawa, dalam contoh terakhir kami, kami mempunyai array dengan item untuk setiap keping pai yang kami mahu paparkan pada skrin. Bandingkan ini dengan apa yang kita ada pada masa ini, yang merupakan objek dengan kunci 1 hingga 5 yang mewakili setiap keping pai yang kita mahu lukis.

Untuk membetulkannya, saya akan menambah fungsi baru yang dipanggil PrepareData () untuk menggantikan fungsi jenis () yang kami ada sebelum ini, yang akan melelehkan setiap item data kami kerana ia dimuatkan:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Untuk setiap tahun, fungsi ini akan mengembalikan objek dengan array nilai, yang akan kami lalui ke dalam data kami. Kami melabelkan setiap nilai ini dengan medan nama, dan kami memberi mereka nilai berangka berdasarkan nilai pendapatan yang telah kami lakukan. Kami juga menjejaki pendapatan purata setiap tahun untuk perbandingan.

Pada ketika ini, kami mempunyai data kami dalam format yang boleh kami bekerjasama dengan:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Saya akan bermula dengan menjana carta untuk tahun pertama dalam data kami, dan kemudian saya akan bimbang untuk mengemas kini selama ini.

Pada masa ini, data kami bermula pada tahun 2015 dan berakhir pada tahun 1967, jadi kita perlu membalikkan array ini sebelum kita melakukan apa -apa lagi:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Tidak seperti carta pai biasa, untuk graf kami, kami ingin menetapkan sudut setiap arka kami, dan hanya mempunyai perubahan radius sebagai kemas kini visualisasi kami. Untuk melakukan ini, kami akan menukar kaedah nilai () pada susun atur pai kami, supaya setiap kepingan pai selalu mendapat sudut yang sama:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Seterusnya, kita perlu mengemas kini jejari kami setiap kali kemas kini visualisasi kami. Untuk melakukan ini, kita perlu membuat skala yang boleh kita gunakan. Skala adalah fungsi dalam d3 yang mengambil input antara dua nilai, yang kita lalui sebagai domain, dan kemudian meludahkan output antara dua nilai yang berbeza, yang kita lalui sebagai julat. Inilah skala yang akan kami gunakan:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Kami menambah skala ini sebaik sahaja kami mempunyai akses kepada data kami dan kami mengatakan bahawa input kami harus berkisar antara 0 dan nilai terbesar dalam dataset kami, yang merupakan pendapatan dari kumpulan terkaya pada tahun lepas Dalam data kami (data [49]. nilai [4] .value). Untuk domain, kami menetapkan selang yang nilai output kami harus berkisar antara.

Ini bermakna bahawa input sifar harus memberi kita nilai piksel sifar, dan input nilai terbesar dalam data kita harus memberi kita nilai separuh nilai lebar atau ketinggian kita - yang mana lebih kecil.

Perhatikan bahawa kami juga menggunakan skala akar di sini. Alasan yang kami lakukan ini ialah kami mahu kawasan kepingan pai kami berkadar dengan pendapatan setiap kumpulan kami, dan bukannya radius. Oleh kerana kawasan = πr ² , kita perlu menggunakan skala akar persegi untuk menjelaskan ini.

kemudian kita boleh menggunakan skala ini untuk mengemas kini nilai ouarradius penjana arka kami di dalam kemas kini kami () fungsi:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Apabila data kami berubah, ini akan mengedit nilai jejari yang kami mahu gunakan untuk setiap arka kami.

kita juga harus mengeluarkan panggilan kami ke OUTERRADIUS ketika kami pada mulanya menubuhkan penjana arka kami, supaya kami hanya mempunyai ini di bahagian atas fail kami:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Akhirnya, kita perlu membuat beberapa suntingan untuk fungsi kemas kini ini (), supaya semuanya sesuai dengan data baru kami:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Oleh kerana kita tidak akan menggunakan butang radio kita lagi, saya hanya lulus dalam objek tahun yang kita mahu gunakan dengan memanggil:

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>

Akhirnya, saya akan mengeluarkan pendengar acara yang kami tetapkan untuk input borang kami. Sekiranya semua telah merancang, kita sepatutnya mempunyai carta yang cantik untuk tahun pertama dalam data kami:

menjadikannya dinamik

Langkah seterusnya adalah untuk mempunyai kitaran visualisasi kami antara tahun -tahun yang berbeza, menunjukkan bagaimana pendapatan telah berubah dari masa ke masa. Kami akan melakukan ini dengan menambahkan panggilan ke fungsi setInterval () JavaScript, yang boleh kita gunakan untuk melaksanakan beberapa kod berulang kali:

d3<span>.json("data.json", type).then(data => {
</span>  <span>// Do something with our data
</span><span>});
</span>

Kami menubuhkan pemasa pada masa ini pemboleh ubah, dan setiap 200ms, kod ini akan menjalankan fungsi langkah (), yang akan mengemas kini carta kami ke data tahun depan, dan meningkatkan pemasa dengan 1. Jika pemasa adalah pada nilai 49 (tahun lepas dalam data kami), ia akan menetapkan semula dirinya. Ini sekarang memberi kita gelung yang bagus yang akan berjalan secara berterusan:

membuat perkara sedikit lebih berguna. Saya juga akan menambah beberapa label yang memberi kita angka mentah. Saya akan menggantikan semua kod HTML dalam badan fail kami dengan ini:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Kami menstrukturkan halaman kami di sini menggunakan sistem grid Bootstrap, yang membolehkan kami memformat elemen halaman kami dengan kemas ke dalam kotak.

Saya kemudian akan mengemas kini semua ini dengan jQuery setiap kali perubahan data kami:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Saya juga akan membuat beberapa suntingan untuk CSS di bahagian atas fail kami, yang akan memberi kami legenda untuk setiap arka kami, dan juga memusatkan tajuk kami:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

apa yang kita lakukan adalah sesuatu yang agak rapi:

Oleh kerana agak sukar untuk melihat bagaimana arka ini telah berubah dari masa ke masa di sini, saya ingin menambah beberapa garisan grid untuk menunjukkan apa yang kelihatan seperti pada tahun pertama data kami:

Saya menggunakan kaedah Array.Foreach () untuk mencapai ini, walaupun saya juga boleh pergi dengan pola Update Umum

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

biasa D3

sekali lagi (gabungan/keluar/kemas kini/enter). Saya juga ingin menambah garis untuk menunjukkan pendapatan purata di Amerika Syarikat, yang akan saya kemas kini setiap tahun. Pertama, saya akan menambah garis purata untuk kali pertama:

maka saya akan mengemas kini ini pada akhir fungsi kemas kini kami () setiap tahun berubah:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

saya harus ambil perhatian bahawa penting bagi kita untuk menambahkan setiap lingkaran ini

selepas

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>

panggilan pertama kami untuk mengemas kini (), kerana jika tidak, mereka akan menjadi

di belakang Laluan arka kami (lapisan SVG ditentukan oleh urutan di mana mereka ditambah ke skrin, dan bukannya oleh z-indeks mereka). Pada ketika ini, kami mempunyai sesuatu yang menyampaikan data yang kami bekerja dengan lebih jelas:

menjadikannya interaktif

Sebagai langkah terakhir, saya mahu kami menambah beberapa kawalan untuk membiarkan pengguna menggali ke dalam tahun tertentu. Saya ingin menambah butang Play/jeda , serta slider setahun, membolehkan pengguna memilih tarikh tertentu untuk dilihat.

Berikut adalah HTML yang akan saya gunakan untuk menambah unsur -unsur ini ke skrin:

kita perlu menambah beberapa pendengar acara kepada kedua -dua elemen ini, untuk jurutera tingkah laku yang kita cari.

Pertama, saya ingin menentukan tingkah laku Butang

kami/jeda

d3<span>.json("data.json", type).then(data => {
</span>  <span>// Do something with our data
</span><span>});
</span>

. Kami perlu menggantikan kod yang kami tulis untuk selang masa kami untuk membolehkan kami berhenti dan memulakan pemasa dengan butang. Saya akan mengandaikan bahawa visualisasi bermula dalam keadaan "dijeda", dan kita perlu menekan butang ini untuk menendang sesuatu.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Setiap kali butang kami diklik, blok IF/lain kami di sini akan menentukan tingkah laku yang berbeza, bergantung kepada sama ada butang kami adalah butang "main" atau butang "jeda". Jika butang yang kami klik berkata "Main", kami akan menukar butang ke butang "jeda", dan mulakan gelung selang kami. Sebagai alternatif, jika butang adalah butang "jeda", kami akan menukar teksnya untuk "bermain", dan kami akan menggunakan fungsi ClearInterval () untuk menghentikan gelung dari berjalan.

Untuk gelangsar kami, saya mahu menggunakan gelangsar yang datang dengan perpustakaan UI JQuery. Saya termasuk ini dalam HTML kami, dan saya akan menulis beberapa baris untuk menambah ini ke skrin:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

di sini, kami menggunakan pilihan slaid untuk melampirkan pendengar acara ke gelangsar. Setiap kali gelangsar kami dipindahkan ke nilai lain, kami mengemas kini pemasa kami ke nilai baru ini, dan kami menjalankan fungsi kemas kini kami () pada tahun itu dalam data kami.

Kami boleh menambah baris ini pada akhir fungsi kemas kini kami () supaya gelangsar kami bergerak ke tahun yang betul apabila gelung kami berjalan:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Saya juga akan menambah garis ke fungsi UpdateHtml () kami (yang berjalan apabila visualisasi kami berubah), yang boleh menyesuaikan nilai label berdasarkan tahun semasa dalam data:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Saya akan membuang beberapa baris lagi ke CSS kami untuk menjadikan semuanya kelihatan lebih kemas:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

dan di sana kami memilikinya - produk siap kami - visualisasi data interaktif yang berfungsi sepenuhnya, dengan segala -galanya berfungsi seperti yang diharapkan.

Mudah -mudahan, tutorial ini menunjukkan kuasa sebenar D3, membiarkan anda membuat apa -apa yang anda boleh bayangkan.

Bermula dengan D3 dari awal adalah proses yang sukar, tetapi ganjarannya berbaloi. Jika anda ingin belajar bagaimana membuat visualisasi tersuai anda sendiri, berikut adalah beberapa sumber dalam talian yang mungkin anda dapati membantu:

• Gambaran keseluruhan kandungan D3.js SitePoint.
• Pengenalan kepada perpustakaan di laman utama D3. Ini berjalan melalui beberapa arahan yang paling asas, menunjukkan kepada anda cara membuat beberapa langkah pertama anda dalam D3.
• "Mari buat carta bar" oleh Mike Bostock - Pencipta D3 - menunjukkan pemula bagaimana membuat salah satu graf yang paling mudah di perpustakaan.
d3.js dalam Tindakan oleh Elijah Meeks ($ 35), yang merupakan buku teks pengantar yang kukuh yang masuk ke dalam banyak detail.
• Saluran Slack D3 sangat menyambut kepada pendatang baru kepada D3. Ia juga mempunyai bahagian "Bahan Pembelajaran" dengan koleksi sumber yang hebat.
• Kursus Udemy dalam talian ini ($ 20), yang merangkumi segala -galanya di perpustakaan dalam satu siri kuliah video. Ini bertujuan untuk pemaju JavaScript, dan termasuk empat projek sejuk.
• pelbagai contoh visualisasi yang boleh didapati di bl.ocks.org dan blockbuilder.org.
• Rujukan API D3, yang memberikan penjelasan teknikal yang menyeluruh tentang segala yang ditawarkan oleh D3.
Dan jangan lupa, jika anda ingin melihat versi siap kod yang saya gunakan dalam artikel, maka anda boleh menemuinya di repo GitHub kami.

Soalan Lazim (Soalan Lazim) pada Visualisasi Data Interaktif dengan JavaScript dan D3

Apakah kepentingan D3 dalam visualisasi data interaktif?

D3, yang bermaksud dokumen yang didorong oleh data, adalah perpustakaan JavaScript yang digunakan secara meluas untuk mewujudkan visualisasi data interaktif. Ia membolehkan anda mengikat data sewenang-wenang ke model objek dokumen (DOM), dan kemudian memohon transformasi yang didorong oleh data ke dokumen. D3 bukanlah rangka kerja monolitik yang bertujuan untuk menyediakan setiap ciri yang boleh dibayangkan. Sebaliknya, ia menyelesaikan masalah masalah: manipulasi dokumen yang cekap berdasarkan data. Ini mengelakkan perwakilan proprietari dan memberikan fleksibiliti yang luar biasa, mendedahkan keupayaan penuh piawaian web seperti HTML, SVG, dan CSS. adalah unik kerana ia memberi anda fleksibiliti untuk membuat visualisasi data yang tidak mungkin dengan perpustakaan lain. Ia membolehkan anda untuk memanipulasi DOM secara langsung, yang bermaksud anda mempunyai kawalan sepenuhnya ke atas penampilan akhir visualisasi anda. D3 juga menggunakan pendekatan deklaratif, yang bermaksud anda menentukan apa yang anda mahukan hasil akhir kelihatan seperti, dan D3 angka bagaimana untuk sampai ke sana. Ya, D3 mampu mengendalikan dataset yang besar dan kompleks. Ia mempunyai keupayaan manipulasi data yang kuat yang membolehkan anda bekerja dengan data dalam sebarang format. D3 juga mempunyai fungsi terbina dalam untuk memuatkan data dari sumber yang berbeza, menjadikannya lebih mudah untuk diintegrasikan dengan infrastruktur data sedia ada anda.

Bagaimana saya boleh membuat visualisasi d3 saya interaktif?

D3 menyediakan beberapa kaedah untuk menambah interaktiviti kepada visualisasi anda. Anda boleh menggunakan pendengar acara untuk bertindak balas terhadap tindakan pengguna seperti klik atau pergerakan tetikus, dan anda boleh menggunakan peralihan untuk menghidupkan perubahan dalam data anda. D3 juga menyokong zoom dan panning, yang boleh berguna untuk meneroka dataset yang besar. sains untuk perniagaan. Beberapa kes penggunaan biasa termasuk membuat peta interaktif, membina carta dinamik dan graf, menggambarkan rangkaian kompleks, dan mewujudkan animasi yang didorong oleh data tersuai. , pemahaman asas tentang JavaScript adalah perlu menggunakan D3 dengan berkesan. D3 adalah perpustakaan JavaScript, jadi anda perlu menulis kod JavaScript untuk membuat visualisasi anda. Walau bagaimanapun, API D3 direka untuk menjadi intuitif dan mudah dipelajari, jadi walaupun anda bukan pakar JavaScript, anda masih boleh membuat visualisasi yang kuat dengan D3. ? Sebagai contoh, anda boleh menggunakan D3 untuk membuat komponen visualisasi aplikasi yang lebih besar yang dibina dengan rangka kerja seperti React atau Sudut. sangat sesuai untuk visualisasi data masa nyata. Ia mempunyai mekanisme kemas kini data yang fleksibel yang membolehkan anda mengemas kini visualisasi anda dengan mudah sebagai data baru. Ini menjadikan D3 pilihan yang baik untuk aplikasi seperti papan pemuka atau suapan data hidup. >

Terdapat banyak sumber yang tersedia untuk pembelajaran D3. Laman web rasmi D3 mempunyai banyak dokumentasi dan contoh, dan terdapat banyak tutorial dan kursus dalam talian yang meliputi D3 secara mendalam. Amalan juga penting - semakin banyak anda menggunakan D3, semakin selesa anda akan menjadi dengan konsep dan API. Ia mempunyai beberapa batasan. Ia memerlukan pemahaman yang baik tentang javascript dan piawaian web, yang boleh menjadi penghalang bagi pemula. D3 juga meninggalkan banyak keputusan sehingga pemaju, yang boleh menjadi luar biasa jika anda tidak pasti di mana untuk bermula. Akhirnya, sementara D3 mampu mengendalikan dataset yang besar, prestasi dapat menjadi masalah dengan visualisasi yang sangat besar atau kompleks.

Atas ialah kandungan terperinci Visualisasi data interaktif dengan JavaScript moden dan D3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!