《数据可视化》之小白学习篇（一）

最新推荐文章于 2024-08-07 11:11:57 发布
最新推荐文章于 2024-08-07 11:11:57 发布
阅读量623 收藏 1
点赞数
分类专栏： 数据可视化 文章标签： 可视化 二叉树 js 数据可视化 svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43705507/article/details/117266972
版权

本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。

文章目录


前言

本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。

一、为什么要数据可视化？

引用知乎的一段话来展开：

（1）我们利用视觉获取的信息量，远远比别的感官要多的多。
（2）它能够帮助分析的人对数据有更全面的认识。
（3）人类大脑在记忆能力的限制。

数据可视化的根本目的就是教会我们如何去分析一段数据，并让非专业的人士也能了解到这段数据所要表达的意思，且可以从数据中挖掘出更多有用的信息。

二、数据可视化基础篇

1.Javascript实现直方图绘制

（1）实现案例之前，我们先了解一些基本语法。

我们主要实现的是JS+CSS+SVG互操作。因此，需要了解一些有关于他们的语法。
因此有以下网址可供学习：W3school

（2）我们以红楼梦人气排行为例，来比较某个网络平台对于红楼梦人物喜欢人次。

1、投票网址：红楼梦人气排行

2、前20名如下：
红楼梦人气投票

(3)代码如下：

<html>
	<head>
		<title>JavaScript直方图
		</title>
	</head>
	<body>红楼梦中人气排行前十的人物
		<svg id="svg01" width="450" height="700" version="1.1">
			<!--
			<rect x=20 y=20 width=100 height=300 fill="blue"/>
			-->
		</svg>
		<script>
			var w = window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;
			var h = window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight; 
			w=w*0.98;
			h=h*0.98;
			var svg=document.getElementById("svg01");
			svg.setAttribute("width",w);
			svg.setAttribute("height",h);
			var rec=new Array();
			var txt = new Array();
			var rec_h=new Array();
			var rec_txt=new Array();
			
			
			rec_h=[6711,5863,4813,3593,3543,3483,3327,3215,3273,3234];
			rec_txt=['林黛玉','薛宝钗','紫鹃','香菱','北静王水溶','秦可卿','史湘云','贾政','袭人·','贾惜春'];
			var rec=document.createElement("rect");
			for(var i=0;i<10;i++)
			{
				var col_num1 = Math.floor(Math.random()*255);
				var col_num2 = Math.floor(Math.random()*255);
				var col_num3 = Math.floor(Math.random()*255);
				rec[i]=document.createElement("rect");
				txt[i]=document.createElement("text");         //创建标签text
				svg.appendChild(rec[i]);
				svg.appendChild(txt[i]);
				rec[i].outerHTML="<rect x="+(i*w/10)+" y="+(600-rec_h[i]*0.068)+" width="+(w/20-5)+" height="+(rec_h[i]*0.1)+
				" style='fill:rgb("+col_num1+","+col_num2+","+col_num3+")'/>";
				txt[i].outerHTML="<text x="+(i*w/10+8)+" y="+(600-rec_h[i]*0.068)+">"+Math.floor(rec_h[i])+"</text>";
				
			}
		</script>	
	</body>
</html>

(4)运行结果：
红楼梦人气排行前十的人物

2.JavaScript绘制随机二叉树

（1）相关知识
1、分形二叉树——递归实现

递归函数

 show(X坐标，Y坐标，长度，衰减系数，角度，迭代次数，绘图区)
 
java实现 
show(double x0,double y0,double length,double rate,double angle,int count,Graphics2D g2)

