中国39所985高校省级行政区分布-web数据可视化(d3.pack包含关系图)

1、先看效果。

哔哩哔哩在线解读演示：

中国39所985高校省级行政区分布-web数据可视化-000003_哔哩哔哩_bilibili

中国39所985高校省级行政区分布-web数据可视化-000003

截图：

2、数据及可视化含义。

哈喽，大家好，今天给大家带来的这个数据可视化动图展示的是我国39所985高校在各省级行政区的分布情况。在视频中这些虚线围成的较大圆圈表示的是各个省级行政区，里面的小圆圈表示的是该省市里的985院校。

通过此可视化图我们可以看出北京拥有8所985院校，排名第一；上海拥有4所985院校，紧随其后；而陕西、湖南则以拥有3所985院校，位居第三；江苏、山东、四川、天津、湖北、辽宁和广东各拥有2所，排名第四；其余省市各拥有一所985院校，以动态气泡图的形式展示了各省中985高校的数量以及名称。

3、代码分析及讲解。

<!DOCTYPE html>
<meta charset="utf-8">
<style>body{text-align:center}#bubbles{width: 100%;height: 100vh;}h2{position: absolute;width: 100%;text-align: center;}#bubbles{margin:0 auto;}
</style>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.6/d3.min.js"></script>
<h2>中国39所985高校省级行政区分布</h2>
<div id="bubbles">
</div>
<script>//真实的数据var monidata = {"name": "root","children": [{"name": "北京","count": 8,"maxchild": 1,"child": [{"name": "北京大学","count": 1},{"name": "清华大学","count": 1},{"name": "中国人民大学","count": 1},{"name": "北京航空航天大学","count": 1},{"name": "北京理工大学","count": 1},{"name": "中国农业大学","count": 1},{"name": "北京师范大学","count": 1},{"name": "中央民族大学","count": 1}]},{"name": "上海","count": 4,"maxchild": 1,"child": [{"name": "复旦大学","count": 1,},{"name": "同济大学","count": 1,},{"name": "上海交通大学","count": 1,},{"name": "华东师范大学","count": 1,}]},{"name": "湖南","count": 3,"maxchild": 1,"child": [{"name": "湖南大学","count": 1,},{"name": "中南大学","count": 1,},{"name": "国防科技大学","count": 1,}]},{"name": "陕西","count": 3,"maxchild": 1,"child": [{"name": "西安交通大学","count": 1,},{"name": "西北工业大学","count": 1,},{"name": "西北农林科技大学","count": 1,}]},{"name": "天津","count": 2,"maxchild": 1,"child": [{"name": "南开大学","count": 1,},{"name": "天津大学","count": 1,}]},{"name": "辽宁","count": 2,"maxchild": 1,"child": [{"name": "大连理工大学","count": 1,},{"name": "东北大学","count": 1,}]},{"name": "江苏","count": 2,"maxchild": 1,"child": [{"name": "南京大学","count": 1,},{"name": "东南大学","count": 1,}]},{"name": "山东","count": 2,"maxchild": 1,"child": [{"name": "山东大学","count": 1,},{"name": "中国海洋大学","count": 1,}]},{"name": "湖北","count": 2,"maxchild": 1,"child": [{"name": "武汉大学","count": 1,},{"name": "华中科技大学","count": 1,}]},{"name": "广东","count": 2,"maxchild": 1,"child": [{"name": "中山大学","count": 1,},{"name": "华南理工大学","count": 1,}]},{"name": "四川","count": 2,"maxchild": 1,"child": [{"name": "四川大学","count": 1,},{"name": "电子科技大学","count": 1,}]},{"name": "其他省份","count": 7,"maxchild": 1,"child": [{"name": "吉林大学","count": 1,},{"name": "哈尔滨工业大学","count": 1,},{"name": "浙江大学","count": 1,},{"name": "中国科学技术大学","count": 1,},{"name": "厦门大学","count": 1,},{"name": "重庆大学","count": 1,},{"name": "兰州大学","count": 1,},]},]};/** 绘制泡泡* id,绘制泡泡的dom的id* width,绘制泡泡的dom的宽度* height,绘制泡泡的dom的高度* bubblesData,输入的数据，格式同模拟数据一样* 注意，d3的版本是3.5.6,使用v4或者v5的版本的话不能正常显示* */function drawBubbles(width,height,bubblesData,id) {//泡泡的颜色数据var colors = [{pfill: 'rgba(255, 44, 0,0.04)',pstroke: 'rgba(255, 44, 0,0.4)',fill: 'rgba(255, 44, 0,0.1)',stroke: 'rgba(255, 44, 0,1)',},{pfill: 'rgba(23, 0, 255,0.04)',pstroke: 'rgba(23, 0, 255,0.4)',fill: 'rgba(23, 0, 255,0.1)',stroke: 'rgba(23, 0, 255,1)',},{pfill: 'rgba(255, 188, 3,0.04)',pstroke: 'rgba(255, 188, 3,0.4)',fill: 'rgba(255, 188, 3,0.1)',stroke: 'rgba(255, 188, 3,1)',},{pfill: 'rgba(226, 119, 175,0.04)',pstroke: 'rgba(226, 119, 175,0.4)',fill: 'rgba(226, 119, 175,0.1)',stroke: 'rgba(226, 119, 175,1)',},{pfill: 'rgba(35, 15, 192,0.04)',pstroke: 'rgba(35, 15, 192,0.4)',fill: 'rgba(35, 15, 192,0.1)',stroke: 'rgba(35, 15, 192,1)',},{pfill: 'rgba(187, 238, 36,0.04)',pstroke: 'rgba(187, 238, 36,0.4)',fill: 'rgba(187, 238, 36,0.1)',stroke: 'rgba(187, 238, 36,1)',}];//生成随机数，运动泡泡的似一次的位置var random = function(min, max) {if (max == null) {max = min;min = 0;}return min + Math.floor(Math.random() * (max - min + 1));};//全局的r标尺var rmin = 10,rmax = 30;//全局的子泡泡的标尺，使用指数标尺var rScale = d3.scale.pow().exponent(0.5).domain([0, monidata.children[0].maxchild]).rangeRound([rmin, rmax]);//因为参赛者来源的省份人数差异实在太大了，可视化出来不美观，所以对参赛者来源的省份人数进行映射var countArr = [];for(var i = 0;i<bubblesData.children.length;i++){countArr.push(bubblesData.children[i].count);}//所以对参赛者来源的省份人数进行映射var countScale = d3.scale.pow().exponent(0.5).domain(d3.extent(countArr)).rangeRound([d3.extent(countArr)[1]/10, d3.extent(countArr)[1]]);//绘制泡泡的画布尺寸var width = width,height = height;var pack = d3.layout.pack().sort(null).size([width, height]).padding(2);var svg = d3.select("#"+id).append("svg").attr("width", width).attr("height", height).append("g")var node = svg.selectAll(".node").data(pack.nodes(flatten(bubblesData)).filter(function(d) {return !d.children;})).enter().append("g").attr("class", "node").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });node.append("circle").attr("r", function(d) {return d.r*0.8;}).style("fill", function (d,i) {return colors[i%6].pfill;}).style("stroke", function (d,i) {//绘制其对应的子泡泡drawChildBubble(d,i)return colors[i%6].pstroke;}).attr("stroke-width","2").style("stroke-dasharray", '10, 10');node.append("text").text(function(d) { return d.name; }).style("font-size", "12px").style("font-weight", "bold").style("text-anchor", "middle").attr("dy", ".35em");// 返回一个展平的层次结构，其中包含根目录下的所有叶节点。function flatten(root) {var nodes = [];function recurse(node) {if (node.children) node.children.forEach(recurse);else nodes.push({name: node.name, value: countScale(node.count),child:node.child});}recurse(root);return {children: nodes};}//绘制每个大泡泡里边的子泡泡function drawChildBubble(d,index) {//如果子泡泡只有1个，则不显示if(d.child.length == 1){return;}// 初始化var containerWidth;var containerHeight;var container = d3.select('#'+id).select('svg');var svgContainer = container.append('g').attr('width', containerWidth).attr('height', containerHeight)if(d.r < 70){containerWidth = 2*d.r+160;containerHeight = 2*d.r+160;svgContainer.attr("transform", "translate(" + (d.x-d.r-80) + "," + (d.y-d.r-80) + ")")}else if(d.r >= 70 && d.r < 120){containerWidth = 2*d.r+140;containerHeight = 2*d.r+140;svgContainer.attr("transform", "translate(" + (d.x-d.r-70) + "," + (d.y-d.r-70) + ")")}else{containerWidth = 2*d.r+120;containerHeight = 2*d.r+120;svgContainer.attr("transform", "translate(" + (d.x-d.r-60) + "," + (d.y-d.r-60) + ")")}var data = [];var topWordCount = d.child;if(topWordCount.length == 0){return;}//初始化泡泡的位置、半径、颜色、速度for(var i = 0;i < topWordCount.length;i ++){var count = topWordCount[i].count;data.push({text: topWordCount[i].name,category: count,x: random(containerWidth/2 - rmax, containerWidth/2 + rmax),y: random(containerHeight/2 - rmax, containerHeight/2 + rmax),r: rScale(count),fill: colors[index%6].fill,stroke: colors[index%6].stroke,get v() {var d = this;return {x: d.x - d.px || 0, y: d.y - d.py || 0}},set v(v) {var d = this;d.px = d.x - v.x;d.py = d.y - v.y;},get s() {var v = this.v;return Math.sqrt(v.x * v.x + v.y * v.y)},set s(s1){var s0 = this.s, v0 = this.v;if(!v0 || s0 == 0) {var theta = Math.random() * Math.PI * 2;this.v = {x: Math.cos(theta) * s1, y: Math.sin(theta) * s1}} else this.v = {x: v0.x * s1/s0, y: v0.y * s1/s0};},set sx(s) {this.v = {x: s, y: this.v.y}},set sy(s) {this.v = {y: s, x: this.v.x}},});}// 碰撞检测function collide(alpha, s0) {var quadtree = d3.geom.quadtree(data);return function(d) {var drt = d.rt;boundaries(d, drt);var r = drt + rmax,nx1 = d.x - r,nx2 = d.x + r,ny1 = d.y - r,ny2 = d.y + r;quadtree.visit(function(quad, x1, y1, x2, y2) {if (quad.point && (quad.point !== d)) {var x = d.x - quad.point.x,y = d.y - quad.point.y,l = Math.sqrt(x * x + y * y),r = drt + quad.point.rt;if (l < r) {l = (l - r) / l * (1 + alpha);d.x -= x *= l;d.y -= y *= l;quad.point.x += x;quad.point.y += y;}}return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;});};function boundaries(d, _drt) {var moreThanX,moreThanY, v0;//计算是否超出边界function exceed(origin,target,r) {var distance = Math.sqrt(Math.pow((origin[0]-target[0]),2)+Math.pow((origin[1]-target[1]),2));return distance > r?true:false;}//如果超出边界，计算应该放置的位置function place(origin,target,r) {var newPos = [];var angle = Math.atan2((target[1]-origin[1]), (target[0]-origin[0]));newPos[0] = origin[0] + r*Math.cos(angle);newPos[1] = origin[1] + r*Math.sin(angle);return newPos;}var origin = [containerWidth/2,containerHeight/2];var target = [d.x,d.y];var r = containerWidth/2-100;moreThanX = target[0] > origin[0];moreThanY = target[1] > origin[1];//圆形边界if(exceed(origin,target,r)){d.escaped |= 1;// 如果物体在边界之外// 管理其x速度分量的符号，以确保其移回边界//~~它代表双非按位取反运算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，对于正数，它向下取整；对于负数，向上取整；非数字取值为0;if(~~d.v.x) d.sx = d.v.x /** (moreThanX ? -1 : 1)*/;//如果vx太小，则将其引导回else d.sx = (~~Math.abs(d.v.y) || Math.min(s0, 1)*2) * (moreThanX ? -1 : 1);d.x = place(origin,target,r)[0];if(~~d.v.y) d.sy = d.v.y /** (moreThanY ? -1 : 1)*/;else d.sy = (~~Math.abs(d.v.x) || Math.min(s0, 1)*2) * (moreThanY ? -1 : 1);d.y = place(origin,target,r)[1];//清除边界而不影响速度v0 = d.v;//给予速度值d.v = v0;}else {d.escaped &= ~1;}}}//准备布局var force = d3.layout.force().size([containerWidth, containerHeight]).gravity(0.0001).charge(-20).friction(.8)//加载数据force.nodes(data).start();// 创建groupvar node = svgContainer.selectAll('.node').data(data).enter().append('g').attr('class', 'node').call(force.drag);// 创建圆var circles = node.append('circle').classed('circle', true).attr('r', function (d) {return d.r;}).style('fill', function (d) {return d.fill;}).style('stroke', function (d) {return d.stroke;}).style('cursor','pointer').attr("stroke-width","2").each(function(d){// 添加动态获取器var n= d3.select(this);Object.defineProperty(d, "rt", {get: function(){return +n.attr("r")}})});// 创建标签node.append('text').text(function(d) {return d.text}).style({'fill': '#000000','text-anchor': 'middle','font-size': '10px','font-weight': 'bold','text-transform': 'uppercase','font-family': 'Tahoma, Arial, sans-serif',}).attr('x', function (d) {return 0;}).attr('y', function (d) {return 6;})// 使圆运动force.on('tick', function t(e){var s0 = 0.25, k = 0.3;// var a = e.alpha ? e.alpha : force.alpha();var a = 0.002;for ( var i = 0; i < 2; i++) {circles.each(collide(a, s0));}//调节圆的运动速度data.forEach(function reg(d){if(!d.escaped) d.s =  (s0 - d.s * k) / (1 - k);});node.attr("transform", function position(d){return "translate(" + [d.x, d.y] + ")"});force.alpha(0.01);});}}var width = document.getElementById('bubbles').offsetWidthvar height = document.getElementById('bubbles').offsetHeightdrawBubbles(width,height,monidata,"bubbles");
</script>
</body>
</html>

