JavaScriptで同等のPythonパンダ


96

このCSVの例では:

   Source,col1,col2,col3
   foo,1,2,3
   bar,3,4,5

私がパンダを使用する標準的な方法はこれです:

  1. CSVを解析する

  2. データフレームに列を選択します(col1およびcol3

  3. カラムを処理(例えばavarageの値 col1col3

パンダのようなJavaScriptライブラリはありますか?


6
どうなるか教えてください。これは私たちの多くにとって重要な質問です。
Ahmed Fasih 2015年

回答:


133

すべての答えは良いです。私の答えが包括的であることを願っています(つまり、すべてのオプションをリストしようとします)。私は、選択を助けるために、この回答を任意の基準で返送して修正したいと思っています。

ここに来る人は誰でも知っているといいのd3ですが。Pythonのd3場合と同様に、Javascriptでデータを処理するのに非常に便利な「スイスアーミーナイフ」pandasです。正確にDataFrame / Pandasの置き換えでない場合でも、のd3ようpandasに頻繁に使用されることがあります(つまり、同じAPIがない、/がない、のように動作する)d3d3d3SeriesDataFramepandas

アーメドの答えはd3は使用することができます方法を説明し 、いくつかのデータフレームの機能を実現するために、以下のライブラリのいくつかは、のようなものに触発されたLearnJsData使用していますd3lodash

DataFrameに焦点を当てた機能に関しては、私は役立つJSライブラリに圧倒されました。これはあなたが遭遇したかもしれないいくつかのオプションの簡単なリストです。私はまだそれらのどれも詳細にチェックしていません(私はほとんどGoogleとNPM検索の組み合わせで見つけました)。

使用できるさまざまなものを使用するように注意してください。Node.js、別名サーバーサイドJavascript、ブラウザ互換、別名クライアントサイドJavascriptです。一部はTypescriptです。

  • pandas-js
    • STEELFerasの回答
    • 「pandas.jsは、Python pandasライブラリを模倣したオープンソース(実験的)ライブラリです。NumPyの論理的同等物としてImmutable.jsに依存しています。pandas.jsの主なデータオブジェクトは、Python pandasと同様に、SeriesとDataFrameです。 。」
  • dataframe-js
    • 「DataFrame-jsは、JavaScriptとデータサイエンスのための不変のデータ構造であるDataFrameを提供します。これにより、SQLと関数型プログラミングに触発されたapiを使用して行と列を操作できます。」
  • データフォージ
  • jsdataframe
    • 「Jsdataframeは、RおよびPythonPandasのデータフレーム機能に触発されたJavaScriptデータラングリングライブラリです。」
  • データフレーム
    • 「グループ化して削減することでデータを探索します。」

次に、この質問に来て、ここで他の回答を確認し、さらに検索を行った後、次のようなオプションを見つけました。

  • JSのApacheArrow
    • ユーザーBack2Basicsの提案に感謝します:
    • 「ApacheArrowは、フラットデータとネストされたデータのベクトルとテーブルのようなコンテナをエンコードするための列メモリレイアウト仕様です。ApacheArrowは、大規模なメモリ内列データ(Spark、Pandas、Drill、Graphistryなど)の新しい標準です。」
  • 観察可能
    • 一見するJSと、IPython / Jupyterの「ノートブック」に代わるもののように見えます
    • Observableのページの約束:「Webプラットフォーム」上の「リアクティブプログラミング」、「コミュニティ」
    • ここで5分のイントロを参照してください
  • リクライニングルーファスの答えから)
    • Pandas自体が試みているDataFrameのAPIに重点を置くことを期待していました Rから保存 すべてのR関数への置き換え/改善/対応を文書化します
    • 代わりに、リクライニングの例が強調していることがわかります データをDOMに取り込むjQueryの方法その(素晴らしい)マルチビュー(UI)は、jQueryを必要としませんが、ブラウザーを必要とします!その他の例
    • ...またはMVC風のアーキテクチャに重点を置いています; バックエンドのもの(つまりデータベース接続)を含む
    • 私はおそらく厳しすぎます。結局のところ、パンダの優れた点の1つは、視覚化を簡単に作成できることです。すぐに使用できます。
  • js-data
    • 本当にもっとORMです!ほとんどのそのモジュールは、異なるデータに対応する記憶質問(js-data-mongodbjs-data-redisjs-data-cloud-datastore)、ソート、フィルタリング、等
    • プラス面では、Node.jsで最優先事項として機能します。「Node.jsとブラウザで動作します。」
  • 味噌ルーファスからの別の提案)
  • AlaSQL
    • 「AlaSQL」は、リレーショナルデータとスキーマレスデータの両方のクエリ速度とデータソースの柔軟性に重点を置いた、Javascript用のオープンソースSQLデータベースです。ブラウザ、Node.js、Cordovaで動作します。」
  • いくつかの思考実験:

