このCSVの例では:
Source,col1,col2,col3
foo,1,2,3
bar,3,4,5
私がパンダを使用する標準的な方法はこれです:
CSVを解析する
データフレームに列を選択します(
col1およびcol3)- カラムを処理(例えばavarageの値
col1とcol3)
パンダのようなJavaScriptライブラリはありますか?
このCSVの例では:
Source,col1,col2,col3
foo,1,2,3
bar,3,4,5
私がパンダを使用する標準的な方法はこれです:
CSVを解析する
データフレームに列を選択します(col1およびcol3)
col1とcol3)パンダのようなJavaScriptライブラリはありますか?
回答:
すべての答えは良いです。私の答えが包括的であることを願っています(つまり、すべてのオプションをリストしようとします)。私は、選択を助けるために、この回答を任意の基準で返送して修正したいと思っています。
ここに来る人は誰でも知っているといいのd3ですが。Pythonのd3場合と同様に、Javascriptでデータを処理するのに非常に便利な「スイスアーミーナイフ」pandasです。正確にDataFrame / Pandasの置き換えではない場合でも、のd3ようpandasに頻繁に使用されることがあります(つまり、同じAPIがない、/がない、のように動作する)d3d3d3SeriesDataFramepandas
アーメドの答えはd3は使用することができます方法を説明し 、いくつかのデータフレームの機能を実現するために、以下のライブラリのいくつかは、のようなものに触発されたLearnJsData使用していますd3とlodash。
DataFrameに焦点を当てた機能に関しては、私は役立つJSライブラリに圧倒されました。これはあなたが遭遇したかもしれないいくつかのオプションの簡単なリストです。私はまだそれらのどれも詳細にチェックしていません(私はほとんどGoogleとNPM検索の組み合わせで見つけました)。
使用できるさまざまなものを使用するように注意してください。Node.js、別名サーバーサイドJavascript、ブラウザ互換、別名クライアントサイドJavascriptです。一部はTypescriptです。
次に、この質問に来て、ここで他の回答を確認し、さらに検索を行った後、次のようなオプションを見つけました。
この投稿がコミュニティウィキになり、次のようなさまざまな基準に対して評価(つまり、上記のさまざまなオプションを比較)できることを願っています。
Jupyter
(インタラクティブノートブック)などの他のツールと組み合わせた実証済みの統合JSライブラリが決して実行しないかもしれないいくつかのこと(しかしそれは可能でしょうか?)
私は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でより多くのドキュメントを見つけることができます。
注意事項以下は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のいくつかの関連機能を示しています。
以下は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
*/
@neversaintあなたの待機は終わりました。Tensorflow.js上に構築されたJavascriptライブラリのようなパンダであり、箱から出してテンソルをサポートするDanfo.jsへようこそと言います。これは、danfoデータ構造をTensorsに変換できることを意味します。また、グループ化、マージ、結合、プロット、その他のデータ処理を行うことができます。
最も近いのは次のようなライブラリだと思います。
特に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
});
//新しいデータビューアが公開されます!
各行はすでに本質的に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が取得する可能性のあるスクリプトがある場合などです。
これは、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]。