d3可视化展示-环形关系网-哪些城市最富有?哪些行业最有钱景?

中国市值前30上市公司行业与城市-web数据可视化(d3.js环形关系图) 1、先看效果。 哔哩哔哩在线解读演示: 中国市值前30上市公司-web数据可视化-000004_哔哩哔哩_bilibili 中国市值前30上市公司-web数据可视化-000004 截图: 2、数据及可视化含义。 哈喽,大家好今天给大家展示的是中国市值前30公司的环形可视化关系图。 鼠标悬停在“北京”和“金融”这两个节点上,发现该城市和该行业的连线变为红色; 单击“北京”节点,显示的是北京的上市公司。左侧关系图表示所有北京上市公司及其分类关系;北京的市值前30.. 阅读详情

1、先看效果。如下图所示,

在线演示:

视频链接(推荐观看方式):https://www.bilibili.com/video/BV1Vk4y1z7Zd/

d3可视化展示-环形关系网-中国市值前50公司

截图:

2、数据及可视化含义。

这是一个可视化demo,使用d3.js v3开发;

可视化含义:

从2019年中国上市公司市值前50的公司分析哪些城市最富有?哪些行业最有钱景?关系网络图形的节点代表上市公司的名称,或者上市公司的城市以及行业分类。点击每个节点,都会进入其细分关系,关系游连线表示,箭头代表其方向。

上图左侧关系网络图形第2层节点为50家上市公司的证劵名称,第3层节点为行业、城市分类,第2层节点的公司名称连线到其对应的行业和城市节点。

上图右侧列表为50家上市公司的名称列表。

2.1、鼠标悬停在“北京”节点之上,则北京的公司连线变为红色;

可以看到,北京的上市公司比较多;

2.2、单击“北京”节点,则只显示北京的上市公司。

左侧关系图表示所有北京上市公司及其分类关系;北京的市值前50的上市公司有工商银行、建设银行、中国移动、农业银行、中国石油、中国银行等24家,占了全国几乎一半,北京的发达程度可见一斑。

北京的市值前50的上市公司主要分布在金融行业9家,能源行业4家,信息技术4家,工业4家,通讯服务2家,非日常消费品1家,不得不说,金融行业还是牛逼啊。

右侧是所有北京上市公司的列表。节点和列表都可以点击做选择。

2.3、单击“金融”节点,则只显示金融行业的市值前50的上市公司。

全国市值前50的上市公司金融行业有18家,占了三分之一还要多,金融果真是个好行业。

这18家金融公司,北京9家,深圳4家,上海3家,福州1家,香港1家。从城市分布来看,北京才是隐藏的金融大佬,上海经济中心的地位岌岌可危啊。

2.4、单击“深圳”节点,则只显示深圳的市值前50的上市公司。

全国市值前50的上市公司深圳有7家,金融行业4家,信息技术2家,房地产1家。

2.5、单击“阿里巴巴”节点,则只显示与阿里巴巴相关的节点。

右侧列表可以看到,阿里巴巴属于非日常消费品行业,位于杭州。

左侧关系图表可以看到,与阿里巴巴同样位于杭州的公司是海康威视;与阿里巴巴同样属于非日常消费品行业的公司有美的集团、格力电器、京东、上汽集团。

 

3、代码分析及讲解(讲解请看注释,注释会逐步丰富完善)。

D3 二维图表的绘制系列(十)环状饼图 上一篇: 基础饼图 https://blog.csdn.net/zjw_python/article/details/98214359 下一篇: 南丁格尔图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/artic... 阅读详情

相关推荐

用d3实现不规则环形图

