2015-06-03 18 views
11

Với ví dụ CSV này:Python Pandas tương đương trong JavaScript

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

Phương pháp chuẩn mà tôi sử dụng Pandas là thế này:

  1. Parse CSV

  2. Chọn cột vào một khung dữ liệu (col1col3)

  3. Xử lý cột (ví dụ: . avarage các giá trị của col1col3)

Có thư viện JavaScript nào giống như Pandas không?

+0

"Xử lý cột" hơi mơ hồ, bạn có nghĩ vậy không? –

+0

@PaulH: Tôi đã cập nhật OP. – neversaint

+0

Hãy cho chúng tôi biết những gì bạn kết thúc. Đây là một câu hỏi quan trọng đối với nhiều người trong chúng ta. –

Trả lời

11

Tất cả các câu trả lời đều tốt. Hy vọng câu trả lời của tôi là toàn diện (tức là cố gắng liệt kê tất cả các tùy chọn). Tôi hy vọng sẽ trả lại và sửa đổi câu trả lời này với bất kỳ tiêu chí nào để giúp bạn lựa chọn. *

Tôi hy vọng bất kỳ ai đến đây đều quen thuộc với d3. Tôi nghĩ rằng nó là không thể thiếu trên riêng của mình, không phân biệt tìm kiếm một thay thế DataFrame/Pandas. Ahmed's answer explains how d3 can be used để đạt được một số chức năng DataFrame và một số thư viện bên dưới được lấy cảm hứng từ những thứ như LearnJsData sử dụng d3lodash.