この投稿がコミュニティウィキになり、次のようなさまざまな基準に対して評価(つまり、上記のさまざまなオプションを比較)できることを願っています。

  • R比較におけるパンダの基準
    • パフォーマンス
    • 機能性/柔軟性
    • 使いやすさ
  • 私自身の提案
    • パンダ/データフレームAPIとの類似性
    • 特に彼らの主な機能にヒット
    • データサイエンスの強調> UIの強調
    • Jupyter (インタラクティブノートブック)などの他のツールと組み合わせた実証済みの統合

JSライブラリが決して実行しないかもしれないいくつかのこと(しかしそれは可能でしょうか?)

  • クラス最高のJavascript番号/数学ライブラリである基盤となるフレームワークを使用しますか?(つまり、NumPyと同等)
  • より高速なコードをもたらす可能性のある最適化/コンパイラを使用します(つまり、PandasによるCythonの使用と同等)
  • データサイエンスフレーバーのコンソーシアム、ala Pandas、NumFocusが後援

1
この素晴らしい概要をありがとう。私はパンダのデータフレームとSQLの両方の使用を知っています。データフレームを使用してJSを使用することとJSSQLデータベースを使用することの長所(および短所)は何ですか?
tardis 2017年

@molotowこれは素晴らしい質問ですが、JS SQLデータベースの経験はあまりありません(見た目はかっこいいですが)。一般に、データフレームタイプのアプローチは、空の値を推測するなど、より「データラングリング」/「データサイエンス」に焦点を当てた関数をサポートすると思います。行列の乗算などを実行します。一方、(JS)SQLは、クエリ、並べ替え、フィルタリングなどのリレーショナル関連のものに重点を置いています。もちろん、重複はあります。SQLにいくつかの統計関数などが含まれているように、データフレームは結合、並べ替え、およびフィルタリングできます。他にアイデアがありますか?
赤エンドウ豆

1
非常に多くのオプションがあるという事実は迷惑です。むしろ、コミュニティに1つのことだけに焦点を合わせさせ、それを良いものにします。
ClaudiuCreanga18年

3
(ここに矢印JSの作者)@ClaudiuCreanga私は欲求不満を理解しています。当初、ノード/ブラウザーと従来のビッグデータスタックとの間の隔たりを埋めるためにArrowJSを作成しましたが、これまでのところ、優れたIPC /ストリーミングプリミティブに最も多額の投資を行ってきました。次のステップとして、より多くのJSライブラリ(tensorflow、d3など)との統合を開始したいと考えています。PRはいつでも歓迎します。別のアプローチは、ArrowJSを使用してArrowテーブルを消費および生成するJPMCのPerspectiveプロジェクトのようなものです。
ptaylor

1
javascriptと同等のパンダのデータフレームマージの機能はありますか?
Phanivikranth19年

9

私はdata-forgeと呼ばれるJavaScript用のデータラングリングライブラリに取り組んできました。LINQとPandasに触発されています。

次のようにインストールできます。

npm install --save data-forge

あなたの例は次のように機能します:

var csvData = "Source,col1,col2,col3\n" +
    "foo,1,2,3\n" +
    "bar,3,4,5\n";

var dataForge = require('data-forge');
var dataFrame = 
    dataForge.fromCSV(csvData)
        .parseInts([ "col1", "col2", "col3" ])
        ;

データがCSVファイルにある場合は、次のように読み込むことができます。

var dataFrame = dataForge.readFileSync(fileName)
    .parseCSV()
    .parseInts([ "col1", "col2", "col3" ])
    ;

このselectメソッドを使用して、行を変換できます。

