Thư viện biểu đồ dành cho các nhà khoa học dữ liệu được xây dựng trên D3 và stack.gl

Giới thiệu

Plotly là một công ty điện toán có trụ sở tại Montreal, Quebec, chuyên phát triển các công cụ trực quan và phân tích dữ liệu trực tuyến. Nó cung cấp các công cụ vẽ đồ thị, phân tích và thống kê trực tuyến cho các cá nhân và các thư viện vẽ đồ thị khoa học và cộng tác cho Python, R , MATLAB, Perl, Julia, Arduino và REST. Các công cụ Plotly cũng có thể được sử dụng để tạo kiểu cho các biểu đồ tương tác với sổ ghi chép Jupyter.

Plotly cũng là tên sản phẩm. Plotly.js là một thư viện biểu đồ được xây dựng trên D3 và stack.gl , là các thành phần WebGL mô-đun. Đây là một thư viện biểu đồ khai báo cấp cao và cung cấp hơn 40 loại biểu đồ, bao gồm bản đồ 3D, thống kê, khoa học, tài chính và SVG. Bên cạnh thư viện JavaScript, Plotly cũng cung cấp năng lượng cho plotly.py và plotly.R . Biểu đồ đồ thị được cộng đồng khoa học dữ liệu/AI áp dụng rộng rãi, chẳng hạn như bản demo MLflow , Point-E trên Hugging Face .

Chúng ta hãy xem Plotly hoạt động như thế nào.

Thiết lập Plotly.js trong Tạo ứng dụng React

Chúng tôi sử dụng Tạo ứng dụng phản ứng làm cơ sở để khám phá plotly.js. Lệnh sau tạo một dự án React:

% yarn create react-app react-plotly
% cd react-plotly

% yarn add plotly.js react-plotly.js

"dependencies": {
  "plotly.js": "^2.17.0",
  "react-plotly.js": "^2.6.0"
}

Biểu đồ cột

Biểu đồ thanh trình bày dữ liệu phân loại với các thanh hình chữ nhật có chiều cao hoặc chiều dài tỷ lệ thuận với các giá trị mà chúng biểu thị. Các thanh có thể được vẽ theo chiều dọc hoặc chiều ngang. Biểu đồ thanh dọc đôi khi được gọi là biểu đồ cột.

Trong Plotly , một chuỗi được gọi là dữ liệu, bao gồm một mảng các dấu vết. Mỗi đối tượng theo dõi bao gồm type, x, yvà thông tin khác.

• xthiết lập xcác tọa độ, là một mảng của tiến trình tuần tự của các giá trị. Giá trị mặc định là một chuỗi bắt đầu từ 0, với số gia là 1.
• yđặt ytọa độ, là một mảng các giá trị tại mỗi điểm của y.
• Loại biểu đồ thanh là 'bar'.

• Tại các dòng 3–7, nó tạo một đối tượng bố cục, với title, widthvà height.
• Tại các dòng 9–18, nó tạo một mảng dữ liệu bao gồm hai đối tượng dấu vết. Cả hai dấu vết được định nghĩa là một loại 'bar', cùng với ycác giá trị.
• Tại dòng 21, biểu đồ thanh được tạo.

Chúng ta có thể thay đổi một trong các thanh thành hướng ngang bằng mã này:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
  },
];

Các định hướng hỗn hợp chỉ dành cho trình diễn. Có khả năng, các trường hợp sử dụng thực tế có tất cả các thanh theo cùng một hướng.

Đặt cả hai thanh theo hướng ngang bằng mã sau:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
    orientation: 'h',
  },
];

Biểu đồ phân tán

Biểu đồ đường kết nối một loạt các điểm dữ liệu bằng một đường và biểu đồ phân tán hiển thị một tập hợp các điểm. Trong Plotly, cả biểu đồ đường và phân tán đều có loại 'scatter'. Nó dùng modeđể xác định chế độ vẽ:

• 'lines': Nó vẽ một biểu đồ đường.
• 'markers': Nó vẽ một biểu đồ phân tán.
• 'text': Nó hiển thị một văn bản.
• 'none': Nó không hiển thị gì cả.

Đây là sửa đổi src/App.js:

• Tại các dòng 3–7, nó tạo một đối tượng bố cục, với title, widthvà height.
• Tại các dòng 9–20, nó tạo ra một mảng dữ liệu bao gồm hai đối tượng dấu vết. Cả hai dấu vết đều được xác định là loại 'scatter', cùng với ycác giá trị. Dấu vết đầu tiên đặt modethành 'lines', và dấu vết thứ hai đặt modethành 'markers'.
• Tại dòng 23, biểu đồ phân tán được tạo.

Đây là sửa đổi src/App.jssử dụng các chế độ kết hợp.

• Tại các dòng 3–7, nó tạo một đối tượng bố cục, với title, widthvà height.
• Tại các dòng 9–28, nó tạo ra một mảng dữ liệu bao gồm hai đối tượng dấu vết.
  – Tại các dòng 10–14, dấu vết đầu tiên đặt chế độ thành 'lines+markers'.
  – Tại các dòng 15–26, dấu vết thứ hai đặt chế độ thành 'markers+lines'. Ngoài ra, nó đặt marker.colorthành 'green', marker.sizethành 12, line.colorthành 'red'và line.widththành 3.
