前言
数据可视化小组作业整理，包含JSBin实现直方图，D3实现直方图、二叉树、饼状图、力导向图等。
一、JSBin实现直方图
主题：各省人数统计
缺点：未标明各个柱状图的省份名称，没有在图中写入主题。
进行补充后的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各省人数直方图（单位：百万）</title>
</head>
<body>
<svg id="svg01" with=900 height=580>
</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 data=[19.6,12.9,71.8,35.7,24.7,43.7,27.4,38.3,23.0,78.6,54.4,59.5,36.8,44.5,95.7,94.0,57.2,65.7,104.3,4.6,8.6,28.8,80.4,34.7,45.9,3.0,37.3,25.5,5.6,6.3,21.8
];
for(var i=0;i<31;i++)
{
rec[i]=document.createElement("rect");
txt[i]=document.createElement("text");
svg.appendChild(rec[i]);
svg.appendChild(txt[i]);
var rec_h=data[i]*5;
rec[i].outerHTML="<rect x="+(w/31*i)+" y="+(580-rec_h)+" width="+(w/31-10)+" height="+rec_h+" fill='rgb("+rec_h+",233,7)'>";
txt[i].outerHTML="<text x="+(w/31*i-2)+" y="+(580-rec_h)+" fill='rgb(40,133,255)'>"+parseInt(data[i])+"</text>";
}
</script>
</body>
</html>
二、JSBin实现二叉树&文字二叉树
1.二叉树：
代码示例（最基础的二叉树）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二叉树</title>
</head>
<body>
<svg id="svg01" with=2400 height=1000>
</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 x0=w/2;
var y0=h*0.9;
var L=250;
var rate=0.7;
var a=-Math.PI/2;
var count=7;
function show(x0,y0,L,rate,a,count){
var x1=x0;
var y1=y0;
var x2=x1+L*rate*Math.cos(a);
var y2=y1+L*rate*Math.sin(a);
var aL=a-Math.PI/4;
var aR=a+Math.PI/4;
var lineX=document.createElement("line");
svg.appendChild(lineX);
lineX.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke='green'/>";
if(count>0)
{
show(x2,y2,L*rate,rate,aL,count-1);
show(x2,y2,L*rate,rate,aR,count-1);
}
}
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>
2.文字二叉树
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字二叉树</title>
</head>
<body>
<svg id="svg01" with=2400 height=1000>
</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 x0=w/2;
var y0=h;
var L=300;
var rate=0.9;
var a=-Math.PI/2;
var count=8;
var str="数据可视化";
function show(x0,y0,L,rate,a,count){
var fontsize=count*4;
var L=str.length*fontsize;
var x1=x0;
var y1=y0;
var x2=x1+L*rate*Math.cos(a);
var y2=y1+L*rate*Math.sin(a);
//var L=L*rate*(0.5+Math.random()*0.5);
var aL=a-Math.PI/5*(0.5+Math.random()*0.5);
var aR=a+Math.PI/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='rgb(8,204,50)' stroke-width="+(count*0.435)+" />";
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(8,204,50)' font-size="+fontsize*0.8+">"+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(230,"+200*Math.random()+",27)'/>"
}
}
}
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>
三、 D3实现直方图
四、D3实现饼状图
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大众心理认知度调研</title>
<style>
.container {
margin: 1px auto;
width: 1000px;
height: 500px;
}
polyline {
fill: none;
stroke: #000000;
stroke-width: 2px;
stroke-dasharray: 4px;
}
</style>
<style type="text/css">
p{
font-size:15px;
font-weight:900;
}
</style>
</head>
<body>
<h1 align="center">大众心理认知度调研</h1>
<hr width="100%" size="10" color="gray"></hr>
<h3 align="center">大众获取心理知识途径</h3>
<div id="hist"></div>
<hr width="100%"></hr>
<h3 align="center">大众寻求心理帮助途径</h3>
<div class="container">
<svg width="100%" height="100%"></svg>
</div>
<div id="sign"></id>
<script src="http://d3js.org/d3.v3.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;
//获得浏览器窗口的高度和宽度：（不包括工具栏和滚动条）
w=w*0.98;
h=h*0.98;
var width = 1000, height = 500;
//var w=1000,h=500
var svg = d3.select("#hist")
.append("svg")
.attr("width",w)
.attr("height",h*1.5/3);
var index = [0,1,2,3,4,5];
var color = [ '#589BAD'];
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
var dataset1=[96.45,27.79,46.34,26.78,23.62,22.96,5.79];
var text1=["网络平台（微信公众号等）","心理类书籍&期刊杂志","心理类课程&讲座","音视频节目","网络社交圈分享","朋友聊天介绍等","其他"]
var dataset3= [{name:"网络平台（微信公众号等）",value:96.45},
{name:"心理类书籍&期刊杂志",value:27.79},
{name:"心理类课程&讲座",value:46.34},
{name:"音视频节目",value:26.78},
{name:"网络社交圈分享",value:23.62},
{name:"朋友聊天介绍等",value:22.96},
{name:"其他",value:5.79}
];
var min = d3.min(dataset1);
var max = d3.max(dataset1);
var linear = d3.scale.linear()
.domain([min,max])
.range([46.32,771.6]);
var rectHeight = 40;
svg.selectAll("rect")
.data(dataset1)
.enter()
.append("rect")
.attr("x",400)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return linear(d);
})
.attr("height",rectHeight-10)
.attr("fill",function(d,i){
return ordinal(i);
})
.on("mouseover",function(d,i){
d3.select(this)
.attr('opacity', 0.7);
svg.append("text")
.attr("id","value")
.attr("x",w*4/5)
.attr("y",h/3)
.attr("text-anchor","middle")
.attr("font-size",36)
.text(d+"%");
})
.on("mouseout",function(d){
d3.select(this)
.attr('opacity', 1)
d3.select("#value")
.remove()
})
var texts1 = svg.selectAll('text')
.data(text1)
.enter()
.append('text')
.attr('fill', "black")
.text(function(d,i) {
return text1[i]; })
.attr("x",width/6)
.attr("y",function(d,i){
return i*rectHeight+20;
})
// 创建一个分组用来组合要画的图表元素
var main = d3.select('.container svg').append('g')
.classed('main', true)
.attr('transform', "translate(" + width/2 + ',' + height/2 + ')');
// 数据193.03
var dataset = [
{name:"其他",value:4.305},
{name:"上网查相关资料",value:30.658},
{name:"阅读心理专业书籍",value:25.089},
{name:"找专业心理咨询师",value:14.583},
{name:"去医院就诊",value:11.982},
{name:"不需要专业资源",value:7.962},
{name:"拨打咨询热线",value:5.421}
];
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;});
var pieData = pie(dataset);
// 创建计算弧形路径的函数
var radius = 200;
var arc = d3.svg.arc()
.innerRadius(110)
.outerRadius(radius);
var outerArc = d3.svg.arc()
.innerRadius(1.2 * radius)
.outerRadius(1.2 * radius);
var oArc = d3.svg.arc()
.innerRadius(1.1 * radius)
.outerRadius(1.1 * radius);
var slices = main.append('g').attr('class', 'slices');
var lines = main.append('g').attr('class', 'lines');
var labels = main.append('g').attr('class', 'labels');
// 添加弧形元素（g中的path）
var arcs = slices.selectAll('g')
.data(pieData)
.enter()
.append('path')
.attr('fill', function(d, i) {
return getColor(i); })
.attr('d', function(d){
return arc(d); })
.on("mouseover",function(d){
d3.select(this)
.attr('opacity', 0.7);
slices.append("text")
.attr("id","value")
.attr("x",8)
.attr("y",10)
.attr("text-anchor","middle")
.attr("font-size",36)
.text(d.value+"%");
}
)
.on("mouseout",function(d){
d3.select(this)
.attr('opacity', 1);
d3.select("#value")
.remove();
});
// 添加文字标签
var texts = labels.selectAll('text')
.data(pieData)
.enter()
.append('text')
.attr('dy', '0.2em')
.attr('fill', function(d, i) {
return getColor(i); })
.text(function(d, i) {
return d.data.name; })
.style('text-anchor', function(d, i) {
return midAngel(d)<Math.PI ? 'start' : 'end'; })
.attr('transform', function(d, i) {
// 找出外弧形的中心点
var pos = outerArc.centroid(d);
// 改变文字标识的x坐标
pos[0] = radius * (midAngel(d)<Math.PI ? 1.5 : -1.5);
return 'translate(' + pos + ')'; })
.style('opacity', 1);
var polylines = lines.selectAll('polyline')
.data(pieData)
.enter()
.append('polyline')
.attr('points', function(d) {
return [arc.centroid(d), arc.centroid(d), arc.centroid(d)];
})
.attr('points', function(d) {
var pos = outerArc.centroid(d);
pos[0] = radius * (midAngel(d)<Math.PI ? 1.5 : -1.5);
return [oArc.centroid(d), outerArc.centroid(d), pos];
})
.style('opacity', 0.3);
function midAngel(d) {
return d.startAngle + (d.endAngle - d.startAngle)/2;
}
function getColor(idx) {
var palette = [
'#ee9ca7','#F7816E', '#F9CE8C','#edf98c', '#C3E3E5', '#589BAD', '#CC5959'
]
return palette[idx % palette.length];
}
</script>
<p align="center" style="font-family:verdana;color:black">数据来源：简单心理和果壳共同发起的《2020大众心理健康认知度调研问卷》</p>
<hr width="100%" size="10" color="gray"></hr>
<p>结论：<br> 大众对自身的心理健康还比较关注，会通过多种途径来了解心理知识，其中通过网络获取相关知识的比重最大。而且在出现心理问题时，大众还是更倾向于通过互联网寻求帮助，而非专业咨询。</p>
</body>
</html>
五、力导向图
扫一扫
877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