getSeries使用して列を抽出し、そのselectメソッドを使用してその列の値を変換できます。

次のように、データをデータフレームから戻します。

var data = dataFrame.toArray();

列を平均化するには:

 var avg = dataFrame.getSeries("col1").average();

これでできることはもっとたくさんあります。

npmでより多くのドキュメントを見つけることができます。


8

注意事項以下はd3v3にのみ適用され、最新のd4v4には適用されません。

私はd3.jsの一部であり、Pandasの完全な代替品にはなりませんが、そのパラダイムの学習に時間を費やすと、すべてのデータラングリング処理できるはずです。(そして、結果をブラウザーに表示したい場合は、それに最適です。)

例。私のCSVファイルdata.csv

name,age,color
Mickey,65,black
Donald,58,white
Pluto,64,orange

同じディレクトリにindex.html、以下を含むを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>My D3 demo</title>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
  <body>

      <script charset="utf-8" src="demo.js"></script>
  </body>
</html>

またdemo.js、以下を含むファイル:

d3.csv('/data.csv',

       // How to format each row. Since the CSV file has a header, `row` will be
       // an object with keys derived from the header.
       function(row) {
         return {name : row.name, age : +row.age, color : row.color};
       },

       // Callback to run once all data's loaded and ready.
       function(data) {
         // Log the data to the JavaScript console
         console.log(data);

         // Compute some interesting results
         var averageAge = data.reduce(function(prev, curr) {
           return prev + curr.age;
         }, 0) / data.length;

         // Also, display it
         var ulSelection = d3.select('body').append('ul');
         var valuesSelection =
             ulSelection.selectAll('li').data(data).enter().append('li').text(
                 function(d) { return d.age; });
         var totalSelection =
             ulSelection.append('li').text('Average: ' + averageAge);
       });

ディレクトリで、を実行し、ブラウザでhttp:// localhost:8181python -m SimpleHTTPServer 8181を開いて、年齢とその平均の簡単なリストを表示します。

この簡単な例は、d3のいくつかの関連機能を示しています。

  • オンラインデータ(CSV、TSV、JSONなど)の取り込みに対する優れたサポート
  • 焼き付けられたデータラングリングスマート
  • データ駆動型のDOM操作(おそらく頭を包み込むのが最も難しいこと):データはDOM要素に変換されます。

2
将来の初心者を助けるためだけに-上記の手順はd3v4では無効になりました。マッピング段階がデータコールバック内で行われていると考えてください。例:github.com/d3/d3-dsv/blob/master/README.md#csvParseRows
swyx 2016

@swyx頭を上げてくれてありがとう、例を修正して答えとして投稿できますか?
Ahmed Fasih 2016

@AhmedFasihみんなの利益のために、自分の投稿を修正する必要があります。また、swyxには投稿を編集するのに十分な評判がありません。
Carles Alcolea 2017

@CarlesAlcolea私は😿申し訳ありません私は今現在のAPIに速度まで取得する時間がない、上部に大きな免責事項を追加
アーメドFasih

@AhmedFasihまあそれは以前よりも良いです:)ありがとう!
Carles Alcolea 2017

5

以下はPythonnumpyとpandasです

`` `

import numpy as np
import pandas as pd

data_frame = pd.DataFrame(np.random.randn(5, 4), ['A', 'B', 'C', 'D', 'E'], [1, 2, 3, 4])

data_frame[5] = np.random.randint(1, 50, 5)

print(data_frame.loc[['C', 'D'], [2, 3]])

# axis 1 = Y | 0 = X
data_frame.drop(5, axis=1, inplace=True)

print(data_frame)

`` `

JavaScript *でも同じことができます[ numjsはNode.jsでのみ機能します]しかし、D3.jsには非常に高度なデータファイルセットオプションがあります。numjsとPandas-jsの両方がまだ機能しています。

import np from 'numjs';
import { DataFrame } from 'pandas-js';

const df = new DataFrame(np.random.randn(5, 4), ['A', 'B', 'C', 'D', 'E'], [1, 2, 3, 4])

// df
/*

          1         2         3         4
A  0.023126  1.078130 -0.521409 -1.480726
B  0.920194 -0.201019  0.028180  0.558041
C -0.650564 -0.505693 -0.533010  0.441858
D -0.973549  0.095626 -1.302843  1.109872
E -0.989123 -1.382969 -1.682573 -0.637132

*/


