如何同时展示数据中的层级关系和趋势变化？

yuanfan

下面是楼主从官方渠道收集的全国纪检监察统计数据，第一组数据是每年处分的不同级别的干部数量，第二组数据是按照处罚轻重程度来划分的处分人数，可看做第一种形态是处分最轻、第四种形态是处分最重。

楼主想要对这些数据做可视化的展示，形式上不限定各类图形或表格，不过没想好咋弄合适。其实如果是数量级相近的同类别的数据，一般也可以用雷达图、平行坐标系来展示历年趋势变化，不过这种不同层级的有点不好整。如果路过的坛友有兴趣，不妨留言指点一二。

|统计期|处分省部级干部|处分厅局级干部|处分县处级干部（万人）|处分乡科级干部（万人）|处分一般干部（万人）|处分农村、企业等其他人员（万人）|
|:----|:----|:----|:----|:----|:----|:----|
|2024|25|1806|1.3|4.3|4.6|22.9|
|2023|49|3144|2.4|8.2|8.5|41.7|
|2022|53|2450|2.1|7.4|8.3|41.3|
|2021|36|3024|2.5|8.8|9.7|41.4|
|2020|27|2859|2.2|8.3|9.9|39.8|
|2019|41|4000|2.4|8.5|9.8|37.7|
|2018|51|3500|2.6|9.1|11.1|39|
|2017|58|3300|2.1|7.8|9.7|32.7|
|2016|76|2700|1.8|6.1|7.6|25.6|

|统计期|运用“四种形态”批评教育和处理（万人次）|第一种形态（万人次）|第二种形态（万人次）|第三种形态（万人次）|第四种形态（万人次）|
|:----|:----|:----|:----|:----|:----|
|2024|87.9|54.2|27.1|3.1|3.6|
|2023|171.8|109.6|49.2|6.4|6.6|
|2022|183.8|123.2|47.8|6.4|6.4|
|2021|212.5|148.7|49.4|7|7.4|
|2020|195.4|133|48.5|7.1|6.8|
|2019|184.9|124.6|46.3|7.2|6.8|
|2018|173.7|110.4|49.5|8.2|5.5|
|2017|131.6|78.6|41.2|7|4.8|

yuanfan

:|
😐

天啦噜，这个 markdown 表格的问题咋还没修……
:)
🙂

我试试能有多少用标点符号打出来的表情。
:(
🙁

:D
😃
;)
😉

yuanfan

再试试，一般回帖达到多少行的时候会自动折叠呢？