• Tại dòng 31, biểu đồ phân tán được tạo.

Phần sau dataArraybổ sung textcho modecả hai dấu vết, cùng với một mảng các giá trị văn bản. Đây là mã:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Nó hoạt động, ngoại trừ việc có một số chồng chéo giữa các điểm đánh dấu và văn bản.

Chúng tôi có thể thay đổi vị trí văn bản để tránh chồng chéo:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
    textposition: 'top center',
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    textposition: 'bottom center',
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Chúng ta đã thấy xvà ykích thước trong biểu đồ Plotly, và có một kích thước khác, kích thước màu sắc, trong biểu đồ phân tán. Trong ví dụ sau, chúng tôi tạo một biểu đồ có bảy dấu phân tán ngang bằng các điểm đánh dấu. Các điểm đánh dấu này được sử dụng để giải thích cách hoạt động của kích thước màu.

Đây là biểu đồ mục tiêu của chúng tôi:

Và đây là sửa đổi src/App.js:

• Tại các dòng 10–18, trace 0xác định ycác giá trị là [6, 6, 6, 6, 6, 6](dòng 12) và marker.colorlà một màu đơn giản, 'red'(dòng 15).

• Tại các dòng 19–28, trace 1định nghĩa ycác giá trị là [5, 5, 5, 5, 5, 5](dòng 21) và marker.colorscalelà [[0, 'green'], [1, 'blue']](dòng 24). colorscalelà một mảng chứa các mảng ánh xạ một giá trị được chuẩn hóa thành một chuỗi màu rgb, rgba, hex, hsl, hsv hoặc được đặt tên. Ở mức tối thiểu, cần có ánh xạ cho các giá trị thấp nhất (0) và cao nhất (1). colorscalechỉ có tác dụng nếu marker.colorđược đặt thành một mảng số (dòng 25).

• Tại các dòng 29–39, trace 2định nghĩa ycác giá trị là [4, 4, 4, 4, 4, 4](dòng 31). Vì marker.colorscalekhông được xác định, mặc định colorscaleđược áp dụng. marker.cmin(dòng 35) đặt giới hạn dưới của miền màu và marker.cmax(dòng 36) đặt giới hạn trên của miền màu. Nếu không, marker.cminvà marker.cmaxsẽ bị trừ khỏi marker.color(dòng 34).

• Tại các dòng 40–49, trace 3định nghĩa ycác giá trị là [3, 3, 3, 3, 3, 3](dòng 42). marker.cmid(dòng 46) đặt điểm giữa của miền màu bằng cách chia tỷ lệ marker.cminvà/hoặc marker.cmaxcách đều điểm này.

• Tại các dòng 50–59, trace 4định nghĩa ycác giá trị là [2, 2, 2, 2, 2, 2](dòng 52). Bên cạnh việc xác định colorscale, chúng ta có thể sử dụng tên bảng màu được xác định trước từ danh sách: 'Blackbody', 'Bluered', 'Blues', 'Cividis', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Jet', 'Picnic', 'Portland', 'Rainbow', 'RdBu', 'Reds', 'Viridis', 'YlGnBu', và 'YlOrRd'. Đối với trace 4, marker.colorscaleđược đặt thành 'Greens'(dòng 56).

• Tại các dòng 60–69, trace 5xác định ycác giá trị là [1, 1, 1, 1, 1, 1](dòng 62) và marker.colorscalelà 'YlOrRd'(vàng hoặc đỏ, dòng 66).

• Tại các dòng 70–85, trace 6định nghĩa ycác giá trị là [0, 0, 0, 0, 0, 0](dòng 72) và marker.colorscalelà 'Jet'(dòng 76).

• Tại các dòng 78–83 trong trace 6, colorbarđược xác định bằng title, orientation, xvà y. colorbarđược đặt theo hướng nằm ngang (dòng 80) để tránh che phủ chú giải. colorbar.xđặt xvị trí của thanh màu, với một số nằm trong khoảng từ hoặc bằng -2 và 3.
  Giá trị mặc định là 1,02. colorbar.yđặt vị trí y của thanh màu, với một số nằm trong khoảng từ hoặc bằng -2 và 3. Giá trị mặc định là 0,5. Trong trace 6, colorbar.xđược đặt thành 0,48 (dòng 81) và colorbar.yđược đặt thành -0,2 (dòng 82). Vị trí đã được di chuyển từ trên cùng (mặc định cho hướng ngang) xuống dưới cùng, bên cạnh trace 6. Nó cho biết kích thước màu của các điểm rải rác khớp với nhau như thế nào colorbar.

• Tại dòng 94, biểu đồ phân tán với bảy kích thước màu được tạo.

colorbar: {
  title: 'y = 0',
  orientation: 'v',
}

Rõ ràng, colorbarchồng chéo huyền thoại. Thay vì làm colorbartheo chiều ngang, chúng ta có thể thay chú giải thành chiều ngang.

Đây là bản sửa đổi src/App.js.

