漫威电影人物关系可视化
3D Force-Directed Graph
这是一个使用ThreeJS/WebGL的三维力定向图形组件。
一个3D的知识图谱
官网地址: 漫威电影宇宙 |海峡时报 (straitstimes.com) (魔法)
这篇文章介绍如何使用这个组件来实现相似的效果。
天空盒
需要注意的小细节是:用于做天空盒的图片需要1:1是个正方形,不然无法显示。
var urls = [
'cube-image/marvel_right1.png',
'cube-image/marvel_left2.png',
'cube-image/marvel_top3.png',
'cube-image/marvel_bottom4.png',
'cube-image/marvel_front5.png',
'cube-image/marvel_back6.png'
];
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.jsonUrl('../datasets/miserables.json')
.nodeLabel('id')
.nodeAutoColorBy('group');
var cubeLoader = new THREE.CubeTextureLoader();
Graph.scene().background = cubeLoader.load(urls); //天空盒,添加为scene中的背景
其中的图片素材来源于官网
数据预处理
const imgs = ['tonys.svg', 'rhody.svg', 'hawke.svg', 'stever.svg', 'falcon.svg', 'nickf.svg', 'blackw.svg', 'bruceb.svg', 'vision.svg', 'wandam.svg', 'pietrom.svg', 'ultronu.svg', 'wolfgangv.svg', 'helenc.svg', ...]; //这里将人物的名字加上.svg后的字符存入列表,简单直接
const GROUPS = 12;
const relation_types = {friend:1,enemy:2,work:3,love:4,creation:5,family:6}
const gData = {
nodes: imgs.map((img, id) => ({ id, img ,relation: relation_types[data['links'][id]['relation']]})), //不同的关系有不同的颜色
links: [...Array(data['links'].length).keys()]
.filter(id => id)
.map(id => ({
source: data['links'][id]['source'],
target: data['links'][id]['target'],
}))
};
csv数据获取: Python + Neo4j(安装)可视化分析漫威十年人物关系图谱_LL Leung的博客-CSDN博客
对csv文件进行了处理。
下载所有人物的图片
添加样式
样例中截取需要的部分粘贴进去,需要注意前后的顺序。
结果
线条选择较粗,为了鼠标经过时突出显示,更加显眼。
Github源码: BifYule/My-Visualization-project: 利用使用ThreeJS/WebGL的三维力定向图形组件构建漫威人物关系可视化 (github.com)
CSDN-Ada助手: 恭喜您开始博客创作,这篇博客的主题非常有趣,我也非常喜欢漫威电影。建议您在下一篇博客中,可以加入更多的分析和解读,让读者更深入地了解漫威电影人物之间的复杂关系。期待您的下一篇作品! 推荐【每天值得看】:https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1 如果您持续创作,完成第三篇博客,并且质量分达到 80 分以上,在评论区就有机会获得红包奖励哦!