Flask と D3.js を使用してインタラクティブなデータ視覚化 Web アプリケーションを構築する-Python チュートリアル-php.cn

Flask と D3.js を使用してインタラクティブなデータ視覚化 Web アプリケーションを構築する

王林

リリース： 2023-06-17 21:00:15

オリジナル

1216 人が閲覧しました

近年、データ分析やデータビジュアライゼーションは多くの業界や分野で必須のスキルとなっています。データアナリストや研究者にとって、大量のデータをユーザーの前に提示し、可視化することでデータの意味や特徴を理解してもらうことは非常に重要です。このニーズを満たすために、D3.js を使用して Web アプリケーションでインタラクティブなデータ視覚化を構築することがトレンドになっています。この記事では、Flask と D3.js を使用してインタラクティブなデータ視覚化 Web アプリケーションを構築する方法について説明します。

Flask は、Python をベースにした軽量の Web アプリケーションフレームワークで、学習と使用が非常に簡単です。ルーティング、テンプレート、ORM など、Web アプリケーションを迅速に構築するために使用できる多くの便利な機能が提供されます。 D3.js は、データの視覚化に特に使用される JavaScript ライブラリであり、データに基づいてグラフや表などのさまざまな視覚要素を生成し、ユーザーがこれらの要素を操作できるようにします。

まず、Flask と D3.js ライブラリをインストールする必要があります。コンソールに次のコマンドを入力するだけです:

pip install Flask

ログイン後にコピー

次に、Flask アプリケーションを作成する必要があります。 Python では、次のコードを使用して最も単純な Flask アプリケーションを構築できます:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
  return "Hello, World!"

if __name__ == "__main__":
  app.run()

ログイン後にコピー

このコードは Flask アプリケーションを構築し、HTTP リクエストを関数に割り当てるルートを定義しますindex() 。この例では、関数 index() は単純な「Hello, World!」を返します。

次に、D3.js ライブラリを Web アプリケーションにインポートする必要があります。これを行うには、ライブラリファイルを HTML に直接埋め込むことができます。この例では、D3.js ライブラリを含むパブリックライブラリ (CDN または NPM モジュールなど) を使用します。 HTML ファイルの <head> タグに、次のコードを追加します。

<head>
  <title>Interactive Data Visualization</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
</head>

ログイン後にコピー

このコードは、CDN から D3.js ライブラリを読み込みます。

これで、最小限の実行可能な Flask アプリケーションを構築し、HTML ファイルに D3.js ライブラリをロードしました。次に、D3.js を使用して視覚要素を生成する方法を見てみましょう。この例では、単純な棒グラフを使用してデータを視覚化します。以下は、D3.js を使用して棒グラフを生成するコード例です。

// 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");

ログイン後にコピー

このコードは、SVG 要素内に ID chart を持つ 5 つの青い棒要素を作成します。 scaleLinear() メソッドを使用して、データをビジュアル要素の寸法にマップするスケールバーを作成します。要素を生成するときは、.attr() メソッドを使用して、位置、幅、高さ、塗りつぶしの色などのさまざまな属性を設定します。

これで、この使いやすい D3.js コードを Flask アプリケーションに埋め込むことができます。 D3.js で Flask を使用する完全な例を次に示します。

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)

ログイン後にコピー

この例では、render_template() 関数を使用して HTML テンプレートファイル index.html# をレンダリングします。 ## ユーザーに戻ります。このテンプレートファイルでは、D3.js を使用してあらゆる種類の視覚要素を生成できます。以下は、D3.js を使用して棒グラフを生成する完全なサンプルコードです。

<!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>

ログイン後にコピー

ブラウザで

http://localhost:5000 にアクセスすると、次のような棒グラフが表示されます。グラフィックページ！

概要:

この記事では、Flask と D3.js ライブラリを使用してインタラクティブなデータ視覚化 Web アプリケーションを構築する方法を紹介しました。この組み合わせを使用することで、ユーザーがデータをより深く理解できるように、強力なデータ視覚化ツールを迅速に構築できます。 Flask 開発に関連するその他のチュートリアルについては、ここをクリックしてください。

D3.js には、特に大規模なデータセットを扱う場合、いくつかの制限があることに注意してください。大量のデータを処理する必要がある場合は、Tableau や Power BI などの専用のデータ視覚化ツールの使用を検討してください。

以上がFlask と D3.js を使用してインタラクティブなデータ視覚化 Web アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。