数据可视化课程内容总结
第一章 基于Web的数据可视化基础
层叠样式表CSS
- 内联样式
<h1 style="color:#FFFEA0">定风波·三月七日</h1>
- 内部样式`
<style type="text/css">
h1{color:#37C6C0}
h3{color:#1DB0B8}
h5{color:#00343F}
p{font-family:华文新魏;color:#011935;font-size:24}
</style>`
- 外部样式
<link rel="stylesheet" href="css/ch1-2-1.css" type="text/css" />
- 类和ID选择器
<html>
<head>
<title>
苏轼诗词精选
</title>
<style type="text/css">
body{
background-color:#FDFFDF;
}
hr{
width:60%;
color:#EFCEE8;
}
#poet{
font-family:华文彩云;
color:#E9F01D;
font-size:48px;
}
.poem_title{
font-family:华文行楷;
font-size:28px;
}
</style>
</head>
<body>
<center>
<h1 id="poet">苏轼作品雅集【宋】</h1>
<hr style="width:40%">
<h3 class="poem_title">定风波·三月七日</h3>
</center>
</body>
</html>
SVG矢量图
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250" height="100"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
第二章 基于 JavaScript 和 SVG 的绘图
直方图
<body>
<svg id="mySVG" width="800" height="600" version="1.1" xmlns=""></svg>
<script type="text/javascript">
var mysvg = document.getElementById("mySVG");
var rec= new Array();
for(var i=0;i<6;i++){
rec[i] = document.createElement("rect");
mysvg.appendChild(rec[i]);
var h=Math.random()*300;
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
rec[i].outerHTML="<rect x="+(45*i)+" y="+(400-h)+" width=42 height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";
}
</script>
</body>
递归二叉树
<body>
<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 mysvg = document.getElementById("mySvg");
mysvg.setAttribute("width",w*0.9);
mysvg.setAttribute("height",h*0.9);
var length=200;
rate=0.6;
var x0=w/2;
var y0=h;
var count=7;
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);
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/4;
var aR=a+Math.PI/4;
if(count>0){
show(x2,y2,length*rate,rate,aL,count-1);
show(x2,y2,length*rate,rate,aR,count-1);
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
</script>
</body>
树状词云
<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 mysvg = document.getElementById("mySvg");
mysvg.setAttribute("width",w*0.96);
mysvg.setAttribute("height",h*0.99);
var rate=0.7;
var x0=w/2;
var y0=h;
var count=7;
var str="依依袅袅复青青";
var fontsize=40;
var length=str.length*fontsize;
var iter=0
function show(x0,y0,length,rate,a,count){
iter++;
var x1=x0;
var y1=y0;
fontsize=count*3;
length=str.length*fontsize;
var x2=x1+length*Math.cos(a);
var y2=y1+length*Math.sin(a);
var myText=document.createElement("text");
mysvg.appendChild(myText);
myText.outerHTML="<text id="+iter+" x="+(x1)+" y="+y1+
" style='fill:rgb(0,"+Math.floor(255*Math.random())+",0);font-size:"+(fontsize)+
"' transform='rotate("+(a*180/Math.PI)+","+x1+","+y1+")' >"+str+"</text>";
var aL=a-Math.PI/4*(0.5+0.5*Math.random());
var aR=a+Math.PI/4*(0.5+0.5*Math.random());
if (count<=1){
var myCircle=document.createElement("circle");
mysvg.appendChild(myCircle);
myCircle.outerHTML="<circle cx="+x1+" cy="+y1+" r="+(6*Math.random())+" fill='red'/>"
}
if(count>0){
show(x2,y2,length*rate,rate,aL,count-1);
show(x2,y2,length*rate,rate,aR,count-1);
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
show(x0,y0,length,rate,-Math.PI*7/16,count);
show(x0,y0,length,rate,-Math.PI*9/16,count);
</script>
</body>
第三章 D3数据可视化基础
直方图
<body>
<script src="../d3.v3.min.js" charset="utf-8"></script>
<script>
var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
var color = d3.scale.category10();
var dataset =new Array(10);
for (var i=0;i<dataset.length;i++){
dataset[i]=height*Math.random();
}
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var rectStep =width/dataset.length;
var rectWidth =rectStep-10;
var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d,i){
return i * rectStep;
})
.attr("y", function(d){
return height-d;
})
.attr("fill", function(i){
return color(i);
})
.attr("width",rectWidth)
.attr("height",function(d){
return d;
});
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("fill","green")
.attr("font-size","24px")
.attr("text-anchor","middle")
.attr("x", function(d,i){
return i * rectStep;
})
.attr("y", function(d){
return height-d-26;
})
.attr("dx",rectWidth/2)
.attr("dy","1em")
.text(function(d){
return Math.floor(d);
});
</script>
</body>
饼图
<body>
<script src="../d3.v4.min.js" charset="utf-8"></script>
<script>
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var width = w*0.98;
var height =h*0.96;
var dataset = [["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pie = d3.pie()
.value(function(d){return d[1];});
var piedata = pie(dataset);
var outerRadius = 150;
var innerRadius = 100;
var arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (height/2) +")");
arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",function(d){
return arc(d);
});
</script>
</body>
力导向布局
<body>
<script src="../d3.v3.min.js"></script>
<script>
var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(200)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("a.json", function(error, graph) {
console.log(graph);
force.nodes(graph.nodes)
.links(graph.links)
.start();
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 16)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>