Đối với dataframe-ish, tôi đã bị choáng ngợp với các lựa chọn. Dưới đây là danh sách nhanh một số tùy chọn mà bạn có thể đã gặp phải.Tôi đã không kiểm tra bất kỳ trong số họ một cách chi tiết (Hầu hết tôi tìm thấy trong sự kết hợp Google + NPM tìm kiếm):

  • dataframe-js
    • "DataFrame-js cung cấp một cấu trúc dữ liệu không thay đổi cho javascript và datascience, các DataFrame, cho phép làm việc trên các hàng và cột với một chương trình lấy cảm hứng từ lập trình sql và chức năng.
  • data-forge (như đã đề cập trong Ashley's answer)
    • "JavaScript chuyển đổi dữ liệu và công cụ phân tích lấy cảm hứng từ gấu trúc và LINQ."
  • jsdataframe
    • "Jsdataframe là một dữ liệu JavaScript tranh cãi thư viện lấy cảm hứng từ chức năng khung dữ liệu trong R và Python Pandas."
  • dataframe
    • "khám phá dữ liệu bằng cách nhóm và giảm."

Sau đó, sau khi đến câu hỏi này, kiểm tra câu trả lời khác ở đây và làm tìm kiếm nhiều hơn, tôi tìm thấy các tùy chọn như:

  • Observable
    • Thoạt nhìn, có vẻ như một JS thay thế cho IPython/Jupyter "notebooks"
    • Trang có thể quan sát hứa hẹn: "Chương trình phản ứng ing", một "cộng đồng", trên cơ sở "Nền tảng Web"
    • Xem 5 phút giới thiệu here
  • recline (từ Rufus' answer)
    • tôi mong đợi một sự nhấn mạnh về API DataFrame, mà gấu trúc tự cố gắng để giữ lại từ Rdocument its replacement/improvement/correspondence to every R function. Thay vào đó tôi tìm thấy một ví dụ nhấn mạnh của nhấn mạnh nhấn mạnh cách jQuery để nhận dữ liệu vào DOM Multiview (giao diện người dùng) tuyệt vời của nó, không yêu cầu jQuery nhưng yêu cầu trình duyệt! More examples
    • ... hoặc nhấn mạnh vào MVC-ish architecture; bao gồm các công cụ back-end (tức là các kết nối cơ sở dữ liệu)
    • Tôi có thể quá khắc nghiệt; sau khi tất cả, một trong những điều tốt đẹp về gấu trúc là làm thế nào nó có thể tạo ra trực quan một cách dễ dàng; ngoài cái hộp.
  • js-data
    • Thật nhiều hơn một ORM!Hầu hết các its modules tương ứng với dữ liệu khác nhau lưu trữ câu hỏi (js-data-mongodb, js-data-redis, js-data-cloud-datastore), phân loại, lọc vv
    • On cộng-side làm việc trên Node.js là một ưu tiên hàng đầu; "Làm việc trong Node.js và trong Trình duyệt."
  • miso (một đề nghị từ Rufus)
  • AlaSQL
    • "AlaSQL" là một cơ sở dữ liệu SQL mã nguồn mở cho Javascript với một tập trung mạnh mẽ vào tốc độ truy vấn và nguồn dữ liệu linh hoạt cho cả dữ liệu quan hệ và dữ liệu schemaless. Nó hoạt động trong trình duyệt của bạn, Node.js và Cordova "
  • Một số suy nghĩ thí nghiệm:.

Tôi hy vọng bài viết này có thể trở thành một cộng đồng wiki, và đánh giá (ví dụ: so sánh các tùy chọn khác nhau ở trên) với các tiêu chí khác nhau như:

  • tiêu chí Panda trong R comparison
    • Performance
    • Chức năng/linh hoạt
    • Dễ-of-sử dụng
  • gợi ý riêng của tôi nó
    • tương đồng để Pandas/Dataframe của API
    • Cụ thể chạm vào main features
    • dữ liệu khoa học nhấn mạnh> UI nhấn mạnh họ
    • hội nhập Chứng minh kết hợp với các công cụ khác như Jupyter (máy tính xách tay tương tác), vv

Một số điều một thư viện JS thể không bao giờ làm (nhưng có thể?)

  • Sử dụng khung cơ bản tốt nhất là Javascript Javascript thư viện rs/math? (ví dụ: tương đương với số NumPy)
  • Sử dụng bất kỳ trình tối ưu hóa/trình biên dịch nào có thể dẫn đến mã nhanh hơn (tức làtương đương sử dụng Pandas' của Cython)
  • Được tài trợ bởi bất kỳ tập đoàn dữ liệu khoa học-hương, ala Pandas and NumFocus

* Lưu ý: Tôi thiên vị về phía Node.js, nhưng tôi cũng có thể đánh giá cao đó là một sự phân biệt sai: JS là JS là JS.

+1

Cảm ơn bạn đã xem tổng quan tuyệt vời này. Tôi biết cả việc sử dụng các khung dữ liệu gấu trúc và SQL. Những lợi thế (và nhược điểm) của việc sử dụng JS bằng cách sử dụng dataframes so với một cơ sở dữ liệu JS SQL là gì? – tardis

+0

@molotow đây là một câu hỏi hay, nhưng tôi không có nhiều kinh nghiệm với các cơ sở dữ liệu JS SQL (mặc dù chúng trông rất tuyệt). Nói chung tôi sẽ * đoán * rằng phương pháp tiếp cận kiểu khung dữ liệu sẽ hỗ trợ nhiều hàm "tập trung dữ liệu"/"dữ liệu khoa học" hơn, như suy ra các giá trị rỗng; làm phép nhân, vv Trong khi một (JS) SQL tập trung nhiều hơn vào các công cụ quan hệ: truy vấn, phân loại, lọc. Tất nhiên sẽ có chồng lên nhau; dataframe có thể JOIN, sắp xếp và lọc, giống như SQL bao gồm một số chức năng thống kê và vv. Bất kỳ ai khác có ý tưởng? –

2

Ceaveat Sau đây chỉ áp dụng cho d3 v3 và không phải là d4v4 mới nhất!

Tôi là một phần của d3.js và mặc dù nó sẽ không thay thế toàn bộ cho Pandas, nếu bạn dành chút thời gian để học mô hình của nó, nó sẽ có thể xử lý tất cả dữ liệu của bạn. (Và nếu bạn muốn hiển thị kết quả trong trình duyệt, điều đó lý tưởng cho điều đó.)

Ví dụ. tập tin CSV My data.csv:

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

Trong cùng một thư mục, tạo ra một index.html chứa sau:

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

và cũng là một tập tin demo.js chứa sau:

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); 
     }); 

Trong thư mục , chạy python -m SimpleHTTPServer 8181 và mở http://localhost:8181 trong trình duyệt của bạn để xem danh sách đơn giản về độ tuổi và mức độ trung bình của chúng .

