이 CSV 예 :
Source,col1,col2,col3
foo,1,2,3
bar,3,4,5
내가 Pandas를 사용하는 표준 방법은 다음과 같습니다.
CSV 구문 분석
데이터 프레임으로 열 선택 (
col1및col3)- 열 처리 (예 :
col1및 값 평균col3)
Pandas와 같은 JavaScript 라이브러리가 있습니까?
답변:
모든 답변이 좋습니다. 내 대답이 포괄적 이길 바랍니다 (즉, 모든 옵션 을 나열하려고합니다 ). 선택에 도움이되는 기준으로이 답변을 반환하고 수정하기를 바랍니다.
여기 오는 사람이 d3. d3자바 스크립트에서 데이터를 처리하는 데 매우 유용한 "스위스 군용 칼" pandas은 Python에 유용합니다. 당신이 볼 수는 d3자주 같이 사용하는 pandas경우에도 d3입니다 DataFrame / 팬더 교체 정확하지 (즉, d3같은 API가없는이, d3없는 Series/ DataFrame처럼하는 행동하라 pandas)
아메드의 대답은 D3 사용 방법을 설명 일부 DataFrame 기능을 달성하기 위해, 아래의 라이브러리 중 일부는 같은 것들에서 영감을했다 LearnJsData 사용 d3하고 lodash.
DataFrame-focused-features에 관해서는 도움이되는 JS 라이브러리에 압도되었습니다. 다음은 여러분이 접했을 수있는 몇 가지 옵션에 대한 간단한 목록입니다. 아직 자세히 확인하지 않았습니다 (대부분 Google + NPM 검색 조합에서 찾았습니다).
작업 할 수있는 다양성을 사용하도록주의하십시오. 일부는 Node.js 일명 서버 측 자바 스크립트이고 일부는 브라우저 호환 일명 클라이언트 측 자바 스크립트입니다. 일부는 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에서 더 많은 문서를 찾을 수 있습니다 .
Ceaveat 다음은 최신 d4v4가 아닌 d3 v3에만 적용됩니다!
나는 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의 몇 가지 관련 기능을 보여줍니다.
현재 Pandas.js 는 실험용 라이브러리이지만 immutable.js 및 NumpPy 로직에서 사용하는 것이 매우 유망 해 보입니다. 데이터 개체 시리즈와 DataFrame이 모두 있습니다.
아래는 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
*/가장 가까운 것은 다음과 같은 라이브러리라고 생각합니다.
특히 Recline에는 Pandas 데이터 프레임과 다소 유사한 구조를 가진 Dataset 개체가 있습니다. 그런 다음 데이터 그리드, 그래프,지도 등과 같은 "보기"와 데이터를 연결할 수 있습니다.보기는 일반적으로 D3, Flot, SlickGrid 등과 같은 기존 최고의 시각화 라이브러리를 둘러싼 얇은 래퍼입니다.
다음은 Recline의 예입니다.
// 일부 데이터로드
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
});
// 새 데이터 뷰어가 활성화됩니다!
@neversaint 당신의 기다림이 끝났습니다. Tensorflow.js에 구축 된 Javascript 라이브러리와 같은 팬더 인 Danfo.js에 오신 것을 환영하며 즉시 사용 가능한 텐서를 지원합니다. 즉, danfo 데이터 구조를 Tensor로 변환 할 수 있습니다. 그리고 groupby, 병합, 결합, 플로팅 및 기타 데이터 처리를 수행 할 수 있습니다.
각 줄은 이미 본질적으로 자바 스크립트 배열이기 때문에 자바 스크립트에서 CSV를 구문 분석하는 것은 매우 쉽습니다. csv를 문자열 배열 (한 줄에 하나씩)에로드하면 값이있는 배열 배열을로드하는 것이 매우 쉽습니다.
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 행에 기존 헤더를 가정하는 동적 접근 방식입니다 d3.js. csv는 .
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].