中国顶尖高校分布可视化应用

“985工程”学校名单 - 中华人民共和国教育部政府门户网站

一段 AI 无法正确理解的提示词：Trae、cursor 等都不行

基于这个中国省级行政区划地图可视化应用的 html 结构，制作一个 985 高校分布图 web 应用：
svg地图渲染的部分，我先做一个技术拆解：
1. 现有的素材是两张 svg 图，第一张是框线图（不会变的部分），第二张是填充素材（需要根据交互来动态改变一些属性），使用绝对定位使两张图片重合
2. 填充的部分分为 provinces 、dots 、texts 和 lines，四者按固定顺序渲染，很容易反推出来分组，并确定省份顺序（文字中有省份名称）
2. hover 时（通过调整省份的背景颜色、 text、lines 等的 opcacity 等）只高亮选中的省份，且只显示该省份对应的点、线、文本
3. 可视化还体现在 svg 中不同省份色块的背景颜色深度，可以看出来是分成几个组别的，颜色越深，说明数据量越大
现在：
1. 景区信息要换成对应省份的 985 学校信息，不要只显示有几家，而是学校名称都显示出来
2. 点击省份后在侧边打开的 drawer 中展示除具体的学校列表，点击学校则展示学校信息。
3. 支持切换 211 、985、双一流、
3. 支持切换主题色，还能支持多色（现有 svg 是绿色的主题色，也可以让配色丰富起来，不考虑可视化，如果单色的话就实现可视化）
2. （AI 可能完不成，也许需要在 photopea 中用钢笔工具编辑一下）既然地图中显示学校，就需要更大的空间，现有的图上，线条太密集，会造成文字太密集，需要调整一下线条的位置、长短等，但要注意线条起始的点不能变，因为那是地图上省份位置所在点。