气泡云图片(云的形态、水中气泡内压力分布)

在博客时代,标签云非常流行,相关话题的流行是由一堆不同大小的词来标志的。气泡云图像也有类似的目的,通过气泡的大小来显示相关主题的宏观对比。

泡泡图和泡泡图有很大的区别。气泡图需要三个维度,而气泡图只需要两个变量:主题和对应于主题的数值。

这里有一个泡泡云图的例子,用来展示某个部门员工的表现(感觉直观吗!):

使用D3制作专业的”气泡云图”

常用的电子艺术和高级图表不提供这种图表展示形式(或者我没有找到它?).

这张图表是用D3制作的,它被称为数据驱动文档。D3是一个提供数据可视化的Javascript库。它实际上并不呈现图表,而只是将数据与页面元素连接起来。

让我们看看如何实现它:

1.首先定义一个html页面

d3库需要在页面中引用,直接添加到这里的标题中。

html

脚本src=\’ https://d3js . org/D3 . v3 . min . js \’ type=\’ text/JavaScript \’/script

/head

身体

h1D3气泡图/h1

节id=\’ graph \’/节

/body

/html

2.接下来是关键部分

通过调用d3 API将测试数据绘制成图表,并在这里尽可能多地记下细节点。

(函数(){

//对于要显示的数据,名称是主题名称,类名是气泡样式,大小将用于气泡大小。

var DataSet=[];

数据集.推送({名称:\’张三\’,类别名称:\’项目0 \’,大小:2540 });

数据集。推送({名称:\’李思\’,类别名称:\’项目1 \’,大小:1234 });

数据集.推送({名称:\’王武\’,类别名称:\’项目2 \’,大小:456 });

数据集。推送({名称:\’猴六\’,类别名称:\’项目3 \’,大小:200 });

数据集.推({姓名:\’姓赵,班级名称:\’其他\’,规模:980 });

//沿着层次结构向下加载数据包

var JSON={ children :数据集}

//图形区域的大小

可变直径=600;

//在id=图形的部分中创建SVG区域

var svg=d3.select(\’#graph \’)。追加(\’ svg \’)。attr(宽度、直径)。attr(高度、直径);

//使用递归循环包生成分层布局。建议取消排序注释并查看一下

var bubble=d3.layout.pack()。尺寸([直径,直径])。值(函数(d)){返回d . size;})

//。排序(函数(a,b) {

//返回值-(a.value – b.value)

//})。填料(3);

//计算包布局并返回节点数组

var nodes=bubble.nodes(json)。过滤器(功能(d) {

回来。d .儿童;

});

//绑定气泡元素和数据

var vis=svg.selectAll(\’g \’)。数据(节点);

//定义气泡

var node=vis.enter()。附加(\’ g \’)。attr(“类”,“节点”)。attr(\’transform \’),函数(d) { return \’translate(\’ d.x \’,\’ d . y \’)\’;});

//绘制气泡(圆)

node.append(\’circle \’)。attr(\’r \’,函数(d){ return d . r;})//圆的半径。attr(\’class \’),函数(d) {返回d.className});//圆形的颜色

//将文本设置在气泡(圆圈)上

node.append(\’text \’)

下面的文字。选择全部(“平移”)//文本用平移包裹,在这里将创建两个。数据(函数(d)){返回[d.name,d . size];})//文本下两行文本数据:主题名称和数据大小。输入()。追加(\’ tspan\’) //这里将创建两个tspan。attr(\’x \’,函数(d,i) {//文本的水平位置,它主要表示当前的tspan文本内容

if(isNaN(d)){

返回0-(d . length/2)* 12;

}其他{

返回0-(d.toString()。长度/2)* 6;//数字字符的宽度较短

{}

})。attr(\’y \’,函数(d,i) {//文本的垂直位置,其中I表示平移

返回8i * 18;

})。文本(函数(d) {返回d;});//文本内容

//鼠标悬停显示

node.append(\’title \’)。文本(函数(d) {返回d . name \’ \\ n \’ d . size;});

})();

这里使用了一些静态测试数据,因此您可以根据自己的需求修改数据集。

类名项在数据中定义,主要用于定义气泡的颜色。对于动态数据,尤其是当数据量难以预测时,可以使用动态计算颜色值的方法,或者从一组颜色值中循环随机选择。

绘制气泡还可以添加直接设置气泡颜色的脚本,例如:

//绘制气泡(圆)

node.append(\’circle \’)。attr(\’r \’,函数(d){ return d . r;})//圆的半径。样式(“填充”,函数(d){ return“# aabbcc”;});//圆形的颜色

了解相关脚本,它仍然非常简单易用。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注