数据可视化课程内容总结
前言
本文内容是根据中国大学慕课上的数据可视化总结
课程内容从直方图，svg中的二叉树，文字树再到D3中的直方图与饼图，力导向图，最后链接数据库，并将实现前后端分离。
以下是课程目录。本文主要总结一下前面基础部分。
JS可视化
1.直方图
爬取了豆瓣电影前250榜单的信息，建立了数组，通过for循环批量创建rectangle，text，同时认识到矩形的坐标是从左上角开始的。
2. 随机二叉树
学习了随机的应用，以及函数的定义
var mysvg = document.getElementById("wcSvg");
mysvg.setAttribute("width",w*0.9);
mysvg.setAttribute("height",h*0.9);
var length=250;
rate=0.9;
var x0=w/2;
var y0=h;
var count=8
function show(x0,y0,length,rate,a,count){
var x1=x0;
var y1=y0;
var x2=x1+length*Math.cos(a);
var y2=y1+length*Math.sin(a);
length=length*rate*(0.5+Math.random()/2)
svgline= document.createElement("line");
mysvg.appendChild(svgline);
var lineWidth=(count*0.8+Math.random()*0.5)*0.7;
svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgb("+(100+count)+","+(100+count*10)+","+(150+count)+");stroke-width:"+(lineWidth)+"' />";
#分两侧同时进行，并递归的创建枝条
var aL=a-Math.PI/4*(0.5+Math.random()/2)*0.8;
var aR=a+Math.PI/4*(0.5+Math.random()/2)*0.5;
if(count>0){
show(x2,y2,length,rate,aL,count-1);
show(x2,y2,length,rate,aR,count-1);
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
3.文字树
结合了圆、文本、矩形、随机二叉树的一个实验，同时熟悉了定义不同颜色、线条、字体的方法。
var mysvg = document.getElementById("mySvg");
mysvg.setAttribute("width",w*0.9);
mysvg.setAttribute("height",h*0.9);
var str="新年快乐";
var str2="万事如意"
var str3="欢天喜地度佳节"
var str4="张灯结彩迎新春"
//var fontsize=40
//var length=str.length*fontsize;
rate=0.6
var x0=w/2;
var y0=h-100;
var count=7;
function show(x0,y0,length,rate,a,count,str){
var fontsize=count*5
var L=str.length*fontsize
var x1=x0;
var y1=y0;
var x2=x1+(L+3)*Math.cos(a);
var y2=y1+(L+3)*Math.sin(a);
//svgline= document.createElement("line");
//mysvg.appendChild(svgline);
//svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgb(99,99,99);stroke-width:2' />";
var aL=a-Math.PI/6*(1+0.5*Math.random());
var aR=a+Math.PI/6*(1+0.5*Math.random());
var words= document.createElement("text");
mysvg.appendChild(words);
words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='rgb("+100*Math.random()+","+100*Math.random()+","+50*Math.random()+")' font-size="+fontsize+">"+str+"</text>";
if(count>0){
show(x2,y2,L,rate,aL,count-1,str);
show(x2,y2,L,rate,aR,count-1,str2);
if(count==1||count==4)
{var myCircle=document.createElement("circle");
mysvg.appendChild(myCircle);
myCircle.outerHTML="<circle cx="+x1+" cy="+y1+" r="+(10*Math.random())+" fill='red'/>"
}
#左边定义下联
if (count==5&&x1<=600)
{
var Circle1=document.createElement("circle");
mysvg.appendChild(Circle1);
Circle1.outerHTML="<circle cx="+(x1-5)+" cy="+(y1+20)+" r=7 stroke='rgb(255,255,0)'fill='white' stroke-width=3px />"
var rec1=document.createElement("rect");
mysvg.appendChild(rec1);
rec1.outerHTML="<rect x="+(x1-23)+" y="+(y1+30)+" width=35 height="+str3.length*22+" fill='rgba(245,10,10,0.8)'>"
var words2= document.createElement("text");
mysvg.appendChild(words2);
words2.outerHTML="<text x="+(x1-5)+" y="+(y1+45)+" rotate=-90 transform='rotate(90,"+(x1-15)+","+(y1+45)+")' fill='black' font-size=20>"+str3+"</text>";
}
#右边定义上联
if (count==5&&x1>=600)
{
var Circle2=document.createElement("circle");
mysvg.appendChild(Circle2);
Circle2.outerHTML="<circle cx="+(x1-5)+" cy="+(y1+20)+" r=7 stroke='rgb(255,255,0)'fill='white' stroke-width=3px />"
var rec2=document.createElement("rect");
mysvg.appendChild(rec2);
rec2.outerHTML="<rect x="+(x1-23)+" y="+(y1+30)+" width=35 height="+str3.length*22+" fill='rgba(245,10,10,0.8)'>"
var words2= document.createElement("text");
var words3= document.createElement("text");
mysvg.appendChild(words3);
words3.outerHTML="<text x="+(x1-13)+" y="+(y1+50)+" rotate=-90 transform='rotate(90,"+(x1-13)+","+(y1+50)+")' fill='black' font-size=20>"+str4+"</text>";
}
}
}
show(x0,y0,length,rate,-Math.PI/2,count,str);
数据要求有三个原则：
1-最新。近期数据。或者实时数据。
2-完整。整年的数据。连续N年的数据。
3-权威。国家权威官方数据，国家统计局数据、重要学术机构数据，部委数据、国内外知名咨询公司数据，重要文献数据等。
D3可视化
D3是JS的一个可视化的库，使用之前要先提前下载好相应版本的文档，下图所示是v3和v6版本的。min.js是压缩过的js，它体积更小，传输效率更快。
.js文件：
优点： 可读性较好，易于debug和更改.
缺点：体积较大，传输时间长
.min.js文件：
优点：体积较小传输快, 源码防窃
缺点：可读性差
在开始D3之前，我们有必要回顾一下D3这个库的特点。作为目前最流行的Web可视化库D3.JS，D3.JS本身是JavaScript代码实现的可视化API，它不是一种语言，可是封装的比较高级，因此初学者感觉门槛小高。
D3的特点如下（三大坑）：
1-批量数据绑定。有多少数据，绘制多少图形元素，一句话代替了一个循环。所以人家自称是Data Driven Document吗。
2-布局和绘制分开。布局是计算，绘制才真正去画。布局相当于导演手里的剧本，规定了如何演，但并没有真正开始演戏呢，绘制的时候，我们的演员才上场。
3-匿名函数的大量使用。
1.直方图
同样从直方图开始，不同的是，D3可以批量绑定数据。
var dataset=[301.37,548.63,612.4,494.7,419.6,434.9,372.8,513.1]
var dataset2= new Array(dataset.length)
var tex=["3.24","3.25","3.26","3.27","3.28","3.29","3.30","3.31"]
for (var i=0;i<dataset.length;i++)
{
dataset2[i]=dataset[i]/4;
}
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
svg.selectAll("rect")
.data(dataset2)
.enter()
.append("rect")
.attr("x",function(d,i)
{return 50+i*(w/dataset.length)*0.8;})
.attr("y",function(d)
{return h-d*3-20;})
//.attr("fill",function(d,i){return color(i);})
//.attr("fill",function(d,i){return rgb(10,10,d*100)})
.attr("width",(w/dataset.length*0.8-10))
.attr("height",function(d)
{return d*3;})
.attr("fill",function(d){return "rgb(150,200,"+(d*1.2)+")"});
svg.selectAll("text.value")
.data(dataset)
.enter()
.append("text")
.attr("fill",function(d){return "rgb(200,200,100)"})
.attr("font-size","15px")
.attr("text-anchor","middle")
.attr("x",function(d,i){return 30+i*(w/dataset.length)*0.8})
.attr("y",function(d){return h-d*0.75-30;})
.attr("dx",(w/dataset.length-10)/2)
.attr("dy","lem")
.text(function(d){return d;})
svg.selectAll("text.date")
.data(tex)
.enter()
.append("text")
.attr("fill","black")
.attr("font-size","20px")
.attr("text-anchor","middle")
.attr("x",function(d,i){return 30+i*(w/dataset.length)*0.8})
.attr("y",function(d){return h;})
.attr("dx",(w/dataset.length-10)/2)
.attr("dy","lem")
.attr("font-family","Microsoft Yahei")
.text(function(d){return (d);})
2.饼图
与数据库技术结合，引进了图例，有了交互性，链接导向下一个页面。
3.力导向图
嵌入了背景图片，有了更多的设计感。
在每次作业中，老师不再不断的提建议，从选题到数据，再到设计。
选题：立足点要高，放眼全国和世界，要做有意义和影响力的作品。
数据要求有三个原则 ：
1-最新。近期数据。或者实时数据。
2-完整。整年的数据。连续N年的数据。
3-权威。国家权威官方数据，国家统计局数据、重要学术机构数据，部委数据、国内外知名咨询公司数据，重要文献数据等。
设计：标题要醒目，要将平时学到东西融会贯通，要注意色彩搭配。
未完待续…
参考资料：http://cuc.yingshinet.com/
扫一扫
1705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
