Buat Visualisasi Data dalam JavaScript Menggunakan Dimple dan D3

World Wide Web meletakkan banyak data di hujung jari kami. Oleh kerana jumlah data ini, membentangkannya dengan cara yang menonjol, atau dengan cara yang mendapat mesej anda, sering kali membuktikan rumit. Di sinilah visualisasi data masuk.

Dalam artikel ini, saya akan membimbing anda melalui penciptaan visualisasi data, iaitu Kenderaan AS mengimbas kembali untuk bulan Januari 2015, menggunakan perpustakaan Dimple.js JavaScript yang dibina di atas D3.Js.

Takeaways Key

Visualisasi data boleh dibuat menggunakan JavaScript dan perpustakaan Dimple.js, yang dibina di atas D3.js, untuk membentangkan jumlah data yang besar dengan cara yang menarik.
Proses ini melibatkan menetapkan matlamat, bekerja dengan data, dan mengikat data ke objek D3; Dalam kes ini, carta bar yang menggambarkan jumlah kenderaan yang ditarik balik oleh Maker untuk Januari 2015 telah diwujudkan.
Pembersihan dan penyediaan data adalah penting untuk visualisasi data yang berjaya; Ini termasuk mengekstrak data yang relevan, mengurangkan lajur ke subset yang tersedia, dan mengumpulkan data secara manual berdasarkan kriteria tertentu.
Perpustakaan D3.JS menyediakan sokongan out-of-the-box untuk pelbagai format fail data seperti CSV, TSV, atau JSON dan boleh mengubahnya menjadi array JavaScript untuk pemprosesan.
Ciri -ciri tambahan seperti petua, peralihan estetik, dan manipulasi label boleh ditambah untuk meningkatkan visualisasi data dan interaksi pengguna.

Menetapkan matlamat

NHTSA

/odi menyediakan fail ingat (yang boleh diakses melalui laman web mereka) yang mengandungi semua kempen kecacatan dan pematuhan yang berkaitan dengan keselamatan NHTSA sejak tahun 1967. Matlamat kami adalah untuk mengekstrak data untuk bulan tertentu ( Januari 2015), dan untuk membuat carta bar daripadanya, menggambarkan jumlah kenderaan yang ditarik balik oleh pembuat. Tonton Visualisasikan Data dengan D3.js Menggambarkan data anda dengan javascript

Tonton kursus ini Tonton kursus ini Visualisasi data ini tidak akan dijelaskan (kami akan menunjukkan data mentah), dan tidak dapat diterokai (tidak banyak naratif bagi penonton untuk membina dari data itu). Walau bagaimanapun, saya berhasrat untuk memaparkan maklumat tambahan di sebelah carta apabila pengguna melayang di salah satu bar.

inilah yang akan kita hadapi dengan:

anda dapat melihat demo hidup (lebih kecil) pada akhir artikel atau melihat asal pada codepen.

Bekerja dengan data

hanya menyimpan data yang kita perlukan

Semua fail yang disebutkan dalam bahagian ini boleh didapati di repo GitHub kami.

Fail asal flat_rcl.txt (pautan) adalah fail nilai yang dipisahkan tab yang mengandungi lot data-109,682 rekod tepat. Terdapat fail yang disertakan rcl.txt (pautan) yang memperincikan lajur yang berkaitan dengan data ini.

kerana kami hanya berminat dengan data untuk Januari 2015 -atau sebaliknya rekod yang mana tarikh penciptaan rekod adalah Januari 2015 -rekod lain boleh dikeluarkan. Untuk melakukan ini, saya menggunakan program Spreadsheet OpenOffice Calc (walaupun perisian spreadsheet lain akan mencukupi). Fail yang dihasilkan, rcl_january_2015.csv (pautan) hanya mengira 201 rekod.