ví dụ đơn giản này cho thấy một vài tính năng có liên quan của d3:

  • hỗ trợ tuyệt vời cho nuốt dữ liệu trực tuyến (CSV, TSV, JSON, vv)
  • khéo léo tranh cãi dữ liệu nướng trong
  • đĩa dữ liệu điều khiển DOM điều khiển (có thể là điều khó khăn nhất để quấn quanh đầu): dữ liệu của bạn được chuyển đổi thành các phần tử DOM.
+1

chỉ để giúp người mới trong tương lai - hướng dẫn ở trên không còn hợp lệ cho d3 v4. nghĩ rằng giai đoạn lập bản đồ được thực hiện trong cuộc gọi lại dữ liệu ngay bây giờ, ví dụ: https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows – swyx

+0

@swyx cảm ơn bạn đã đứng đầu, bạn có thể sửa ví dụ và đăng bài làm câu trả lời không? –

+0

@AhmedFasih Bạn nên sửa bài đăng của riêng mình vì lợi ích của mọi người. Ngoài ra, swyx không có đủ danh tiếng để chỉnh sửa bài đăng của bạn. –

1

Thật dễ dàng để phân tích cú pháp CSV trong javascript vì mỗi dòng thực chất là một mảng javascript. Nếu bạn tải csv của bạn thành một mảng các chuỗi (mỗi dòng một) đó là khá dễ dàng để tải một mảng của mảng với các giá trị:

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); 
}; 

Sau đó getData() trả về một mảng đa chiều của các giá trị theo cột.

Tôi đã chứng minh điều này trong một số jsFiddle cho bạn.

Tất nhiên, bạn không thể làm điều đó khá dễ dàng này nếu bạn không tin tưởng vào đầu vào - nếu có thể có kịch bản trong dữ liệu của bạn mà eval có thể nhặt vv

3

Tôi nghĩ rằng điều gần gũi nhất là thư viện như:

ngả nói riêng có một đối tượng Dataset với một cấu trúc somewh tương tự như khung dữ liệu Pandas. Sau đó, nó cho phép bạn kết nối dữ liệu của mình với "Chế độ xem", chẳng hạn như lưới dữ liệu, đồ thị, bản đồ, v.v. Xem thường là các trình bao bọc mỏng xung quanh các thư viện hình ảnh giống như hiện tại tốt nhất như D3, Flot, SlickGrid, v.v.

Đây là một ví dụ cho Recline:

 
// Load some data 
var dataset = recline.Model.Dataset({ 
    records: [ 
    { value: 1, date: '2012-08-07' }, 
    { value: 5, b: '2013-09-07' } 
    ] 
    // Load CSV data instead 
    // (And Recline has support for many more data source types) 
    // url: 'my-local-csv-file.csv', 
    // backend: 'csv' 
}); 

// get an element from your HTML for the viewer 
var $el = $('#data-viewer'); 

var allInOneDataViewer = new recline.View.MultiView({ 
    model: dataset, 
    el: $el 
}); 
// Your new Data Viewer will be live! 
3

Tôi đã làm việc trên thư viện trao đổi dữ liệu cho JavaScript được gọi là giả mạo dữ liệu. Nó lấy cảm hứng từ LINQ và Pandas.

Nó có thể được cài đặt như thế này:

npm install --save data-forge 

dụ của bạn sẽ làm việc như thế này:

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

Nếu dữ liệu của bạn đang ở trong một tệp CSV mà bạn có thể tải nó như thế này:

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

Bạn có thể sử dụng phương thức select để chuyển đổi hàng.

Bạn có thể trích xuất cột bằng cách sử dụng getSeries sau đó sử dụng phương thức select để chuyển đổi giá trị trong cột đó.

Bạn nhận được dữ liệu của bạn trở lại ra khỏi dữ liệu-frame như thế này:

var data = dataFrame.toArray(); 

Để trung bình một cột:

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

Có nhiều hơn nữa là bạn có thể làm với điều này.

Bạn có thể tìm thêm tài liệu trên npm.

1

Đây là một cách tiếp cận năng động giả định một tiêu đề hiện có trên dòng 1. Các csv được nạp với 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);   

}); 

Sau đó, bạn có thể truy cập mỗi cột của dữ liệu tương tự như một R, python hoặc Matlab dataframe với df.column_header[row_number].

Các vấn đề liên quan