Graph Gallery 实现表格管理和跳转

[ShixiangWang]

文档过多时通过菜单栏查询会非常不方便。

所有图都实现表格化处理，即每个图都是表格的一行，包含 title, 一句话介绍，预览图，分类标签，并支持点击跳转到对应的图文教程。

[ZhengTiger]

推荐一个构建 Graph Gallery 的 R 包：https://github.com/royfrancis/pixture

[ShixiangWang]

你后面可以尝试下，纳入实施。

[ShixiangWang]

用 DT 包应该可以实施我提到的效果

[ZhengTiger]

Graph Gallery 页面的搭建

使用 pixture 包实现，这个包基于前端代码开发，优势是可以实现交互式的效果，并且移动端适配，测试效果链接：https://zhengtiger.github.io/Bizard/GraphGallery.html

安装 pixture

注：pixture 原始仓库的代码存在标题乱码的问题，我进行了一些修改，下面安装我修改的版本

remotes::install_github('ZhengTiger/pixture')

Graph Gallery 的实现

主要通过 pixture 包的 pixgallery 函数实现，打开 Bizard 项目的 GraphGallery.qmd 文件，添加以下代码：

library(pixture)

paths <- c(
  "https://raw.githubusercontent.com/openbiox/Bizard/refs/heads/gh-pages/images/ViolinPlot_demo.jpg",
  "https://raw.githubusercontent.com/openbiox/Bizard/refs/heads/gh-pages/images/Density_demo.png",
  "https://raw.githubusercontent.com/openbiox/Bizard/refs/heads/gh-pages/images/Histogram_demo.png",
  "https://raw.githubusercontent.com/openbiox/Bizard/refs/heads/gh-pages/images/BoxPlot_demo.png",
  "https://raw.githubusercontent.com/openbiox/Bizard/refs/heads/gh-pages/images/Ridgeline_demo.png",
  "https://raw.githubusercontent.com/openbiox/Bizard/refs/heads/gh-pages/images/Beeswarm_demo.png"
)

title <- c(
  "Violin",
  "Density",
  "Histogram",
  "Box",
  "Ridgeline",
  "Beeswarm"
)

describe <- c(
  "Visualize the data distribution",
  "Visualize the distribution of a numerical variable",
  "Visualize the frequency of data within specific intervals",
  "Visualize the central tendency and dispersion of one or more sets of continuous quantitative data",
  "Visualizes the distribution of multiple numeric variables across different categories",
  "Visualizes the disperses data points slightly to prevent overlap"
)

link <- c(
  "https://openbiox.github.io/Bizard/Distribution/ViolinPlot.html",
  "https://openbiox.github.io/Bizard/Distribution/Density.html",
  "https://openbiox.github.io/Bizard/Distribution/Histogram.html",
  "https://openbiox.github.io/Bizard/Distribution/BoxPlot.html",
  "https://openbiox.github.io/Bizard/Distribution/Ridgeline.html",
  "https://openbiox.github.io/Bizard/Distribution/Beeswarm.html"
)

captions <- paste0(
  "<div style='line-height:0.1;'>",
  paste0("<div style='font-size:1.0rem;margin-bottom:0.2em;line-height:1;color:#34495e;'><b>", title, "</b></div>"),
  paste0("<div style='line-height:1.2;font-size:0.5rem;color:#808b96;'>", describe, "</div>"),
  "</div>"
)

pixgallery(
  path = paths,
  caption = captions,
  caption_valign = "below",
  caption_halign = "center",
  link = link,
  h = "120px",
  w = "150px", 
  border_radius = "10px",
  layout = "grid"
)

参数解释：path 为图形图片的url链接；caption 用于设置图形的文字描述，可以配合 html 标签使用；caption_valign 和 caption_halign 设置文字的对齐效果；link 用于设置点击图片跳转到的对应教程url链接；h 和 w 用于设置图形卡片高宽；border_radius 设置卡片圆角；layout 设置卡片布局方式。

渲染后效果如下：

鼠标移动到卡片，对应卡片会用阴影突出显示，点击图片可以跳转链接。

问题：目前卡片中的图片显示不全，这是因为不同图形的图片大小不一，后续需要针对 Graph Gallery 页面定制统一大小的图片。另外卡片中的标题和一句话介绍可能也需要统一修改。

[ShixiangWang]

@ZhengTiger 从单独的展示看，效果是非常不错的。但考虑到后面图非常多，我在最开始设想，利用表格可以进行筛选过滤，并可以添加分类/便签等形式，这样是不好处理的。

你后面摸索下其他包看看，包括：

1. DT

• https://rstudio.github.io/DT/
• https://stackoverflow.com/questions/62970417/rendering-images-in-dt-table-in-r-shiny
• https://stackoverflow.com/questions/30671958/how-to-embed-an-image-in-a-cell-a-table-using-dt-r-and-shiny

2. reactable

• https://glin.github.io/reactable/
• https://glin.github.io/reactable/articles/examples.html
• https://glin.github.io/reactable/articles/cookbook/cookbook.html#embed-images

3. ...

• https://r-graph-gallery.com/web-interactive-table-with-inline-labels-images-and-charts.html

[ZhengTiger]

Graph Gallery 实现表格管理和跳转

使用 reactable 包实现，这个包的优势是可以构建交互式的表格，方便管理大量图表，测试效果链接：https://zhengtiger.github.io/Bizard/GraphGallery-table.html

代码实现

主要参考了 reactable 的 popular-movies demo，里面用到了很多前端代码，这里就不详细解释了，后面通过 PR 将代码上传。

功能介绍

1. 表格化管理

为了方便管理，所有图都实现表格化处理，即每个图都是表格的一行，如下所示 gallery_data.csv 文件内容：

• Id：图形编号
• Name：图形名称/标题
• Image_url：图形 png/jpg 文件的 url
• Tutorial_url：图形教程的跳转链接 url
• Description：一句话介绍图形
• Type：图形分类标签

读取这个 gallery_data.csv 文件后，通过 reactable 在网站中渲染成如下表格：

表格展示了图形的 ID、图形、图形标题、一句话介绍、图形分类

2. 图形预览功能

鼠标移动到 GRAPH 列的图形上时，鼠标会变成放大镜，点击图形可以放大预览，再次点击恢复原样。

3. 图文教程跳转功能

点击图形蓝色标题，可以跳转到对应图文教程链接

4. 图形搜索功能

reactable 表格提供了搜索功能，如通过搜索框搜索 Histogram 图形：

[ShixiangWang]

@ZhengTiger 非常好，这样基本搞定了，后续还容易根据需要进行拓展/修改。

[ShixiangWang]

这个跟中英文对照也需要匹配下，上述的表格需要做一些拓展进行支持，不过这个难度应该不大了。

你最近有空针对这两个点（中英文/gallery）再思考优化下方案，并用ppt记录下策略，过程。等后面正式开始后正式提交pr和测试合并哈。