sekarang kita perlu mengurangkan lajur ke subset yang tersedia, iaitu:
Tarikh Penciptaan Rekod, Pembuat, Model, Tahun Model, Tarikh Mulakan Pembuatan, Tarikh Akhir Pembuatan, Potensi Bilangan Unit yang terjejas, Ringkasan Kecacatan, Ringkasan Akibat, dan Ringkasan Pembetulan. Kami kemudian boleh menambah nama lajur ke baris pertama fail CSV yang dihasilkan, rcl_january_2015_clean.csv (pautan).

Ini memberi kita data mentah yang kita perlukan untuk visualisasi kita.

Buat struktur data

Sekarang kita perlu mengumpulkan semula secara manual oleh pembuat, menggabungkan rekod -rekod yang mempunyai kecacatan yang sama. Kita perlu memastikan bahawa rekod gabungan disusun mengikut tarikh, kemudian dengan model dan bahawa mereka mempunyai jumlah potensi kumulatif jumlah unit yang terjejas.

Kami akan menggunakan struktur data JSON untuk kumpulan ini.

3 Ini boleh dikelompokkan menjadi satu baris yang menyatakan bahawa J4500 MCI dari tahun 2013, 2014 dan 2015, yang mempunyai tahun yang sama pembuatan, membentangkan kecacatan yang sama. Bilangan potensi unit yang terjejas sudah kumpulan ketiga -tiga model ini bersama -sama dalam dataset.

inilah struktur data JSON yang akan kita gunakan:

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

Setelah melancarkan proses ini (dan melarikan diri dari sebut harga ganda), kami kini mempunyai fail CSV

rcl_january_2015_json.csv (pautan). Demi keringkasan, contoh kerja kami akan menunjukkan hanya tiga pembuat pertama fail asal (3 dari 46).

mengikat data ke objek D3

D3 menyediakan sokongan out-of-the-box untuk format fail data, seperti CSV, TSV, atau JSON. Panggilan Ajax dilakukan untuk mengambil fail, maka ia dihuraikan dan diubah menjadi array JavaScript. Fail CSV yang kami buat boleh diambil dengan kod berikut:

d3<span>.csv("RCL.csv", function (data) {
</span>  <span>// process the data
</span><span>});</span>

kita juga boleh menentukan array JavaScript secara langsung dalam kod, yang akan kita lakukan di sini untuk tujuan demo Codepen kami. Struktur data telah disimpan sedekat mungkin ke array D3 akan dibuat dari fail CSV.

data <span>= [
</span>  <span>{
</span>    <span>'Record creation date':'20150105',
</span>    <span>'Maker':'MCI',
</span>    <span>'Potential number of units affected':'109',
</span>    <span>'JSON data': '{
</span>      <span>"items":[
</span>        <span>{
</span>          <span>"item": {
</span>            <span>"date":"January, 5 2015",
</span>            <span>"models":[
</span>              <span>"J4500 (years 2013, 2014, 2015) ..."
</span>            <span>],
</span>            <span>"units":"109",
</span>            <span>"defect":"...",
</span>            <span>"consequence":"...",
</span>            <span>"corrective":"..."
</span>          <span>}
</span>        <span>}
</span>      <span>]
</span>    <span>}'
</span>  <span>},
</span>  <span>...
</span><span>];</span>

Dan sekarang, mari kita menyelam!

<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>

HTML adalah mudah: dua div, satu untuk carta (ingat semula), yang lain untuk memaparkan butiran tambahan jika pengguna melayari salah satu bar (ingat semula).

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

kita mula -mula menambah objek SVG ke elemen Div, merujuknya dengan IDnya. Kemudian kami menghubungkan data kami ke carta baru kami, yang akan diberikan dalam SVG. Akhirnya, kami menetapkan batas carta secara manual untuk meletakkannya dengan betul dalam div induknya.

d3<span>.csv("RCL.csv", function (data) {
</span>  <span>// process the data
</span><span>});</span>

kami menetapkan paksi x carta ke medan pembuat data kami-kami menggunakan kaedah addCategoryaxis sebagai pembuatnya membentuk data kategori. Kami memerintahkan pembuat mengikut abjad menggunakan kaedah addorderrule dan menyembunyikan tajuk paksi-x (yang akan menjadi pembuat), kerana nama pembuatnya adalah jelas.