主要代码：
初值:show(myWidth/2,(int）(myHeight*3/4),200,0.5,-Math.PI/2,14,g2);
绘直线:	起点：x1=x0;    y1=y0;
		终点：x2=(int）(x1+length*Math.cos(angle));
             y2=(int)(y1+lenght*Math.sin(angle));
		     lineL=new Line2D.Double(x1,y1,x2,y2);
		     g2.draw(lineL);
左子树:show(x2,y2,length*rate,0.6,angle-Math.PI/4,count-1,g2);
右子树:show(x2,y2,length*rate,0.6,angle+Math.PI/4,count-1,g2);

（2）代码

<html>
	<head>
		<title>
			标准分形二叉树
		</title>
	</head>
	<body>
		<svg id="mySvg" width=1000 height=800 ></svg>
		<script>
			var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
			var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
			var mysvg = document.getElementById("mySvg");
			mysvg.setAttribute("width",w*0.98);
			mysvg.setAttribute("height",h*0.98);
			
			
			var length=190;       //长度
			
			var rate=0.6;         //衰减率
			var thin=0.86;
			var x0=w/2;           
			var y0=h;
			var count=14;          //迭代次数
			var a=-Math.PI/2;     //角度
			function show(x0,y0,length,thin,a,count,b_width){
				var x1=x0;
				var y1=y0;
				var x2=x1+length*Math.cos(a);
				var y2=y1+length*Math.sin(a);
				svgline= document.createElement("line");
				mysvg.appendChild(svgline);
				b_width=b_width*thin;
				thin=thin*thin;
				var aL=a-Math.PI/5*(0.3+0.6*Math.random());
				var aR=a+Math.PI/6*(0.3+0.6*Math.random());
				
				if(count>1)
				{
					if(count >= 11)
					{
						svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgba(25,0,0,0.5);stroke-width:"+b_width*0.85+"'/>";//树干部分颜色
					}
					else if(count < 13 && count > 5)
					{
						svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgba(90,150,240,0.98);stroke-width:"+b_width+10+"'/>";
					}
					else
					{
						svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgba(90,148,205,0.98);stroke-width:"+b_width+"'/>";
					}
					if(count == 10)
					{
						thin = 0.999999999;
						rate = 0.6;
					}
						
					if(count == 8){
						thin = 0.9999;
						rate = 0.6;
					}
					if(count == 5)
					{
						thin = 0.999;
						rate = 0.799;
					}
					show(x2,y2,length*rate,thin,aL,count-1,b_width);
					show(x2,y2,length*rate,thin,aR,count-1,b_width);
				}
				else
				{
					thin=0.8;
					svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgba(248,100,20,0.98);stroke-width:"+b_width*1.1+"' />";
					if(count>0)
					{
						show(x2,y2,length*rate,thin,aL,count-1,b_width);
						show(x2,y2,length*rate,thin,aR,count-1,b_width);
					}
				}
				
			}
			show(x0/3.5,y0,length/2,thin,a,count,20);
			show(x0*1.3,y0,length/1.2,thin,a,count,30);

		</script>
	</body>
</html>

（3）运行结果
分型二叉树

3.文字二叉树

（1）相关知识

与分形二叉树类似，这里就不再赘述

（2）代码

<html>
	<head>
		<meta charset="utf-8">

		<title>文字二叉树
		</title>
	</head>
	<body bgcolor=#E6E6FA>
		<svg id="svg01" width=800 height=600 >
		</svg>
		<script>
			var w = window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;
			var h = window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight; 
			w=w*0.98;
			h=h*0.98;
			var svg=document.getElementById("svg01");
			svg.setAttribute("width",w);
			svg.setAttribute("height",h);
			
			
			var svg=document.getElementById("svg01");
			svg.setAttribute("width",w);
			svg.setAttribute("height",h);
			
			
			var x0=w/2;
			var y0=h;
			var L=200;
			var rate=0.6;
			var thin=0.9;
			var a=-Math.PI/2;
			var count=8;
			var fontSize=20;
			
			//var1 str=["相见时难别亦难","东风无力百花残","春蚕到死丝方尽","蜡炬成灰泪始干","晓镜但愁云鬓改","夜吟应觉月光寒”，“蓬山此去无多路","青鸟殷勤为探看"];
			var str1="春江潮水连海平";
			
			function show(x0,y0,length1,rate,thin,a,count,fontSize)
			{
				var fontSize=count*2.3;
				var L=str1.length*fontSize;
				var x1=x0;
				var y1=y0;
				var x2=x1+L*Math.cos(a);
				var y2=y1+L*Math.sin(a);
				
				var apple=document.createElement("circle");
				svg.appendChild(apple);
					
				
				var aL=a-Math.PI/6*(0.6+0.4*Math.random());
				var aR=a+Math.PI/5*(0.6+0.4*Math.random());
				
				var wordX=document.createElement("text");
				svg.appendChild(wordX);
				
				if(count>=1)
				{
					if(count==8)
					{
						wordX.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='black' font-size="+fontSize+">清明时节雨纷纷</text>"
					}
					else if(count>=6&&count<8)
					{
						wordX.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='purple' font-size="+fontSize+">路上行人欲断魂</text>"
					}
					else if(count<6&&count>3)
					{
						wordX.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='brown' font-size="+fontSize+">借问酒家何处有</text>"
					}
					else
					{
						wordX.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='green' font-size="+fontSize+">牧童遥指杏花村</text>"
					}
					if(count==2)
					{
						apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+5*Math.random()+" fill='yellow' />"
					}
					if(count==3)
					{
						apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+5*Math.random()+" fill='white' />"
					}
					show(x2,y2,L,rate,thin,aL,count-1,fontSize);
					show(x2,y2,L,rate,thin,aR,count-1,fontSize);
		
				}
				else
				{
					apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+5*Math.random()+" fill='red' />"
					if(count>0)
					{
						show(x2,y2,L,rate,thin,aL,count-1,fontSize);
						show(x2,y2,L,rate,thin,aR,count-1,fontSize);
					}
				
				}
	
			}
			show(x0,y0,L,rate,thin,a,count,fontSize);			
		</script>	
	</body>
</html>

（3）运行结果
文字二叉树

总结

以上就是数据可视化中的基础部分，使用JavaScript画直方图、分形树以及文字树。如果有错误的地方，烦请看到的大佬们指点。

数据可视化 之 小白学习篇（二）

Ame想努力
关注
专栏目录
小白学习微信小程序的数据可视化和图表展示
2401_85258012的博客
06-16 307
其次，我们需要选择一个数据可视化和图表展示的库，例如ECharts、AntV、Chart.js等等。通过ECharts库，我们可以轻松地在小程序中展示各种图表，并通过交互和动画来增强用户体验。数据可视化和图表展示是微信小程序中非常重要的一部分，通过可视化和图表展示，可以直观地展示数据，使用户更容易理解和分析数据。通过以上代码，我们可以在小程序中展示一个柱状图，横坐标为A、B、C等等，纵坐标为10、20、30等等。在这一部分，我们将学习如何在微信小程序中显示一些基本的图表，例如柱状图、折线图和饼图。
[Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解
热门推荐
杨秀璋的专栏
08-24 3万+
前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识，这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法，同时引入Echarts技术，该技术主要应用于网站可视化展示中。本文内容以实例为主，给读者最直观的图形感受。两万字基础文章，希望对您有所帮助。
《数据可视化》之小白学习篇（二）
weixin_43705507的博客
05-26 615
数据可视化 本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。 文章目录数据可视化前言一、为什么要数据可视化？二、数据可视化基础篇1.Javascript实现直方图绘制2.JavaScript绘制随机二叉树3.文字二叉树4.D3绘制直方图与饼图（1）基础知识总结 前言 本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。 一、为什么要数据可视化？ 引用知乎的一段话来展开： （1）我们利用视觉获取的信息量，远
数据可视化学习资料
artemisrj的专栏
04-04 2569
map  of CS http://mocs.cs.arizona.edu/   这个项目把论文的主题
数据科学 - 数据可视化基础
最新发布
qq_51222843的博客
08-07 1207
数据可视化能够将复杂的数据集转化为易于理解的图形、图表或图像。这种直观的表现形式使得人们能够更快地理解数据的分布、趋势、异常值以及数据之间的关系，从而更深入地洞察数据背后的信息。数据可视化在数据分析和决策制定过程中具有不可替代的作用。它不仅能够帮助人们更好地理解数据、识别模式和趋势、增强沟通效果，还能够辅助决策制定、提升数据质量、激发创新思维和提高工作效率。因此，掌握数据可视化技能对于数据分析师、数据科学家以及任何需要处理和分析数据的人员来说都至关重要。
数据可视化学习
qq_43607916的博客
11-27 205
数据可视化学习第二节
小白的网络安全数据可视化笔记（一）
qq_38123831的博客
03-16 3033
小白的网络安全数据可视化笔记网络安全数据可视化网络安全数据可视化综述一、网络安全数据介绍二，数据可视化的研究方向是什么1、网络监控2、异常检测3、特征分析4、关联分析大规模网络安全数据协同可视分析方法研究一、为什么进行协同分析二、数据处理三，可视化设计结束语 网络安全数据可视化 时隔数日，再次动笔写写笔记，这次的笔记是记录毕设的一些所学知识所用，毕设是面向入侵检测的网络拓扑可视化软件，所以这里写写......
小白的数据可视化学习笔记（二）
qq_38123831的博客
02-19 1417
小白的数据可视化学习笔记数据可视化·基础思维导图一、可视化流程模型流水线模型可视化循环模型*回路模型可视分析模型二、数据处理和数据变化*三、可视化编码四、可视化分析 数据可视化·基础 在下本次对于数据可视化的学习主要依据浙江大学的数据可视化13年发表的相关ppt作为主要学习资料，并做此博客和相关思维导图。 思维导图 链接: 数据可视化·基础.（ProcessOn） 一、可视化流程模型 这里除了研...
数据可视化学习（数据可视化基本概念）
weixin_33750452的博客
03-20 6433
本篇文章翻译自数据可视化入门教程 数据可视化（Data Visualization）和信息可视化（Infographics）是两个相近的专业领域名词。 狭义上的数据可视化指的是数据用统计图表方式呈现，而信息可视化则是将非数字的信息进行可视化。 前者用于传递信息，后者用于表现抽象或复杂的概念、技术和信息。 广义上的数据可视化则是数据可视化、信息可视化以及科学可视化等等多个领域的统称。 《数据可...
小白的数据可视化学习笔记（一）
qq_38123831的博客
02-18 1385
小白的数据可视化学习笔记数据可视化·基础篇思维导图一、什么是可视化可视化的作用1、记录信息2、分析推理3、证实假设4、交流思想二、为什么要可视化数据处理能力三、小结引用文献 数据可视化·基础篇 在下本次对于数据可视化的学习主要依据浙江大学的数据可视化13年发表的相关ppt作为主要学习资料，并做此博客和相关思维导图。 思维导图 链接: 数据可视化·大纲.（ProcessOn） 一、什么是可视化 可视...
数据可视化学习记录
qq_32743513的博客
02-14 304
数据可视化学习记录 （1） 指定了一些点后，plot（）会绘制出他认为合理的图形，可以看到，4.0处的值为25，但实际上应该是5.0处的值为25，我们需要为plot函数提供输入值来修正， input_values = [1,2,3,4,5] squares = [1, 4, 9, 16, 25] plt.plot(input_values, squares, linewidth=5) #线粗细 ...
【数据可视化】360度教你如何全面学习可视化——上篇
椰卤工程师的个人博客
11-29 1908
通过视觉感知将数据背后的含义有效地传达给观察者。我们将学习计算机如何使用计算机图形显示信息，以及人类如何在视觉上感知该信息。我们还将研究数据的形式，包括定量和非定量数据，以及它们如何正确映射到可视化元素以被观察者很好地感知。 一、可视化概述 可视化模式， 一般来说，这些对于理解数据可视化很重要。 1、交互式可视化 这是一种用于发现的可视化。通常情况下，是单个使用者，也许一两个合作者可能会加入，但是它基本上是电脑前的一个使用者。 并且绘制数据以试图理解这数据究竟意味着什么。 可以完全控制数据，并且可以更改数据
数据可视化
X_dmword的博客
11-07 1057
数据和文字是抽象的，图形却是具体的，正所谓“能用图就不用表，能用表就不用文字”。好的图形或分析报告，应该直观易懂又不失专业性，数据跃然纸上，分析一语中的。在这里推荐几个作图软件：visio 、Echart、亿图、Tableau、BirdEye、Timeflow等 30种可视化工具了解和下载 https://www.csdn.net/article/2014-04-01/2819076-30-B...
本周的数据可视化学习以及个人最近总结
lqz1999的博客
09-08 2738
新学期的第一周，感觉不太好学的课有好多。。。数据可视化便是其一 以下是我稍微总结的一点上课内容 一.链接：http://www.storagelab.org.cn/zhangdi/ 这篇老师推荐的“张迪的博客”，里面讲述了许多可视化的学习资料总结以及实际案例解析，确实是值得我们去向大佬学习。 二.Dashboard 软件功能 像支持Dashboards的表格软件Spread 通过dashboard...
Python数据可视化入门教程（非常详细）_python 数据展示
m0_59235508的博客
04-09 2709
什么是数据可视化？ 数据可视化是为了使得数据更高效地反应数据情况，便于让读者更高效阅读，通过数据可视化突出数据背后的规律，以此突出数据中的重要因素，如果使用Python做数据可视化，建议学好如下这四个Python数据分析包，分别是：学好以上四个数据分析包，做可视化足够用了，全文较长，建议耐心看完，学习后即可使用Python做数据可视化，具体的代码实操部分可以实际用代码进行演示，这样才能更好的掌握，下面一起来学习~Pandas 是 Python的核心数据分析支持库，提供了快速、灵活、明确的数据结构，旨在简单、
Linux小白入门笔记：常用命令与操作详解
本篇笔记主要针对初学者介绍了Linux基础操作和常用命令，适合"小白"级别的学习者参考。内容涵盖了以下关键知识点： 1. **目录操作**： - `ls`：查看当前目录下的文件和文件夹，`ls -a`用于显示所有文件（包括隐藏...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值