本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。
前言
本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。
一、为什么要数据可视化？
引用知乎的一段话来展开：
（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画直方图、分形树以及文字树。如果有错误的地方，烦请看到的大佬们指点。
2687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
