flex 中不使用flex
In a world increasingly driven by data, it’s easy to find yourself overwhelmed by information. The more we have the less intelligible it becomes, until eventually it’s all just numbers. Data visualization is the art of rendering information usable: helping the viewer discern trends, patterns, and pertinent facts at a glance, without needing a degree in statistics.
在数据驱动的世界中,很容易发现自己不知所措。 我们越了解它,就越难理解,直到最终这一切都只是数字。 数据可视化是使信息可用的一种艺术:无需查看统计知识,即可帮助浏览者一目了然地识别趋势,模式和相关事实。
In this series of tutorials, we’ll look at how you can use the Flex platform to visualize your data and make it both clear and appealing to your audience. The series assumes basic familiarity with Flex and the Flex Builder environment.
在这一系列教程中,我们将研究如何使用Flex平台来可视化数据,并使数据既清晰又吸引观众。 本系列假定基本熟悉Flex和Flex Builder环境。
Before we start, you should download the sample project as a Flex Builder archive.
在开始之前,您应该将示例项目下载为Flex Builder存档。
We’ve got another Article Quiz for you this week—this time sponsored by Adobe—so once you’ve read through the article be sure to test yourself!
本周,我们为您提供了另一个文章测验 -这次由Adobe赞助-因此,一旦您阅读了这篇文章,请务必进行自我测试!
An effective visualization can be as simple as a bar graph. Take, for example, the following data set showing unique monthly visits to a web site:
有效的可视化可以像条形图一样简单。 以以下数据集为例,该数据集显示了该网站每月的唯一访问量:
Table 1. Unique visits to a web site, broken down by month
表1.网站的唯一身份访问,按月细分
MonthUnique VisitsJan12,231Feb11,989Mar12,108Apr13,400May13,626Jun15,455Jul20,742Aug22,345Sep23,425Oct20,123Nov18,332Dec14,255 月 不重复造访 一月 12,231 二月 11,989 三月 12,108 四月 13,400 可能 13,626 君 15,455 七月 20,742 八月 22,345 九月 23,425 十月 20,123 十一月 18,332 十二月 14,255This view is quite dull, and unless you read carefully through it all, nothing really jumps out at you. We can, however, represent the same series of data points in a graph.
这种观点相当呆板,除非您仔细阅读所有内容,否则您什么都不会跳出来。 但是,我们可以在图中表示相同系列的数据点。
Figure 1. The same data, presented as a line graph
图1.相同的数据,以折线图显示
We can see at a glance that there’s a peak in the traffic—it builds significantly over a few months and then tails off. Immediately we witness a benefit from data visualization: being able to easily spot a trend. Now this might be meaningless by itself, but if we analyze it alongside some other information—such as news coverage of a certain event, or what features were released on our web site—we can link the two occurrences together, establishing that whatever we were doing at that time was what increased the traffic. When the web site ceased running that feature or removed a functionality, the traffic dropped off—so we know that’s the sort of content or feature that people are drawn to and we should do more of it.
我们一眼就可以看到流量高峰,它在几个月内Swift增加,然后逐渐减少。 立刻,我们看到了数据可视化的好处:能够轻松发现趋势。 现在,这本身可能没有任何意义,但是如果我们将其与其他信息(例如某个事件的新闻报道或网站上发布的功能)一起进行分析,则可以将这两个事件链接在一起,从而确定我们当时要做的就是增加流量。 当网站停止运行该功能或删除某个功能时,流量下降了,因此我们知道这就是人们所吸引的那种内容或功能,我们应该做更多的事情。
Even in this very simple example we can see how important visualization can be. When you begin to look at more complex data sets, however, the value increases significantly.
即使在这个非常简单的示例中,我们也可以看到可视化的重要性。 但是,当您开始查看更复杂的数据集时,该值将显着增加。
For this tutorial, we’ll use data from the SitePoint Forums to analyze the usage frequency of certain technology keywords in users’ posts, and try to ascertain any relationships between them. The Forums have been around for a while and are very popular, so we have an enormous data set to work with. Simply reading through it would take forever, providing us with little or no useful information, so our first task is to generate a useful data set.
在本教程中,我们将使用SitePoint论坛中的数据来分析用户帖子中某些技术关键字的使用频率,并尝试确定它们之间的任何关系。 这些论坛已经存在了一段时间,并且非常受欢迎,因此我们可以使用大量的数据集。 简单地阅读它会花费很多时间,几乎无法为我们提供有用的信息,因此我们的首要任务是生成有用的数据集。
Before diving into the data, though, it’s a good idea to consider what it is we want to visualize. In this case, I’ve decided to examine how often different technologies are discussed in the forums, and how those technologies are related. In order to do this, I’ll look at how many times certain keywords are mentioned, and which other keywords tend to be found in these same threads.
不过,在深入研究数据之前,最好考虑一下我们要可视化的内容。 在这种情况下,我决定研究论坛中讨论不同技术的频率以及这些技术之间的关系。 为了做到这一点,我将看看提到某些关键字的次数,以及在这些相同的线程中倾向于找到哪些其他关键字。
I’ve written a quick and dirty PHP script that extracts the data from the database and writes it out to a file as a JSON object. The structure of the JSON file produced will look like this:
我编写了一个快速且肮脏PHP脚本,该脚本从数据库中提取数据并将其作为JSON对象写到文件中。 生成的JSON文件的结构如下所示:
{ "keyword":"ajax", "count":12479, "links": { "flash":441, "php":1900, "javascript":2304, "flex":102, "adobe":61, "microsoft":123, "asp":473, ".net":180, "dotnet":1, "css":508, "xml":1184, "html":940, "mysql":369, "macromedia":18, "jsp":29, "ruby":160, "xhtml":223, "dhtml":114, "coldfusion":76, "air":16, "postgres":14, "actionscript":24, "stylesheet":39, "cgi":18, "silverlight":15, "groovy":2 }}The count represents the number of times the keyword (in this example, “flex”) is mentioned in the forums. The link values are the number of threads containing both that keyword and each other keyword. So, for example, in the above data set, we can see that the word “ajax” was used 12,479 times, and that there are 2,304 threads containing both of the words “ajax” and “javascript.”
count表示在论坛中提及关键字(在此示例中为“ flex”)的次数。 link值是同时包含该关键字和彼此的关键字的线程数。 因此,例如,在以上数据集中,我们可以看到单词“ ajax”被使用了12479次,并且有2304个线程同时包含单词“ ajax”和“ javascript”。
I’ll go over the PHP script briefly, as it’s beyond the focus of the article. The important point to realize is we’re extracting some specific data from our database to pass on to our Flex application. The kind of script you’d use here would vary depending on what kind of data you wanted to visualize.
我将简要介绍一下PHP脚本,因为它超出了本文的重点。 要意识到的重要一点是,我们正在从数据库中提取一些特定数据,然后传递给我们的Flex应用程序。 您在此处使用的脚本类型将取决于您要可视化的数据类型。
The first step in our script is to define an array of keywords, and another array to hold the frequencies and links we find in the posts:
脚本的第一步是定义一个关键字数组,另一个数组用于保存我们在帖子中找到的频率和链接:
// populate an array of keywords to search for, with counts and link arrays$keys = array('ajax','coldfusion','flash','flex','air','adobe','macromedia','microsoft','php','ruby','groovy','asp','.net','dotnet','actionscript','javascript','dhtml','jsp','cgi','css','stylesheet','silverlight','mysql','postgres','xhtml','xml','html');$keyFreqs = array();foreach ($keys as $key) { $keyFreqs[$key] = array("count" => 0, "links" => array());}We then connect to the database, loop through each thread and each post inside that thread, scanning for our keywords and adding to our $keyFreqs array as we go. Finally, we flatten the array to make it easier to access in Flex and save it to a file in JSON format:
然后,我们连接到数据库,遍历每个线程和该线程内的每个帖子,扫描关键字并在添加时添加到$keyFreqs数组中。 最后,我们将数组展平以使其更易于在Flex中访问并将其保存为JSON格式的文件:
// Connect to the database$link = mysqli_connect('localhost', 'root', 'root');if (!mysqli_select_db($link, 'forum')) { print 'Unable to select database';}// loop through the threads and their posts$threads = mysqli_query($link, 'SELECT threadid FROM thread ORDER BY dateline LIMIT 100000;');while ($thread = mysqli_fetch_array($threads)) { $posts = mysqli_query($link, "SELECT postid, pagetext FROM post WHERE threadid=" . $row['threadid']); while ($post = mysqli_fetch_array($posts)) { $tempKeys = array(); // loop over the list of keywords foreach ($keys as $key) { // search for the key in the post $pattern = "/ " . $key . "[^a-zA-Z0-9]*/i"; $tempCount = preg_match_all($pattern, $post['pagetext'], $matches); //if we found one or more matches, add the key to a temporary list if ($tempCount > 0) { $tempKeys[] = $key; } // increment the global count for that keyword $keyFreqs[$key]["count"] += $tempCount; } // loop over the list of keywords we found a count for // and increment the link between them foreach ($tempKeys as $a) { foreach ($tempKeys as $b) { if ($a != $b) { if (isset($keyFreqs[$a]["links"][$b])) { $keyFreqs[$a]["links"][$b] += 1; } else { $keyFreqs[$a]["links"][$b] = 0; } } } } }}// Flatten the array and write it out to a file in JSON format$newArray = array();foreach($keyFreqs as $keyword => $value) { $newArray[] = array("keyword" => $keyword, "count" => $value['count'], "links" => $value["links"]);}$fh = fopen('json_data.txt','w');fwrite($fh,json_encode($newArray));翻译自: https://www.sitepoint.com/flex-data-visualization-part-1/
flex 中不使用flex