data <span>= [
</span>  <span>{
</span>    <span>'Record creation date':'20150105',
</span>    <span>'Maker':'MCI',
</span>    <span>'Potential number of units affected':'109',
</span>    <span>'JSON data': '{
</span>      <span>"items":[
</span>        <span>{
</span>          <span>"item": {
</span>            <span>"date":"January, 5 2015",
</span>            <span>"models":[
</span>              <span>"J4500 (years 2013, 2014, 2015) ..."
</span>            <span>],
</span>            <span>"units":"109",
</span>            <span>"defect":"...",
</span>            <span>"consequence":"...",
</span>            <span>"corrective":"..."
</span>          <span>}
</span>        <span>}
</span>      <span>]
</span>    <span>}'
</span>  <span>},
</span>  <span>...
</span><span>];</span>

Kami menetapkan paksi y carta ke bilangan potensi unit yang terjejas dalam data kami. Kita boleh menggunakan kaedah addMeasureaxis di sini, yang mentakrifkan paksi linear dari nilai yang diberikan, tetapi sebagai kemenangan pembuat mempunyai lebih daripada 20 kali bilangan potensi unit yang terjejas daripada sama ada MCI atau Thor, lajur yang dihasilkan akan kerdil kedua -dua orang lain . Dalam kes ini, skala logaritma memberikan lebih banyak ruang untuk nilai yang lebih kecil, jadi kami menggunakan kaedah addlogaxis, yang mungkir ke pangkalan 10.

<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>

Sekarang kita telah menentukan paksi kita, kita boleh mengikat mereka bersama -sama untuk menjadikan grafik. Untuk ini kami memilih carta bar melalui dimple.plot.bar, dan kami mengikatnya ke medan data Maker. Elemen array kedua, data JSON, akan mengikat bahagian JSON dari data kami ke setiap bar dan membolehkan kami mengakses data yang betul apabila melayang di atas bar dengan tetikus.

<span>var svg = dimple.newSvg("#RecallsChart", 800, 560);
</span><span>var myChart = new dimple<span>.chart</span>(svg, data);
</span>myChart<span>.setBounds(60, 30, 710, 355)</span>

Secara lalai, tooltips dipaparkan apabila melayang dengan tetikus di atas unit plot (di sini, bar) dan tunjukkan paksi dan data siri. Dalam kes kami: pembuat (nilai paksi x), bilangan potensi unit yang terjejas (nilai paksi y), dan nilai teks biasa data JSON kami.

Fungsi GetToolTiptext terlalu banyak di sini untuk memproses data JSON dan memaparkannya di Div lain ke sisi. Ia mengembalikan pelbagai data yang ingin kami paparkan sebagai tooltip, ia Format nombor bahasa Inggeris generik melalui kaedah JavaScript Tolocalestring terbina dalam).

Tetapi mari kita kembali ke parsing data JSON.

dua bidang agregat yang kami akses (Aggfield [0] dan Aggfield [1]) sepadan dengan pelbagai bidang data yang kami tetapkan sebagai siri (["pembuat", "data json"]), dengan Aggfield sendiri menjadi harta objek elemen yang mendasari.

Kami menghuraikan tali JSON dengan fungsi parsejson JQuery, menetapkan pelbagai tajuk panjang penuh yang sepadan dengan kekunci objek JSON kami, kemudian, dengan melelehkan objek JSON, kami membina rentetan HTML untuk ditambah ke Div dengan ID dengan ID dengan ID dengan ID dengan ID dengan ID RecreakDetails.

<span>var x = myChart.addCategoryAxis("x", "Maker");
</span>x<span>.addOrderRule("Maker");
</span>x<span>.title = '';</span>

kami akhirnya melukis carta dengan peralihan estetik menggunakan kemudahan elastik dengan kelewatan satu saat.

myChart<span>.addLogAxis("y", "Potential number of units affected");</span>

Adakah saya katakan akhirnya? Nah, di sini kita menambah satu lagi helah estetik ke label paksi-x.

