前言

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

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

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

（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");         //创建标签textsvg.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画直方图、分形树以及文字树。如果有错误的地方，烦请看到的大佬们指点。

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

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

机器学习--Iris数据集的Fisher线性分类以及数据可视化技术的学习
Iris数据集的Fisher线性分类以及数据可视化技术的学习 1.Iris数据集的Fisher线性分类 2.数据可视化技术的学习 1.数据集介绍 2.观看数据前5行 3.特征工程 1.数据清洗 2.数 ...
python画图怎么调色_数据可视化Seaborn从零开始学习教程（二）颜色调控篇
作者:xiaoyu 微信公众号:Python数据科学知乎:python数据分析师 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理绘图风格设置颜色风格设置绘图方 ...
Python数据可视化教程之基础篇
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达开运张 | 作者知乎专栏 | 来源 https://zhuanlan.zhihu.c ...
菜鸟数据分析师对数据可视化的理解—完整篇
感谢关注天善智能,走好数据之路↑↑↑ 欢迎关注天善智能,我们是专注于商业智能BI,大数据,数据分析领域的垂直社区,学习,问答.求职一站式搞定! 本人新人一枚,是个菜鸟数据分析师,统计学专业,接触数据分 ...
python数据查询教程_Python数据可视化教程之基础篇
经过学习之后,我总结了利用python实现可视化的三个步骤: 确定问题,选择图形转换数据,应用函数参数设置,一目了然 1 首先,要知道我们用哪些库来画图? matplotlib python中最基 ...
数据可视化课程_在这个由10部分组成的免费数据可视化课程中学习D3
数据可视化课程 D3.js is a JavaScript library which allows you to bring data to life using HTML, SVG, and CS ...
python matplotlib 地图_Python数据可视化，看这篇就够了
说到python的常见应用,很多人会想到python的数据分析,作为数据分析中的表现层面,数据可视化都是其中必不可少的部分.但本文并非只推荐无任何数据分析需求仅需要做漂亮可视化图表的人学习python ...
利用数据可视化技术来学习钻石鉴别
文章目录数据背景初(粗)看数据数据简单清理数据可视化总结: 数据背景 A data frame with 53940 rows and 10 variables: 这是一个10列53940行 ...
python plt包_Python 数据可视化-Matplotlib包学习笔记（一）
Python 数据可视化本文主要参照Matplotlib的官方教程进行整理,作为个人的学习笔记进行分享,欢迎相互讨论. Matplotlib包学习笔记(一) 本文主要简单介绍一下Matplotlib ...

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

文章目录

前言