Rumah > Artikel > pembangunan bahagian belakang > Bina aplikasi web visualisasi data interaktif menggunakan Flask dan D3.js
Bina aplikasi web visualisasi data interaktif menggunakan Flask dan D3.js
- 王林asal
- 2023-06-17 21:00:151189semak imbas
Dalam beberapa tahun kebelakangan ini, analisis data dan visualisasi data telah menjadi kemahiran yang amat diperlukan dalam banyak industri dan bidang. Adalah sangat penting bagi penganalisis dan penyelidik data untuk membentangkan sejumlah besar data di hadapan pengguna dan membolehkan pengguna memahami maksud dan ciri data melalui visualisasi. Untuk memenuhi keperluan ini, telah menjadi trend untuk menggunakan D3.js untuk membina visualisasi data interaktif dalam aplikasi web. Dalam artikel ini, kami akan membincangkan cara membina aplikasi web visualisasi data interaktif menggunakan Flask dan D3.js.
Flask ialah rangka kerja aplikasi web yang ringan berdasarkan Python yang sangat mudah dipelajari dan digunakan. Ia menyediakan banyak ciri berguna seperti penghalaan, templat, ORM, dsb., yang boleh digunakan untuk membina aplikasi web dengan cepat. D3.js ialah perpustakaan JavaScript yang digunakan khusus untuk visualisasi data Ia boleh menjana pelbagai elemen visual seperti carta dan jadual berdasarkan data, dan membolehkan pengguna berinteraksi dengan elemen ini.
Pertama, kita perlu memasang perpustakaan Flask dan D3.js. Hanya masukkan arahan berikut dalam konsol:
pip install Flask
Seterusnya, kita perlu mencipta aplikasi Flask. Dalam Python, kita boleh menggunakan kod berikut untuk membina aplikasi Flask yang paling mudah:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return "Hello, World!"
if __name__ == "__main__":
app.run()Kod ini menyediakan aplikasi Flask dan mentakrifkan laluan yang memperuntukkan permintaan HTTP kepada fungsiindex() untuk dikendalikan. Dalam contoh ini, fungsi index() hanya mengembalikan "Hello, World!" yang mudah.
Seterusnya, kita perlu mengimport perpustakaan D3.js ke dalam aplikasi web. Untuk melakukan ini, kami boleh membenamkan fail perpustakaan terus ke dalam HTML. Dalam contoh ini, kami akan menggunakan perpustakaan awam (seperti modul CDN atau NPM) yang mengandungi perpustakaan D3.js. Dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e fail HTML, tambahkan kod berikut:
<head> <title>Interactive Data Visualization</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> </head>
Kod ini akan memuatkan pustaka D3.js daripada CDN.
Kini, kami telah membina aplikasi Flask berdaya maju minimum dan memuatkan perpustakaan D3.js dalam fail HTML. Seterusnya, mari kita lihat cara menggunakan D3.js untuk menjana elemen visual. Dalam contoh ini, kami akan menggunakan carta bar mudah untuk menggambarkan data. Berikut ialah contoh kod yang menggunakan D3.js untuk menjana carta bar:
// Select the SVG element by ID
var svg = d3.select("#chart");
// Define data
var data = [10, 20, 30, 40, 50];
// Define scale
var scale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 500]);
// Define bars
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", function(d, i) { return i * 30; })
.attr("width", function(d) { return scale(d); })
.attr("height", 20)
.attr("fill", "blue");Kod ini akan mencipta 5 elemen bar biru dalam elemen SVG dengan ID chart. Gunakan kaedah scaleLinear() untuk membuat bar skala yang memetakan data kepada dimensi elemen visual. Apabila menjana elemen, gunakan kaedah .attr() untuk menetapkan pelbagai sifat seperti kedudukan, lebar, tinggi, warna isian, dsb.
Kini kami boleh membenamkan kod D3.js yang mudah digunakan ini ke dalam aplikasi Flask kami. Berikut ialah contoh lengkap menggunakan Flask dengan D3.js:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True) Dalam contoh ini, kami menggunakan fungsi render_template() untuk mengembalikan fail templat HTML index.html kepada pengguna. Dalam fail templat ini, kami boleh menggunakan D3.js untuk menjana sebarang jenis elemen visual. Berikut ialah kod sampel lengkap yang menggunakan D3.js untuk menjana carta bar:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Data Visualization</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
</head>
<body>
<svg id="chart"></svg>
<script>
// Select the SVG element by ID
var svg = d3.select("#chart");
// Define data
var data = [10, 20, 30, 40, 50];
// Define scale
var scale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 500]);
// Define bars
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", function(d, i) { return i * 30; })
.attr("width", function(d) { return scale(d); })
.attr("height", 20)
.attr("fill", "blue");
</script>
</body>
</html>Akses http://localhost:5000 dalam penyemak imbas, dan anda akan melihat halaman dengan carta bar!
Ringkasan:
Dalam artikel ini, kami memperkenalkan cara menggunakan Flask dan perpustakaan D3.js untuk membina aplikasi web visualisasi data interaktif. Dengan menggunakan gabungan ini, kami boleh membina alat visualisasi data yang berkuasa dengan pantas supaya pengguna dapat memahami data dengan lebih baik. Klik di sini untuk lebih banyak tutorial yang berkaitan dengan pembangunan Flask.
Perhatikan bahawa D3.js mempunyai beberapa had, terutamanya apabila bekerja dengan set data yang besar. Jika anda perlu memproses sejumlah besar data, pertimbangkan untuk menggunakan alat visualisasi data khusus seperti Tableau atau Power BI.
Atas ialah kandungan terperinci Bina aplikasi web visualisasi data interaktif menggunakan Flask dan D3.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!