HTML代码块 <svg viewBox="0 0 400 350" id="svgPie"></svg> <div class="toltip" *ngIf="isShow"> <img src="/assets/img/xuanfu.png" (click)="closeTolTip()" alt=""> </div> CSS代码块 svg { width: 98%; height: auto; } .toltip { p

u012705800的博客 983

R语言中绘制网络关系图的方法

介绍 人物关系网经常在文本分析中应用,其实质就是一个有边和节点的图,在R中实现图的展示有igraph和networkD3两个包,这里讲解networkD3的使用。 forceNetwork()的介绍 该函数创建一个D3的JavaScript网络图对象。 forceNetwork(Links, Nodes, Source, Target, Value, NodeID, Nodesize, Group, height = NULL, width = NULL, colourScale = JS("d3.

辉的博客 2176

[知识图谱实战篇] 四.HTML+D3+CSS绘制关系图谱

前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术、Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏伦老师的网易云课程,并结合自己的理解和技术分享了该系列专栏。前文介绍了Python3抓取电影实体知识,Seaborn可视化展示电影信息,D3可视化布局。本文着重构建知识图谱,通过D3显示已获取的节点和关系图谱。

杨秀璋的专栏 1万+

Vue + D3 动态可视化图实现之四:甜甜圈(饼状,环形)图

GTD数据分析及可视化项目的第四张图表,项目总体介绍见这篇文章。 最终效果 这张图的分析内容是影响比较严重的10个恐怖组织的详细信息统计,包括攻击手段,攻击目标,攻击武器和攻击地点,指标为攻击次数,以甜甜圈图形式呈现。左上和右下两张图从多到少染色为红到栏,右上和左下则为蓝到红,视觉效果比较好。每个指标的前两到三名会以文字标注内容,指标值和百分比。 实现 因为只统计10个组织,而且指标值仅为攻击次数,数据量较小,故数据表中直接用文字表示。 数据处理很简单,根据gname筛选即可。主要来看怎么画图。 画图主

アルタイル 1698

D3人脉关系网+圆形头像

D3历学图,实现的效果是 根据关系网显示人脉图,(名称,头像,关系)

d3关系图谱.html

最近工作需要完成一个股权穿透图,找了好多文档发现都不满足需求,最终选择d3.js来实现,包含子集的收缩展开,交互以及其他功能。之前由于没做过类似关系图以及不了解d3,踩了很多坑,我会尽可能将代码描述清楚(毕竟花了两个大夜),建议提前了解svg的简单使用和运行机制,d3的基本使用。 使用d3不像其他图表,d3的使用自由度极大,因此可以完成绝大多数图表需求,时间充足的话,可以逐步完成代码,理解实现思路后做其他修改就很简单了。

D3.js v5.0 饼图与环形图(一)

/* eslint-disable no-param-reassign */ import * as d3 from 'd3'; export default function pieChart(id, dataset) { const width = 400; const height = 400; const fontsize = 14; const svg = d3 ...

m0_37777005的博客 1330

python-调用动态链接库dll/so的方法

使用python ctyeps CDLL来调用linux下的so动态链接库或windows下的dll动态链接库

XIAOXIANG233233的博客 3662

d3之网络拓扑图进阶

重点:理解力布局与数据、图形的关系,力布局最初用来实现力导向图,它是基于基本苇尔莱积分法对粒子运动的模拟,D3实现了一种数值方法,这种数值方法在粒子级别模拟了简单约束下的牛顿运动方程,其约束条件表示了粒子之间的约束关系。D3中的data()、enter() 、exit()等方法则实现数据与图形的结合或分离。根据布局来处理填入的图形和数据,最终形成力布局可视化效果。 一、效果: 二、...

极简 1万+

YOLOv8实战:5分钟搞定Windows环境下的目标检测模型部署(附常见报错解决方案)

本文详细介绍了在Windows环境下快速部署YOLOv8目标检测模型的实战指南,包括环境配置、模型加载、快速验证及常见报错解决方案。通过5分钟快速入门教程,帮助开发者高效实现计算机视觉应用,特别适合需要快速上手的AI开发者。

weixin_30566063的博客 556

FortiGate-60E防火墙忘记密码?用Console线+TFTP重装固件v7.0.9全流程

本文详细介绍了当FortiGate-60E防火墙忘记密码且物理重置无效时,如何通过Console线连接并利用TFTP服务器重装固件(如v7.0.9)的全流程。从恢复原理、工具准备、网络配置到逐步执行命令,提供了完整的实战指南,帮助管理员彻底恢复设备出厂设置并重置密码。

snow3的博客 333

[d3]环形图

d3学习环形图

bbt953的博客 512

使用Google Earth Engine(GEE)的Python API,您可以将经纬度坐标转换为Landsat影像的路径/行号

使用Google Earth Engine(GEE)的Python API,您可以将经纬度坐标转换为Landsat影像的路径/行号。在这个示例中,我们选择了一个位于加利福尼亚州旧金山市附近的点,其经度为-122.084,纬度为37.421998。首先,我们需要导入必要的库和模块。接下来,我们定义一个函数,该函数将接收经度和纬度作为输入,并返回对应的Landsat路径/行号。最后,我们提取路径和行号的值,并将它们作为结果返回。现在,我们可以使用这个函数来获取特定点的Landsat路径/行号。

VwajAlgorithm的博客 348

如何使用 D3.js 制作六边环形图

本文适合对 D3 API 稍有熟悉的人阅读,如果你是的话,继续看下去吧~ 附 D3API 文档地址 对设计图的思考 先看我们要实现的设计图: 这个环形图适合多个共同展示, 高亮的环形表达的意义是,当前数据在总数的占比。so 实现这个图需要两个数据,一个是 当前数据num,一个是总数sum。 数据明确了,再看设计部分: 经过和设计师的沟通讨论,得出以下几点: 该组件背景为 0.1 透明度的黑色;...

LimonSea的博客 1566

[低代码 + AI] 明道云与 Dify 的三种融合实践方式详解

融合方式技术路径优点局限或注意事项UI 嵌入iframe 表单嵌入快速集成、用户体验一致无法自定义交互逻辑明道云调用 DifyAPI 请求节点工作流自动化、逻辑灵活有 timeout 限制、需优化 promptDify 调用明道云插件或 API 调用节点可查询实际业务数据、增强 AI 智能需理解明道云 API 结构、权限设置复杂明道云与 Dify 的结合为低代码平台注入了智能动力。

技术小甜甜:传播可落地技术,帮助个人和企业降低解决真实场景问题的成本 1187

基于STM32XX的LCD液晶显示屏(HS19264G06A、驱动芯片:ST7525)驱动C程序设计

define USE_HW_SPI 1 // 1:使用硬件SPI, 0:使用软件模拟SPI。

myron6688的博客 234

D3.js v5.0 饼图与环形图(二)

环形图 import * as d3 from 'd3'; export default function pieRatio(node, name, ratio, color) { // 基础数据初始化 const svgObj = { width: 124, height: 124, paddingTop: 28, }; const radiusO...

m0_37777005的博客 851

OpenClaw第2章:快速安装

本章将手把手教你安装 OpenClaw。

Maynor的博客 3236

使用 d3.js 力导布局绘制资源拓扑图

更多文章,参见大搜车技术博客:blog.souche.com/ 大搜车无线开发中心持续招聘中,前端,Nodejs,android 均有 HC,简历直接发到:sunxinyu@souche.com 最近公司业务服务老出bug,各路大佬盯着链路图找问题找的头昏眼花。某天大佬丢了一张图过来“我们做一个资源拓扑图吧,方便大家找bug”。 就是这个图,应该是马爸爸家的 好吧,来仔细瞧瞧这个需求咋整呢。...

weixin_33747129的博客 780

【Hermes Agent】2026 Hermes Agent 最新入门级实战指南:从原理、部署、模型配置到落地 Demo

当下 Vibe Coding、AI 自动化时代,单纯对话大模型已经没有竞争力,

十年老程序猿,AI 疯狂研究专家,前沿硬核知识分享 244

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

D3 关联关系图 力学图

经常分享天眼查 企查查 的一些好的可视化图,是因为本人也是在一家相同性质公司搬砖 经常会被产品强制性要求仿做某个效果图。分享出来就是希望可以帮到大家。有问题 我看到不忙的时候我会回复。 首先该图中信息属于公示信息 不违法也不牵扯机密。 图1 这个是仿照其查查的关联关系图做的 因为本公司数据量小 没有采用企查查做法。当然我之前也吧企查查代码拔下来了参考了下。下面图2 这个是企查查 话不多说...

肖皓文 7424

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

D3人物关系图谱

本人其他博客有介绍

杰克拉乌的博客 8676

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

d3.js关系图

<!DOCTYPE html> <html> <head> <style> .nodetext { font-size: 12px; font-family: SimSun; fill: #000000; } ....

高山景行,一尘不染 7493

d3-关系图

1.做项目中,因需要,用d3写了个人车关系图 项目地址:https://github.com/davidpan123/vue-d3

空谷足音的博客 2246

d3可视化展示-brush可拖拽时间轴(可播放)+地图map

1、先看效果。如下图所示, 视频链接: 截图: 2、数据及可视化含义。 这是一个可视化demo,使用d3.js+mapbox开发,可视化了2013年1月 - 2015年12月的中国交通事故伤亡人数,数据为模拟的非真实数据; 可视化含义: 2.1、map部分,地图上的红色及橙色圆形marker表示发生事故的地点,红色表示死亡人数大于等于1,橙色代表只有受伤人员,marker的半径代表此次事故的伤亡人数总和,半径越大则伤亡人数越多;点击marker可以弹出信息窗infobox; 2.2、左下底部为b

李海洋的博客 3236

d3可视化展示-d3.layout.pack-relation层级关系数量可视化

1、先看效果。如下图所示, 在线演示: 视频链接(带讲解): 截图: 2、数据及可视化含义。 这是一个可视化demo,使用d3.js开发, 3、代码分析及讲解。

李海洋的博客 1439
上一篇: d3可视化展示-d3.layout.pack-relation层级关系数量可视化
lining300
博客等级 码龄10年 7粉丝 7原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值