跳到主要内容

创建数据驱动的网站视觉效果

使用Adobe Edge Code和D3.js,本教程将演示如何开始使用HTML自动数据可视化。我们将生成一个圆环图,其数据源自设计委员会的设计行业研究计划。

我将给你一些关于如何使用D3.js开始生成数据可视化的指示。您将从数据创建使用D3生成的SVG图形。我们将看看如何将图表放入HTML布局,同时使图表具有交互性。

01

01我们将从一个饼图示例开始Mbostock的块,D3.js开发人员Mike Bostock的优秀资源提供代码。我在代码示例中找到了一个类似于我正在寻找的图表D3js.org。值得一读的是图书馆的介绍,因为它提供了一些方便的指针。

02

02现在我们将添加一些数据。在这里,我使用的是设计委员会网站的研究部分。这些数字涉及自2009年起在英国自由设计师。第一组数据是“英国自由设计师在哪里?”

03

03我将添加一些自定义颜色删除变量:

color = d3.scale.category20(),

并添加:

//添加自定义颜色
var color = d3.scale.ordinal()
.range([“#EC0677”,“#EA2F91”,“#E25AA1”,“#6b486b”,
“#926593”,“#C793C9”,“#DBC6D2”]);


正如您将看到的圆环图示例仅为“val”数据集提供标签。我想显示“val”和“name”数据。所以我添加了一个新函数来使用以下代码显示名称数据:

//计算位置
var rotate = d3.svg.arc()。innerRadius(r + 0).outerRadius(r + 110);
//为较大的弧添加标签,转换为圆心并旋转。
Arcs.append(“SVG:文本”)
.attr(function(d){return d.endAngle - d.startAngle> .2;})
.attr(“dy”,“。35em”)
.style(“fi ll”,“grey”)
.style(“font”,“normal 10px Arial”)
.attr(“text-anchor”,“middle”)
.attr(“transform”,function(d){return“translate(”+ rotate.centroid(d)+“)rotate(”+ angle(d)+
“)”; })
.text(function(d){return d.data.name;});
//计算弧的标签角度,从弧度转换为度。
功能角度(d){
var a =(d.startAngle + d.endAngle)* 90 / Math.PI - 90;
返回> 90? a - 180:a;
}

04

04在这里,我扩展了我的HTML布局并创建了一个重复的图表,同时复制了我的图表代码。然后使用以下代码将每个图表附加到“div”元素:

var vis = d3.select(“#pie”)。
追加“(SVG:SVG”)


然后我更新了第二张图表上的数据集,以显示英国自由职业者经营的时间:

Var Data = [
{姓名:“不到12个月”,val:11},
{姓名:“1 - 3年”,val:31},
{name:“4-6岁”,val:25},
{name:“7-10岁”,val:14},
{姓名:“11 - 15年”,val:6},
{name:“15 years plus”,val:14}
]。

05

05最后,我为甜甜圈图表的每个部分添加了翻转效果。首先,我们需要在图表中添加一个新变量:

arcOver = d3.svg.arc()。 innerRadius(60).outerRadius(r + 15); //设置Radius

这为悬停效果设置了新的内半径和外半径。接下来,我们必须为甜甜圈细分添加“鼠标悬停”和“鼠标输出”功能。为此,请添加:

.on(“mouseover”,function(d){//调用Mouse Over效果。
D3.select(本)。选择(“路径”)。转移()
.duration(400)
.attr(“d”,arcOver);
})
.on(“mouseout”,function(d){
D3.select(本)。选择(“路径”)。转移()
.duration(600)
.attr(“d”,arc);
});


随意尝试半径值和持续时间值,以实现不同的效果。

发现35个顶级JavaScript的例子在我们的姐妹网站Creative Bloq。



翻译字数超限