5

現時点 でのPandas.jsは実験的なライブラリですが、immutable.jsとNumpPyロジックの内部で使用することは非常に有望であるように思われ、データオブジェクトシリーズとDataFrameの両方があります。


3
ライブラリは2年以上コミットされていないようで、多くの問題があるようです。私は「非常に有望」とは言いません。
jarthur

4

@neversaintあなたの待機は終わりました。Tensorflow.js上に構築されたJavascriptライブラリのようなパンダであり、箱から出してテンソルをサポートするDanfo.jsようこそと言います。これは、danfoデータ構造をTensorsに変換できることを意味します。また、グループ化、マージ、結合、プロット、その他のデータ処理を行うことができます。


3

最も近いのは次のようなライブラリだと思います。

特にReclineには、Pandasデータフレームにいくぶん似た構造のDatasetオブジェクトがあります。次に、データをデータグリッド、グラフ、マップなどの「ビュー」に接続できます。ビューは通常、D3、Flot、SlickGridなどの既存の最高の視覚化ライブラリの薄いラッパーです。

リクライニングの例を次に示します。

//いくつかのデータをロードします
var dataset = recline.Model.Dataset({
  記録: [
    {値:1、日付: '2012-08-07'}、
    {値:5、b: '2013-09-07'}
  ]
  //代わりにCSVデータをロードします
  //(そして、Reclineはさらに多くのデータソースタイプをサポートしています)
  // url: 'my-local-csv-file.csv'、
  //バックエンド: 'csv'
});

//ビューア用にHTMLから要素を取得します
var $ el = $( '#data-viewer');

var allInOneDataViewer = new recline.View.MultiView({
  モデル:データセット、
  el:$ el
});
//新しいデータビューアが公開されます!

1

各行はすでに本質的にjavascript配列であるため、javascriptでCSVを解析するのは非常に簡単です。csvを文字列の配列(1行に1つ)にロードする場合、次の値を使用して配列の配列をロードするのは非常に簡単です。

var pivot = function(data){
    var result = [];
    for (var i = 0; i < data.length; i++){
        for (var j=0; j < data[i].length; j++){
            if (i === 0){
                result[j] = [];
            }
            result[j][i] = data[i][j];
        }
    }
    return result;
};

var getData = function() {
    var csvString = $(".myText").val();
    var csvLines = csvString.split(/\n?$/m);

    var dataTable = [];

    for (var i = 0; i < csvLines.length; i++){
        var values;
        eval("values = [" + csvLines[i] + "]");
        dataTable[i] = values;
    }

    return pivot(dataTable);
};

次にgetData()、列ごとに値の多次元配列を返します。

私はあなたのためにjsFiddleでこれを示しました。

もちろん、入力を信頼しない場合、これを簡単に行うことはできません。データにevalが取得する可能性のあるスクリプトがある場合などです。


あなたがあなたの答えに警告を入れていることは知っていますが、セキュリティの観点からこの方法がどれほど悪いかを強調することはできません。
xApple

彼が入力を信頼しない場合、セキュリティの観点からのみ悪いです。たとえば、入力ファイルをすでに知っている学校のプロジェクトを行っている場合(彼または彼の教師が特定の形式で事前に入力ファイルを提供しているため)、これはコンパクトで簡単、そして読みやすいソリューションです。彼は入力のソースに関するコンテキストを提供しませんでした。簡単に処理できるようにCSVを読み込む方法を尋ねるだけです。
スティーブ

1

これは、1行目の既存のヘッダーを想定した動的なアプローチです。csvにはd3.js。が読み込まれます。

function csvToColumnArrays(csv) {

    var mainObj = {},
    header = Object.keys(csv[0]);

    for (var i = 0; i < header.length; i++) {

        mainObj[header[i]] = [];
    };

    csv.map(function(d) {

        for (key in mainObj) {
            mainObj[key].push(d[key])
        }

    });        

    return mainObj;

}


d3.csv(path, function(csv) {

    var df = csvToColumnArrays(csv);         

});

次に、を使用してR、python、またはMatlabデータフレームと同様のデータの各列にアクセスできますdf.column_header[row_number]

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.