中国39所985高校省级行政区分布-web数据可视化(d3.pack包含关系图)相关推荐

中国举办的世界园艺博览会概览-web数据可视化(d3.js path)
1.先看效果. 哔哩哔哩在线解读演示: 中国举办的世界园艺博览会概览-web数据可视化-000006_哔哩哔哩_bilibili 中国举办的世界园艺博览会概览-web数据可视化-000006 截图: ...
中国近三年上市公司信息统计(主板、创业板、科创板)-web数据可视化(d3.brush-时间选择器)
1.先看效果. 哔哩哔哩在线解读演示: 中国近三年上市公司信息统计(主板.创业板.科创板)-web数据可视化(时间选择器)-000009_哔哩哔哩_bilibili 中国近三年上市公司信息统计(主板. ...
北京理工大学计算机学院男女比例,39所985高校男女比例排名，看看哪些学校比例严重失调！...
39所985高校重排,不过这次不是拼实力,而是拼男女比例.看看哪些学校女生都是稀有动物,哪些学校光棍最多. 第一档,男生比例30%-40%. No.39:中央民族大学:男生比例30% 中央民族大学绝对 ...
中山大学计算机学院选课要求,39所985高校3+1+2选科要求汇总! 报考必看！
原标题:39所985高校"3+1+2"选科要求汇总! 报考必看! 2021年,江苏.福建.河北.辽宁.湖北.湖南.广东.重庆8省市迎来首年"3+1+2"新高考模 ...
全国计算机一级学科点数量,最新数据：39所985高校一级学科博士点数量！
去年,小编曾给大家做过39所985高校的一级学科博士点排名,大家可以点击链接复习一下(39所985高校重新排名,依据一级学科博士点数量).然而,随着时间的不断推移,今年,39所985高校的一级学科博士 ...
四川大学和东北大学计算机科学,39所985高校分档及最强专业盘点
众所周知"985"院校是我国重点支持的一流大学,但这39所大学如何分档,有何优势劣势,有哪些王牌专业,考生和家长在报考时又应该注意些什么呢?小编将这39所"985&quo ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
全国39所985高校名单
序号学校名称所在地加入时间 1 清华大学北京 1998年5月 2 北京大学北京 1998年5月 3 中国科学技术大学安徽 1999年7月 4 南京大学江苏 1999年7月 5 复旦大学 ...
考研二战有多难？985高校，公布这一数据
近日,大连理工大学运载工程与力学学部官网发布一篇文章. 文中提及近年学部考研二战情况:考研一战上线率超过60%,好一些能到65%,剩余的学生中有近80%会选择考研二战. 而那些考研二战的学生中,也会有 ...
seaborn分布数据可视化：直方图|密度图|散点图
系统自带的数据表格(存放在github上https://github.com/mwaskom/seaborn-data),使用时通过sns.load_dataset('表名称')即可,结果为一个Dat ...

中国39所985高校省级行政区分布-web数据可视化(d3.pack包含关系图)

中国39所985高校省级行政区分布-web数据可视化(d3.pack包含关系图)相关推荐

最新文章

热门文章