Secara lalai, label paksi x ditulis secara mendatar. Tetapi mereka boleh dengan mudah bertindih, jadi kami akan menulis secara menegak. Di sinilah pendedahan Dimple terhadap objek D3 yang mendasari berguna. Sila ambil perhatian bahawa kita hanya boleh mengubahnya sebaik sahaja carta telah ditarik, oleh itu selepas panggilan myChart.Draw ().

Untuk melakukan ini, kita mula-mula memilih setiap teks label, atau sebaliknya bentuk SVG yang sepadan yang dikaitkan dengan paksi X untuk setiap label. Kaedah getBbox () tergolong dalam interfacesvglocatable dan mengembalikan objek svGrect yang mentakrifkan kotak sempadan, mendedahkan koordinat, ketinggian dan lebarnya. Kami kemudian melakukan putaran kotak SVG, dan terjemahan menegak sedikit untuk meletakkannya lebih dekat dengan garis paksi-x.

dan inilah hasil akhir:

Lihat kenderaan pena yang ditarik balik untuk Januari 2015 oleh SitePoint (@SitePoint) pada Codepen.

Lebar pen ini telah dikurangkan agar sesuai dengan artikel itu. Anda dapat melihat codepen asal di sini

Kesimpulan

Dalam artikel ini kita telah melihat bagaimana untuk membersihkan dan menyediakan data untuk visualisasi data, khususnya menentukan struktur data untuk memadankan hasil akhir yang kita ada dalam fikiran. Kami menggunakan kedua -dua perpustakaan dimple.js dan d3.js, dengan beberapa panggilan terhad kepada jQuery (kebanyakannya berkaitan dengan pemprosesan JSON). Kami telah menarik carta bar dari data kami, dengan sedikit interaksi penerokaan dengan melampaui ciri tooltip Dimple. Kami juga telah mengakses objek D3 yang mendasari untuk memanipulasi label paksi x.

Sebagai nota sampingan, SVG kini disokong secara meluas, tetapi amalan yang baik untuk menyemaknya terlebih dahulu (dengan Modernizr misalnya), dan untuk menyediakan dengan sandaran seperti imej PNG di mana sahaja diperlukan. Sudah tentu, pemuatan bersyarat d3.js dan dimple.js juga perlu diambil kira.

Jika anda ingin menyelam lebih mendalam ke dalam visualisasi data, Udacity menawarkan MOOC sendiri yang bertajuk Visualisasi Data dan D3.js yang meliputi konsep visualisasi, penggunaan d3.js dan dimple.js, struktur naratif dan animasi. Juga, laman Mike Bostock (pencipta D3.js) adalah sumber yang sempurna jika anda ingin memahami konsep di belakang perpustakaan ini, sementara kedua -dua Dimple dan D3 menyediakan senarai contoh untuk belajar dari.

Soalan Lazim (Soalan Lazim) Mengenai Membuat Visualisasi Data dengan JavaScript, Dimple, dan D3

Bagaimana saya boleh membuat carta multiline menggunakan dimple dan d3?