• Tại các dòng 7–9, legendđược đặt thành nằm ngang.
• Tại các dòng 81–83, hướng của colorbarbị xóa. Giá trị mặc định là dọc ( 'v').

Ví dụ trên cho thấy kích thước màu sắc rực rỡ và dễ sử dụng.

Tùy chọn cấu hình

Khi di chuột vào góc trên bên phải của biểu đồ, modebarsẽ hiển thị danh sách các nút. Từ trái sang phải là Download, Zoom, Pan, Box Select, Lasso Select, Zoom in, Zoom out, Autoscale, Reset axes, và Plotly Logo.

• Download: Nó tải xuống biểu đồ thông qua trình duyệt. Theo mặc định, nó tải xuống tệp PNG có kích thước 700x450. Dưới đây là ví dụ để định cấu hình nó để tải xuống tệp SVG có tên 'custom_image'và kích thước 800x600.

const configObj = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    width: 800,
    height: 600,
    scale: 1, // multiply title/legend/axis/canvas sizes by this factor
  },
};

Đặt scrollZoomthành true cho phép người dùng phóng to và thu nhỏ bằng con lăn trên chuột.

const configObj = {
  scrollZoom: true,
};

• Box Select: Nó cho phép chọn một phần của biểu đồ bằng một hộp.

• Lasso Select: Nó cho phép chọn một phần của biểu đồ với một đường biên tự do.

• Zoom in: Nó làm cho hình ảnh lớn hơn và gần hơn.

• Zoom out: Nó làm cho hình ảnh nhỏ hơn và xa hơn.

• Autoscale: Nó xem xét tất cả các điểm (dữ liệu) trong biểu đồ và thay đổi bố cục để hiển thị tất cả chúng.
• Reset axes: Nó quay lại các chi tiết bố cục được chỉ định cho biểu đồ, ngay cả khi điều đó để lại một số điểm.
• Plotly Logo: Chú giải công cụ hiển thị phiên bản Plotly và nhấp vào nó sẽ chuyển đếnhttps://plotly.com/.

<Plot layout={layoutObj} data={dataArray} config={configObj} />

• Tắt khả năng đáp ứng chiều rộng và chiều cao:

const configObj = {
  responsive: false,
};

const configObj = {
  staticPlot: true,
};

const configObj = {
  displayModeBar: true,
};

const configObj = {
  displaylogo: false,
};

const configObj = {
  modeBarButtonsToRemove: ['pan', 'lasso'], // Pan and Lasso are removed
};

const configObj = {
  modeBarButtonsToAdd: [
    'drawline',
    'drawopenpath',
    'drawclosedpath',
    'drawcircle',
    'drawrect',
    'eraseshape',
  ],
};

Đạo cụ xử lý sự kiện

Trong phần trước, chúng tôi đã giới thiệu Box Selectvà Lasso Select, Các phần được chọn này của biểu đồ. trường hợp sử dụng cho điều đó là gì?

Biểu đồ lắng nghe sự selectkiện có thể phản ứng với lựa chọn của người dùng.

Đây là sửa đổi src/App.js:

• Ở dòng 10, nó làm Box selecthành động mặc định của modebar.
• Tại các dòng 98–101, nó tạo một đối tượng cấu hình, đối tượng này luôn modebarhiển thị và ẩn Biểu trưng Plotly trên tệp modebar.
• Tại các dòng 103–105, một trình xử lý chọn lọc được tạo để ghi selectedthông tin.
• Tại dòng 109, biểu đồ được tạo với các giá trị của layout, data, configvà onSelected.

Trên bảng điều khiển Kiểm tra, selectedthông tin được hiển thị, có thể được sử dụng để xây dựng ứng dụng.

Đây là danh sách đạo cụ cho trình xử lý sự kiện: onAfterExport, onAfterPlot, onAnimated, onAnimatingFrame, onAnimationInterrupted, onAutoSize, onBeforeExport, , onBeforeHover, onButtonClicked, onClick, onClickAnnotation, onDeselect, onDoubleClick, onError, onFramework, onHover, onInitialized, onLegendClick, onLegendDoubleClick, onPurge, onRelayout, onRelayouting, onRestyle, onRedraw, onSelected, onSelecting, onSliderChange, onSliderEnd, onSliderStart, onSunburstClick, onTransitioning, onTransitionInterrupted, và onUnhover.onUpdateonWebGlContextLost

Phần kết luận

Chúng tôi đã chỉ ra cách thức hoạt động của plotly.js đối với biểu đồ thanh và biểu đồ phân tán. Ngoài khả năng biểu đồ đầy đủ, kích thước màu của nó rất sống động và dễ sử dụng. Các nút của nó modebarquá cao và mạnh mẽ. Tuy nhiên, nó thiếu khả năng tiếp cận.

So với Highcharts , các biểu đồ thống kê và khoa học của Plotly được cộng đồng khoa học dữ liệu/AI áp dụng rộng rãi. Chúng tôi sẽ đưa ra các ví dụ trong các bài viết sau.

Cảm ơn vì đã đọc.

Want to Connect? 

If you are interested, check out my directory of web development articles.