web-dev-qa-db-ja.com

Python Pandas JavaScriptで同等

このCSVの例では：

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

私が使用する標準的な方法Pandasはこれです：

  1. CSVを解析

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

  3. 列を処理します（例：col1およびcol3）

PandasのようなJavaScriptライブラリはありますか？

javascriptpythonpandas
49
neversaint

私は、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 にあります。

6
Ashley Davis

Ceaveat以下はd3 v3にのみ適用され、最新の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);
       });

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

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

  • オンラインデータの取り込みの優れたサポート（ [〜＃〜] csv [〜＃〜] 、TSV、JSONなど）
  • 焼き付けられたデータラングリングスマート
  • データ駆動型DOM操作（頭を包むのが最も難しいかもしれません）：データがDOM要素に変換されます。
3
Ahmed Fasih

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

3
Feras

以下はPython numpyと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

*/
3
STEEL

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

特にリクライニングには、Pandasデータフレームに似た構造のDatasetオブジェクトがあります。これにより、データグリッド、グラフ、マップなどの「ビュー」にデータを接続できます。通常、D3、Flot、SlickGridなどの既存の最善の可視化ライブラリを囲む薄いラッパーです。

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

 //いくつかのデータをロードする
 var dataset = recline.Model.Dataset（{
 records：
 {value：1、date： '2012-08- 07 '}、
 {value：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 
}）; 
 //新しいデータビューアーは生きている！
3
Rufus Pollock

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]。

1
Manuel

各行はすでに本質的に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が取得する可能性のあるスクリプトがデータにある場合など、これを簡単に行うことはできません。

0
Steve K