Membuat carta multiline menggunakan dimple dan d3 melibatkan beberapa langkah. Pertama, anda perlu menyediakan fail HTML anda dan sertakan perpustakaan D3 dan Dimple. Kemudian, anda perlu memuatkan data anda, yang boleh dalam pelbagai format seperti CSV, JSON, atau TSV. Sebaik sahaja data anda dimuatkan, anda boleh membuat objek SVG baru dan menetapkan dimensinya. Selepas itu, anda boleh membuat carta dimple baru, tentukan paksi, dan tambahkan garis untuk setiap siri data. Akhirnya, anda boleh menyesuaikan penampilan carta dan menambah interaktiviti jika diperlukan. Visualisasi, tetapi mereka mempunyai beberapa perbezaan. D3 adalah perpustakaan peringkat rendah yang menyediakan banyak fleksibiliti dan kawalan, tetapi ia boleh menjadi kompleks dan verbose. Sebaliknya, Dimple dibina di atas D3 dan menyediakan API peringkat tinggi yang memudahkan proses mewujudkan jenis carta biasa, termasuk carta garis. Walau bagaimanapun, ia mungkin tidak memberikan fleksibiliti sebanyak D3 untuk visualisasi yang lebih kompleks atau tersuai. pengalaman dan memberikan pandangan tambahan. Anda boleh menambah petua yang memaparkan lebih banyak maklumat apabila pengguna melayari titik data. Anda juga boleh menambah pendengar acara yang bertindak balas terhadap tindakan pengguna seperti klik atau pergerakan tetikus. Sebagai contoh, anda boleh menyerlahkan garis atau menunjukkan pandangan terperinci mengenai data apabila pengguna mengkliknya. Untuk menyesuaikan penampilan carta anda. Anda boleh menukar warna, fon, dan saiz unsur -unsur. Anda juga boleh menyesuaikan skala dan paksi untuk mewakili data anda dengan lebih baik. Sebagai contoh, anda boleh menggunakan skala logaritma untuk data yang merangkumi beberapa pesanan magnitud, atau anda boleh memutar label pada paksi-x untuk kebolehbacaan yang lebih baik.

Mengendalikan data yang hilang atau tidak konsisten adalah bahagian penting dalam visualisasi data. Dimple menyediakan beberapa kaedah untuk menangani data tersebut. Anda boleh menggunakan kaedah dimple.filterData () untuk menapis nilai yang tidak diingini, atau anda boleh menggunakan kaedah dimple.addMeaseAxis () untuk mengagregatkan data dan mengisi nilai yang hilang. Anda juga boleh menggunakan fungsi manipulasi data D3 untuk membersihkan dan memproses data anda sebelum menggambarkannya.

Bagaimana saya boleh membuat carta bar menggunakan dimple dan d3?

Membuat carta bar dengan dimple dan d3 melibatkan langkah -langkah yang sama untuk membuat carta garis. Anda perlu memuatkan data anda, membuat objek SVG, dan membuat carta Dimple baru. Walau bagaimanapun, bukannya menambah garisan, anda menambah bar menggunakan kaedah dimple.adDseries (). Anda juga boleh menyesuaikan penampilan bar dan menambah interaktiviti seperti yang diperlukan. Berguna untuk berkongsi atau menyampaikan visualisasi data anda. Anda boleh menggunakan kaedah nod () D3 untuk mendapatkan elemen SVG carta, dan kemudian menggunakan perpustakaan seperti CANVG atau JSPDF untuk menukar SVG ke imej atau PDF. Perhatikan bahawa ini mungkin memerlukan persediaan dan ketergantungan tambahan.

Bagaimana saya boleh menghidupkan carta dimple saya? Anda boleh menggunakan kaedah peralihan D3 untuk menghidupkan perubahan dalam data atau penampilan carta. Sebagai contoh, anda boleh menghidupkan garis dalam carta garis untuk lancar peralihan dari satu keadaan ke yang lain apabila data berubah.

Bagaimana saya boleh membuat plot berselerak menggunakan dimple dan d3?

Plot berselerak dengan Dimple dan D3 melibatkan langkah -langkah yang sama untuk membuat carta garis atau bar. Anda perlu memuatkan data anda, membuat objek SVG, dan membuat carta Dimple baru. Walau bagaimanapun, bukannya menambah garisan atau bar, anda menambah mata menggunakan kaedah dimple.adDseries (). Anda juga boleh menyesuaikan penampilan mata dan menambah interaktiviti seperti yang diperlukan. untuk mencipta jenis carta lain. Anda perlu memuatkan data anda, membuat objek SVG, dan membuat carta Dimple baru. Walau bagaimanapun, bukannya menambah garisan, bar, atau mata, anda menambah pai menggunakan kaedah dimple.addseries (). Anda juga boleh menyesuaikan penampilan pai dan menambah interaktiviti seperti yang diperlukan.

Atas ialah kandungan terperinci Buat Visualisasi Data dalam JavaScript Menggunakan Dimple dan D3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!