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
/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
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.
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>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<span>.csv("RCL.csv", function (data) {
</span> <span>// process the data
</span><span>});</span>
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><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>
<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
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.
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!
Perbezaan antara vscode dan visual studio
Apakah maklumat peribadi yang akan dilihat oleh rakan rapat Douyin?
Penyelesaian kepada masalah bahawa fail exe tidak boleh dibuka dalam sistem win10
Kod heksadesimal warna biasa
Apakah fail .Xauthority?
Bagaimana untuk menukar kata laluan dalam MySQL
Bagaimana untuk mendapatkan panjang tatasusunan dalam js
menukar penggunaan arahan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
