[技术小技巧] 可视化分析:在jupyter中使用d3可视化树形结构

首先在python中定义一个字符串,记录d3.js绘制属性图的js脚本代码模版。其中{{data}}就是将来要被替换的内容。

d3_code_template = """
// 创建树状结构数据
var treeData = {{data}};// 创建d3树布局
var margin = { top: 20, right: 90, bottom: 30, left: 90 },width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;var svg = d3.select("#tree").append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");var treemap = d3.tree().size([height, width]);var nodes = d3.hierarchy(treeData);
nodes = treemap(nodes);var link = svg.selectAll(".link").data(nodes.descendants().slice(1)).enter().append("path").attr("class", "link").attr("d", function (d) {return ("M" + d.y + "," + d.x +"C" + (d.y + d.parent.y) / 2 + "," + d.x +" " + (d.y + d.parent.y) / 2 + "," + d.parent.x +" " + d.parent.y + "," + d.parent.x);});var node = svg.selectAll(".node").data(nodes.descendants()).enter().append("g").attr("class", function (d) {return "node" + (d.children ? " node--internal" : " node--leaf");}).attr("transform", function (d) {return "translate(" + d.y + "," + d.x + ")";});node.append("circle").attr("r", 10);node.append("text").attr("dy", ".35em").attr("x", function (d) {return d.children ? -13 : 13;}).style("text-anchor", function (d) {return d.children ? "end" : "start";}).text(function (d) {return d.data.name;});
"""

定义一个字符串,记录html的模版。其中“// 在这里插入d3.js代码”就是将来要被替换的部分。

html_template = """
<style>
.node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;
}.node text {font: 12px sans-serif;
}.link {fill: none;stroke: #ccc;stroke-width: 1.5px;
}
</style><svg id="tree" width="960" height="500"></svg><script src="https://d3js.org/d3.v5.min.js"></script><script>
// 在这里插入d3.js代码
</script>
"""

在jupyter中import入这两个变量,编写可视化的Demo代码。

from IPython.display import display, HTMLtree_data = {"name": "Root","children": [{"name": "Node 1","children": [{ "name": "Node 1.1" },{ "name": "Node 1.2" },{ "name": "Node 1.3" },]},{"name": "Node 2","children": [{ "name": "Node 2.1" },{ "name": "Node 2.2" },{ "name": "Node 2.3" }]}]
}d3_code = d3_code_template.replace(r'{{data}}', str(tree_data)) 
print(d3_code)html_content = html_template.replace("// 在这里插入d3.js代码", d3_code)
display(HTML(html_content))

呈现结果如下:

在这里插入图片描述
可以是用F12 debug和前端开发类似,比如下面这个报错,是因为d3还没有下载好,因此找不到,可以等一会儿再运行。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/6947.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leecode每日一练

打家劫舍 我一开始的思路也是dp&#xff0c;但是转移方程想错了&#xff0c;这个题目转移方程应该是dp[i] max(dp[i-2]nums[i],dp[i-1]) class Solution { public:int rob(vector<int>& nums) {int len nums.size();vector<int> dp(len);int ans 0;if(len&g…

音频智能切换器JR-AR42-A

憬锐JR-AR42-A音频自动智能切换器(四切一)&#xff0c;具备四路模拟卡侬立体声音频输入&#xff0c;两路模拟卡侬立体声音频输出&#xff0c;其中输入第1路和输出第1路为断电直通通道。具有输入音频信号幅度判别&#xff0c;可设置门限电平和切换延时时间&#xff0c;可以根据需…

五一反向旅游,景区“AI+视频监控”将持续助力旅游业发展

一、建设背景 每年五一劳动节出去旅游都是人挤人状态&#xff0c;这导致景区的体验感极差。今年“五一反向旅游”的话题冲上了热搜&#xff0c;好多人选择了五一之后再出去旅游&#xff0c;避开拥挤的人群&#xff0c;这个时候景区的监管力度和感知能力就更要跟上去&#xff0…

TCP粘包拆包问题解决之道

文章目录 1. TCP粘包/拆包问题2. TCP粘包/拆包发生的原因3. TCP粘包解决策略 1. TCP粘包/拆包问题 假设客户端分别发送了两个数据包D1和D2&#xff0c;由于服务端一次读取到的字节数是不确定的&#xff0c;故存在以下四种情况。 服务端分两次读取到了两个独立的数据包&#xf…

C++ stack and queue

1. stack模拟实现 CSTL中的栈是一种容器适配器&#xff0c;它是将vector/list进行封装&#xff0c;push/pop等接口直接调用vector/list的接口即可&#xff0c;不需要像C语言那样&#xff0c;从头开始造轮子 namespace byh {template<class T, class Container deque<T&…

智慧隧道建设中,如何提升隧道广播清晰度,解决隧道广播有效发布问题

近年来&#xff0c;我国高速公路智慧隧道建设步伐加快&#xff0c;全国各地高速公路运营单位纷纷加大投资力度&#xff0c;进行智慧隧道建设&#xff0c;提高隧道智能化水平。通过高清视频监控、AI视频识别、雷视融合、全域轨迹、激光雷达、火灾报警、气体检测、亮度检测、自动…

【Scala---04】函数式编程 『 函数 vs 方法 | 函数至简原则 | 函数式编程』

文章目录 1. 函数 vs 方法1.1 方法(1) 定义方法(2) 运算符即方法 1.2 函数(1) 定义函数(2) 匿名函数 1.3 方法转为函数1.4 可变参数&默认参数 2. 函数至简原则3. 函数式编程3.1 函数式编程思想3.3 函数柯里化&闭包3.5 递归 & 尾递归 4. 补充4.1 访问元祖元素4.2 &g…

