文章目录
一、数据可视化
屈华民在《大数据时代的可视化与协同创新》一文中曾说过：
可视化，简要地讲，就是把数据转换为图形图像的方式，帮助人们理解大量的和复杂的数据。
由此可见，数据可视化的本质是分析数据、清晰有效地传达与沟通信息，是十分具有现实意义的。本篇博客简单记录了笔者在数据可视化课程中的学习。
二、Javascript
2.1 JavaScript直方图绘制
（1）代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Percentage of Australian men doing regular physical activity:2010</title>
</head>
<body>
<h2><center>Percentage of Australian men doing regular physical activity:2010</center></h2>
<svg id="mysvg" 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;
var svg=document.getElementById("mysvg");
svg.setAttribute("width",w);
svg.setAttribute("height",h);
var rec=new Array(6);
var txt=new Array(6);
var title=new Array(6);
var height=new Array(52.8,42.2,39.5,43.1,45.1,46.7);
var age=new Array("AGE15-24","AGE25-34","AGE35-44","AGE45-54","AGE55-64","AGE65+");
for(var i=0;i<6;i++){
rec[i]=document.createElement("rect");
svg.appendChild(rec[i]);
txt[i]=document.createElement("text");
svg.appendChild(txt[i]);
title[i]=document.createElement("text");
svg.appendChild(title[i]);
rec[i].outerHTML="<rect x="+(i*w/rec.length)+" y="+(h-height[i]*10)+" width="+(w*0.9/rec.length)+" height="+(height[i]*10)+" fill='rgb(0,0,"+(height[i]*20-750)+")'>";
txt[i].outerHTML="<text x="+(i*w/rec.length)+" y="+(h-height[i]*10)+">"+height[i]+"</text>";
title[i].outerHTML="<text x="+((i*w/rec.length)+50)+" y="+(h-height[i]*10)+">"+age[i]+"</text>";
}
</script>
</body>
</html>
（2）实验结果
（3）总结
这是笔者第一次实现JavaScript直方图的绘制，当时对数据本身的选取并不重视。数据可视化主要是借助于图形化手段，有效地传达与沟通信息，所选取的信息应具有时效性、参考价值。笔者在后面的可视化实现中会更重视数据本身。
2.2 基于JavaScript和SVG的二叉树
（1）代码
<html>
<body>
<h2><center>仿真二叉树</center></h2>
<svg id="mysvg" 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;
var svg=document.getElementById("mysvg");
svg.setAttribute("width",w);
svg.setAttribute("height",h);
w=w*0.98;
h=h*0.98;
var x0=w/2;
var y0=h;
var L=200;
var rate=0.92;
var a=-Math.PI/2;
var count=11;
function show(x0,y0,L,rate,a,count){
var x1=x0;
var y1=y0;
var x2=x1+L*Math.cos(a);
var y2=y1+L*Math.sin(a);
var L=L*rate*(0.5+Math.random()*0.5);
var aL=a-Math.PI/4.5*(0.5+Math.random()*0.5);
var aR=a+Math.PI/4.5*(0.5+Math.random()*0.5);
var lineX=document.createElement("line");
svg.appendChild(lineX);
lineX.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke='green' stroke-width="+count+" />";
if(count>0){
show(x2,y2,L,rate,aL,count-1);
show(x2,y2,L,rate,aR,count-1);
}
}
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>
（2）实验结果
2.3 基于JavaScript和SVG的文字树
（1）代码
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2><center>文字二叉树</center></h2>
<svg id="mysvg" 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;
var svg=document.getElementById("mysvg");
svg.setAttribute("width",w);
svg.setAttribute("height",h);
w=w*0.98;
h=h*0.98;
var str="这是一棵文字树";
var x0=w/2;
var y0=h;
var L=200;
var rate=0.6;
var a=-Math.PI/2;
var count=7;
var fontsize=20;
function show(x0,y0,L,rate,a,count){
var fontsize=count*3;
var L=str.length*fontsize;
var x1=x0;
var y1=y0;
var x2=x1+L*Math.cos(a);
var y2=y1+L*Math.sin(a);
var aL=a-Math.PI/6*(0.5+0.5*Math.random());
var aR=a+Math.PI/6*(0.5+0.5*Math.random());
var words=document.createElement("text");
svg.appendChild(words);
words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='rgb(0,"+(250-count*30)+",0)' font-size="+fontsize+">"+str+"</text>";
if(count>0){
show(x2,y2,L,rate,aL,count-1);
show(x2,y2,L,rate,aR,count-1);
if (count==1){
var apple=document.createElement("circle");
svg.appendChild(apple);
apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+6*Math.random()+" fill='rgb("+(150+100*Math.random())+",0,0)'/>";
}
}
}
show(x0,y0,L,rate,a,count);
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>
（2）实验结果
三、D3
3.1 D3直方图的绘制
（1）代码
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2><center>当前热映电影的豆瓣评分</center></h2>
<script src="d3.v3.min.js"></script>
<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.9;
var dataset=new Array(10);
dataset=[8.8,7.4,6.6,3.7,6.7,8.2,2.8,7.2,8.1,7.4];
var film=new Array(10);
film=["阿凡达","又见奈良","21座桥","合法伴侣","哥斯拉大战金刚","波斯语课","日不落酒店","寻龙传说","你好李焕英","五尺天涯"];
var color = d3.scale.category10();
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d,i){
return (w/dataset.length)*i;
})
.attr("y",function(d){
return h-20-d*50;
})
.attr("width",(w/dataset.length)-10)
.attr("height",function(d){
return 50*d;
})
.attr("fill",function(d,i){
return color(i);
});
svg.selectAll("text.title")
.data(film)
.enter()
.append("text")
.attr("font-size","18px")
.attr("x",function(d,i){
return (w/dataset.length)*i+10;
})
.attr("y",h-20)
.attr("dx",(w/dataset.length)/2-70)
.attr("dy","18px")
.text(function(d){
return d;
});
svg.selectAll("text.value")
.data(dataset)
.enter()
.append("text")
.attr("font-size","18px")
.attr("x",function(d,i){
return (w/dataset.length)*i+10;
})
.attr("y",function(d){
return h-40-d*50;
})
.attr("dx",(w/dataset.length)/2-70)
.attr("dy","18px")
.text(function(d){
return d;
});
</script>
</body>
</html>
（2）实验结果
3.2 饼图和环图的绘制
用D3绘制饼图有两种方法，一种是基于弧度的可视化，一种是基于数据的可视化。
基于弧度的可视化
（1）代码
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="d3.v3.min.js"></script>
<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.9;
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var dataset=[{
startAngle:0,endAngle:1},
{
startAngle:1,endAn
最低0.47元/天 解锁文章
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
