使用 Node.js、Mongo 和 D3 创建一个工具来分析 Twitter 用户信息（6）
|
- UID
- 1066743
|
使用 Node.js、Mongo 和 D3 创建一个工具来分析 Twitter 用户信息（6）
第 5 步. 使用 D3 可视化输出我花了好几小时才得到一个硬编码的应用程序，其中包含我自己的硬编码的 Twitter 身份验证抓取数据。我很快找到了一个 JavaScript 词汇云，很快就看到我的想法的基本应用。
然后发生了一些事情。我无法停止构想如何改进我的应用程序，但我需要一个多功能的可视化库，一个以其他方式（比如图表或饼图）查看该数据的方法。在简单搜索之后，我找到了 。
Jason Davies 创建了 D3 JavaScript Library 的一个 。他提供了一个优秀的示例和描述。经过多次试验后，我了解了如何使用不同颜色替代云中的词汇。（我在寻找词汇云的漂亮的颜色组合，但发现很难找到示例，所以我频繁地试验，尝试获得富有吸引力的组合。）
我创建了一个主题数组并编写一个很小的例程，用该例程在每次绘制一个词汇时从主题中挑选一种颜色。通过试验，我觉得我喜欢一个组合中最多有 5 中补充颜色，我提供了一个小型的 UI 组件来选择一个主题。我希望能够提供一个平面的新闻报纸类型主题作为示例，因为人们可以下载一个云来包含在一个文档中。拥有一种单色调主题很有帮助，但您也可以使用其他颜色。我喜欢之前显示的橙色主题。
对于该数据，我在服务器上编写了 Node.js 代码来收集个人信息，并分析出最常出现的词汇。经过试验，我感觉 70 个词汇在视觉上最适合数据的均衡分布，数量不是很多，不会让人感到压抑。服务器传递回数据并绘制词汇云。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| function draw(data, bounds) {
statusText.style("display", "none");
scale = bounds ? Math.min(
w / Math.abs(bounds[1].x - w / 2),
w / Math.abs(bounds[0].x - w / 2),
h / Math.abs(bounds[1].y - h / 2),
h / Math.abs(bounds[0].y - h / 2)) / 2 : 1;
words = data;
var text = visualisation.selectAll("text")
.data(words, function(d) { return d.text.toLowerCase(); });
text.transition()
.duration(1000)
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
.style("font-size", function(d) { return d.size + "px"; });
text.enter().append("text")
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
.style("font-size", function(d) { return d.size + "px"; })
.on("click", function(d) {
load(d.text);
})
.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
text.style("font-family", function(d) { return d.font; })
.style("fill", customFill)
.text(function(d) { return d.text; });
var exitGroup = background.append("g")
.attr("transform", visualisation.attr("transform"));
var exitGroupNode = exitGroup.node();
text.exit().each(function() {
exitGroupNode.appendChild(this);
});
exitGroup.transition()
.duration(1000)
.style("opacity", 1e-6)
.remove();
visualisation.transition()
.delay(1000)
.duration(750)
.attr("transform", "translate(" + [w >> 1, h >> 1] + ")scale(" + scale + ")");
}
|
结束语我的代码包含许多细节。本文的目的是实现一个可由每个人使用的优秀应用程序。因此，我处理了错误案例；管理着身份验证令牌；支持通过切换来查看一个人关注的用户列表，以及他们的关注者、推文和喜好；在页面加载到电话上时提供响应；并提供其他许多功能。
在本教程中，我着重介绍了一些重要的构建块（包括数据库、身份验证和可视化），为您构建类似的应用程序提供了基础。如果想获得进一步的了解，剩余的细节包含在代码中。
在我的相关文章 中，我使用了我的工具查看了最近的安大略市选举中的选举候选人的个人信息。
社交媒体身份的话题让人着迷。我计划在这项软件试验中构建更多功能并不断将它们添加到该软件中。 |
|
|
|
|
|