道歉表情：
〈（\u3000）〉
（。・＿・。）
(m;_ ) m
( ;m) m
(. .)m
（・＿・）
人 ( )
(. .) ( ) m
( )m
（＞人＜；）
(シ )シ
< ( )>
(* )人
m ( _)m
么么哒表情：
(*￣3￣)╭
(￣ )
(￣😉
（づ￣3￣）
( *￣▽￣)
(￣ (￣)
(╯ε╰)
(ε￣ )
( (≧︶≦)
(╯3╰)
o (￣3￣)o
(* ￣3)
（○｀ 3′○）
٩ (●˙ε˙●)۶
(っ´Ι`)っ
调皮表情：
^~
｜−・;）
ﾍ (･|
≧ˍ≦
ˇˍˇ
ˇ０ˇ
ˇ︿ˇ
ˇε
ˇ ˇ
3ˇ
ˇωˇ
ˇ﹏ˇ
ˇ△ˇ
ˇ▽ˇ
(/ω＼)
≧︿≦
音乐表情：
♫♪˙‿˙♫♪
（＊＾ω＾）♪
ρ（ーoー）♪
（☆￢o）q
♪〜（￣ε￣）
ρ（^^）♭
ρ（^ o ^）♪
♫꒰･◡･ ๑꒱
（☆￣o）q
（☆≧o）q
ρ（oδ★）
（´△｀）♪
ρ（o ＾★）
ρ（＾ o ＾）♪
骄傲表情：
(-∀-)
（・―・）
( ⊙‿⊙)
（￣ー￣）
(꒵꜅꒵)
（｀ー´）
(꒡ꜙ꒡)
(～)
(｀へ′)
(｀ڼ´)
⚈ ̫ ⚈
(￣ー￣)
( ´ｰ`)
(￣ω￣)
(-、-)
紧张表情：
（⊃‿⊂）
）Д⊙`）
●﹏●
（☍﹏⁰）
（ノдヽ）
（ΩДΩ）
（O∆O）
⊙﹏⊙
◑.◑
（꒪⌓꒪）
ゞ◎Д◎ヾ
ଵ˛̼ଵ
《ﾟДﾟ》

CyrusYip

yuanfan 再试试，一般回帖达到多少行的时候会自动折叠呢？

此论坛没自动折叠功能吧。

yuanfan

CyrusYip
讲真，二楼、三楼的内容是我昨天摸鱼的时候在这里愉快玩耍的结果，本以为带闪电标志的斑竹们看到会顺手删掉或者整理一下，哈哈哈，万万没想到得到的是正经的回复。俺感到有些惭愧啊。

chuxinyuan

论坛功能暂不这里讨论。回到问题本身，我试着做了一个 treemap，不知道是不是楼主想要的效果，代码如下：

data = data.frame(
  Year = c(2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017),
  A1 = c(54.2, 109.6, 123.2, 148.7, 133, 124.6, 110.4, 78.6),
  A2 = c(27.1, 49.2, 47.8, 49.4, 48.5, 46.3, 49.5, 41.2),
  A3 = c(3.1, 6.4, 6.4, 7, 7.1, 7.2, 8.2, 7),
  A4 = c(3.6, 6.6, 6.4, 7.4, 6.8, 6.8, 5.5, 4.8)
)

library(tidyr)
library(ggplot2)
library(treemapify)

data |> 
  pivot_longer(
    data = _, 
    cols = -Year, 
    names_to = "Type"
  ) |> 
  ggplot(
    aes(
      area = value, 
      label = Type, 
      subgroup = Year,
      fill = factor(Year)
    )
  ) +
  geom_treemap() +
  geom_treemap_text(
    color="red",
    place = "topleft",
    reflow = TRUE,
    alpha = 0.5
  ) +
  geom_treemap_subgroup_border() +
  geom_treemap_subgroup_text(
    place = "center",
    grow = TRUE,
    alpha = 0.5,
    color = "black"
  )

yuanfan

chuxinyuan

我下载了 treemapify 这个包，复现了代码，仔细琢磨了一会，这图看上去是把所有数据都按比例缩放成了一个矩形，然后按年放在一起，最后组成一个更大的矩形，用历年矩形的大小代表趋势变化，用每年里面每个小矩形的大小代表层级。

不过也正是因为要展现的要素过多，不够一目了然，容我想想，可能是问题本身就有问题。

Cloud2016

yuanfan 桑基图是否可以？

yuanfan

Cloud2016

在我的认知里，桑基图是表现流向的，如果按从左到右绘制桑基图的话，最左边的量应该是固定的，我真的想象不出来怎么表现层级关系和趋势变化。

Cloud2016

yuanfan 绘制层级关系+动画表示时间？

yuanfan

Cloud2016

绘制层级关系+动画表示时间？

这句话令我联想到的是把漏斗图做成动画形式，如果是这样的话就不能连贯地表现时间上的趋势变化。话说你真的不想吐槽一下这个问题本身么。

chuxinyuan

我觉得直接计算差分，然后画五条折线图就很直观。

yuanfan

用表格填充 CSS 样式的方式实现，可复现的代码如下。

library(DT)
library(data.table)

data <- data.frame(
  '统计期' = c(2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017),
  '运用四种形态批评教育和处理万人次' = c(87.9, 171.8, 183.8, 212.5, 195.4, 184.9, 173.7, 131.6),
  '第一种形态' = c(54.2, 109.6, 123.2, 148.7, 133, 124.6, 110.4, 78.6),
  '第二种形态' = c(27.1, 49.2, 47.8, 49.4, 48.5, 46.3, 49.5, 41.2),
  '第三种形态' = c(3.1, 6.4, 6.4, 7, 7.1, 7.2, 8.2, 7),
  '第四种形态' = c(3.6, 6.6, 6.4, 7.4, 6.8, 6.8, 5.5, 4.8)
)
setDT(data)

# 为了缩减代码数量，将表格中填充圆形图案的部分迁移出来
format_add <- function(...) {
  formatStyle(
    ...,
    # 'display' = 'flex', # 四个圆会竖向排列在一个单元格
    # 'display' = 'inline', # 四个圆会横向排列在一个单元格
    # 'display' = 'table-row', # 竖向的四个圆变成竖向的四个格子
    'display' = 'table-cell', # 四个圆分在四列
    'align-items' = 'center',
    'justify-content' = 'center',
    'width' = '1.875rem',
    'height' = '1.875rem',
    'border' = '0.5px solid rgb(0,0,0,0.1)',
    'border-radius' = '50%',
    'color' = '#000',
    'font-size' = '1.25rem',
    'letter-spacing' = '-1px'
  )
}
  
datatable(data = data[, ':='(
  `第一种形态` = round(`第一种形态` / `运用四种形态批评教育和处理万人次`, 2),
  `第二种形态` = round(`第二种形态` / `运用四种形态批评教育和处理万人次`, 2),
  `第三种形态` = round(`第三种形态` / `运用四种形态批评教育和处理万人次`, 2),
  `第四种形态` = round(`第四种形态` / `运用四种形态批评教育和处理万人次`, 2)
)][`统计期` >= 2017, c('统计期', '运用四种形态批评教育和处理万人次', '第一种形态', '第二种形态', '第三种形态', '第四种形态')],
rownames = FALSE,
options = list(dom = 't')) |>
  formatStyle(
    columns = '运用四种形态批评教育和处理万人次',
    background = styleColorBar(c(0, data$`运用四种形态批评教育和处理万人次`), 'steelblue'),
    # 填充条形
    # 填充背景的尺寸，第一个值为宽度，第二个值为高度
    backgroundSize = '100% 90%',
    backgroundRepeat = 'no-repeat',
    color = 'white'
  ) |>
  format_add(columns = '第一种形态', backgroundColor = "#FF6347") |>
  format_add(columns = '第二种形态', backgroundColor = "#ff2700") |>
  format_add(columns = c('第三种形态', '第四种形态'),
              backgroundColor = "#B50A2AFF") |>
  formatPercentage(columns = c(3:6), digits = 0)

执行代码后的表格见https://yuanfan.rbind.io/project/ccdi/#%E4%B8%89%E5%A4%84%E5%88%86%E5%B9%B2%E9%83%A8%E6%83%85%E5%86%B5