ROS机器人入门:机器人系统仿真【学习记录】——2

承接上一篇博客&#xff1a; ROS机器人入门&#xff1a;机器人系统仿真【学习记录】——1-CSDN博客 我们先前结束了&#xff08;上一篇博客中&#xff09;&#xff1a; 1. 概述 2. URDF集成Rviz基本流程 3. URDF语法详解 4. URDF优化_xacro 下面让我们继续学习ROS机器人…

【Scala---01】Scala简介与环境部署『 Scala简介 | 函数式编程简介 | Scala VS Java | 安装与部署』

文章目录 1. Scala简介2. 函数式编程简介3. Scala VS Java4. 安装与部署 1. Scala简介 Scala是由于Spark的流行而兴起的。Scala是高级语言&#xff0c;Scala底层使用的是Java&#xff0c;可以看做是对Java的进一步封装&#xff0c;更加简洁&#xff0c;代码量约是Java的一半。…

前端开发攻略---打破Chrome的最小字号限制,设置任意字号大小

目录 1、原因 2、解决方法 1、原因 由于Chrome浏览器的限制&#xff0c;在网页中的字号默认最小为12px&#xff0c;更改为12px以下的字号大小是无效的 2、解决方法 1、在Chrome浏览器中调整字号最小值 优点&#xff1a;快&#xff0c;方便&#xff0c; 缺点&#xff1a;只对自…

Delta lake with Java--在spark集群上运行程序

昨天写了第一篇入门&#xff0c;今天看见有人收藏&#xff0c;继续努力学习下去。今天要实现的内容是如何将昨天的HelloDetlaLake 在spark集群上运行&#xff0c;。具体步骤如下 1、安装spark,我使用的是 spark-3.5.1-bin-hadoop3-scala2.13&#xff0c;去官网下载&#xff0c…

全流程基于GIS、python机器学习技术的地质灾害风险评价与信息化建库应用

入门篇&#xff0c;ArcGIS软件的快速入门与GIS数据源的获取与理解&#xff1b;方法篇&#xff0c;致灾因子提取方法、灾害危险性因子分析指标体系的建立方法和灾害危险性评价模型构建方法&#xff1b;拓展篇&#xff0c;GIS在灾害重建中的应用方法&#xff1b;高阶篇&#xff1…

网络基础-思科IOS基本操作(Cisco)

思科设备的命令行模式&#xff1a; 1.用户模式 (User EXEC Mode): 这是用户最初进入设备时所处的模式。在这个模式下&#xff0c;用户只能执行一些基本的查看命令&#xff0c;不能进行任何配置更改。能够进入该模式说明设备没问题&#xff1b;提示符通常是一个设备名称后面跟着…

BetterMouse for Mac激活版:鼠标增强软件

BetterMouse for Mac是一款鼠标增强软件&#xff0c;旨在取代笨重的、侵入性的和耗费资源的鼠标驱动程序&#xff0c;如罗技选项。它功能丰富&#xff0c;重量轻&#xff0c;效率优化&#xff0c;而且完全隐私安全&#xff0c;试图满足你在MacOS上使用第三方鼠标的所有需求。 B…

【linux学习指南】linux 环境搭建

文章目录 &#x1f4dd;前言&#x1f320; 云服务器的选择&#x1f320;阿里云&#x1f320;腾讯云&#x1f320;华为云 &#x1f320;使用 XShell 远程登陆到 Linux&#x1f309;下载 XShell &#x1f320;查看 Linux 主机 ip&#x1f309; XShell 下的复制粘贴&#x1f309; …

Java 函数式编程 的基础使用2-BiConsumer

1、创建函数时&#xff0c;确定函数的参数类型和具体操作。 2、使用accept接收函数参数&#xff0c;并执行函数操作。 public class MyBiConsumer {public static void main(String[] args) {BiConsumer<String, Integer> printNameAndAge (param1, param2) -> {Sys…

FIFO Generate IP核使用——异步复位

FIFO Generator IP核提供了一个复位输入&#xff0c;当该输入被激活时&#xff0c;它会复位所有的计数器和输出寄存器。对于块RAM或分布式RAM实现&#xff0c;复位FIFO并不是必需的&#xff0c;可以在FIFO中禁用复位引脚。共有两种复位类型选项&#xff1a;异步复位和同步复位。…

FTP和NFS

一、FTP 1.FTP原理 FTP&#xff08;file Transfer Protocol&#xff0c;文件传输协议&#xff09;&#xff0c;是典型的C/S架构的应用层协议&#xff0c;由客户端软件和服务端软件两个部分共同实现文件传输功能&#xff0c;FTP客户端和服务器之间的连接时可靠的&#xff0c;面…

八股文(C#篇)

C#中的数值类型 堆和栈 值类型的数据被保存在栈&#xff08;stack)上&#xff0c;而引用类型的数据被保存在堆&#xff08;heap&#xff09;上&#xff0c;当值类型作为参数传递给函数时&#xff0c;会将其复制到新的内存空间中&#xff0c;因此在函数中对该值类型的修改不会影…

数据结构===二叉树

文章目录 概要二叉树的概念分类存储遍历前序中序后序 小结 概要 简单写下二叉树都有哪些内容&#xff0c;这篇文章要写什么 二叉树的概念分类&#xff0c;都有哪些二叉树遍历 对一个数据结构&#xff0c;最先入手的都是定义&#xff0c;然后才会有哪些分类&#xff0c;对二叉…