星星博客 »  > 

数据可视化课程

数据可视化课程内容总结

前言

本文内容是根据中国大学慕课上的数据可视化总结
课程内容从直方图,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/

相关文章