数据可视化,第 1 部分: 使用 SVG 和 D3 可视化浏览指标

这个由两部分组成的文章系列将演示有助于从数据中提取有业务价值的信息的可视化技术 ,本文是这个系列的第一部分。您将看到如何使用可缩放矢量图形 (SVG) 和开源 D3         JavaScript 库创建可通过浏览器查看的可视化表示,通过形状和颜 色来传达信息。我将通过一些可视化浏览指标(与社交媒体使用相关)的示例来演示这些技 术。第 1 部分概述 了 SVG 和        D3 如何协同工作,还提供了 一些基本示例。第 2 部分        将会更深入地剖析这个强大的开放 标准技术组合的可视化功能。

分析社交媒体指标

 

社交媒体大数据挑战

社交媒体站点(比如 Twitter、Facebook 和 YouTube)提供了全面的 Web 服务接口来公开它们的功能。例如,YouTube Data API           支持应用程序将视频上传到 YouTube,或播放一个网站上现 有的 YouTube 视频。现在这些站点也在开发分析 API。举例而言,YouTube Analytics API           向编程客户端提供了查看次数和喜欢次数(number of           likes)等统计数据。结果,更多的业务应用程序 可通过可视和编程接口与社交媒体互动。对所有规模的公司而言,下一个挑战是通过大数据 分析将大量社交数据最有效地应用到业务中。数据可视化(整个分析场景中的一个组成部分 )是这个文章系列的关注重点。您可了解          IBM 大数据 平台的 IBM             InfoSphere Streams和 IBM InfoSphere             BigInsights产品全面的分析功 能。

 

公司理解客户行为的一种创造性方式是,通过社交媒体提出想法,并让 潜在客户参与到交互式讨论中。社交媒体上的互动反映了双向的人际互动:要理解人们的好 恶,您必须聆听他们在说什么,就像您希望与积极主动的人互动一样。

以一家家庭装 饰公司为假设场景,该公司以博客、视频、Facebook 页面和论坛形式发布公开内容。这些内 容通过社交媒体资源展示了公司的想法,并尝试发起讨论和其他形式的用户互动。这些内容 迎合各个客户的口味和偏好,帮助他们从一个社交资源导航到另一个。为了判断不断变化的 客户趋势并提出新方法和新设计,公司希望从三个方面分析浏览数据:

流行度,由每个社交资源的 查看次数表示

参与该资源上的 互动的用户数量

用户从一个资源 导航到另一个资源的方向

表 1、2和 3        分别显示了三周内用户查看、用户互动和导 航次数。请注意,这些表使用了彩色名称来表示公司使用的社交媒体资源类型(比如博客和 Facebook 页面)。

表 1 显示了每个资源的用户查看次数:

从 表 3可以看到 ,在第 1 周有 3,057         名用户在访问蓝色资源后导航到了金 色资源,而且红色资源收到了来自蓝色资源的最多观众。

浏览数据的 可视化

可视内容提供了一种比数字表格更容易、更快捷的方式来解释大数据量。可 通过多种方式以图形方式表示表 1、2和 3中的数据。例如,图 1 就是一种显示 表 1中的第 1         周数据的简单方式:

图 1. 用圆圈 表示的每种社交资源在第 1 周的查看次数

图 1 将每种资源的查看次数表示为一个圆圈。圆圈的相对大小与它们表示 的次数成正比,所以查看最多的资源(金色)由最大的圆圈表示。每个圆圈还显示了每种资 源第 1 周获得的实际查看次数。

时间: 2024-10-30 18:29:11

数据可视化,第 1 部分: 使用 SVG 和 D3 可视化浏览指标的相关文章

使用SVG和D3来根据社交媒体的浏览指标创建实用的图形

这个由两部分组成的文章系列将演示有助于从数据中提取有业务价值的信息的可视化技术,本文是这个系列的第一部分.您将看到如何使用可缩放矢量图形 (SVG) 和开源 D3 http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript 库创建可通过浏览器查看的可视化表示,通过形状和颜色来传达信息.我将通过一些可视化浏览指标(与社交媒体使用相关)的示例来演示这些技术.第 1 部分概述 了 SVG 和 D3 如何协同工作,还提供了一些基本示

编程-关于 js D3 可视化的一个问题

问题描述 关于 js D3 可视化的一个问题 小弟只是个读研的学生,刚刚接触D3, 有个问题 在这 说不清楚, 希望有经验的前辈不嫌麻烦 加下小弟QQ:3281976376或者wsjeremyxjp@gmil.com联系小弟一下 解决方案 http://open.jb51.net/project/report-chart/d3js.html

《数据整理实践指南》一2.3 可视化

2.3 可视化 我觉得特别有帮助的另一种技术是根据字段值创建直方图.这对于大规模数据集尤其有用,而前面提到的简单的统计方式只能看到数据的表面.直方图是每个值在数据集中出现次数的统计,因此直方图还适用于非数值字段,而统计方法就不适用. 举个例子,假设有个包含推荐关键字的数据集,这些关键字是使用Google.Bing或其他搜索引擎进行搜索的词,使用户能够浏览网站的网页.一个大型网站每天可以通过搜索引擎带来数百万的PV,其中搜索关键字可能有数百万,在一段时间后可能会有数十亿的唯一关键字.对于这些关键字

《D3.js数据可视化实战手册》—— 第1章 D3.js入门指南

第1章 D3.js入门指南 D3.js数据可视化实战手册本章涵盖以下内容: 搭建简易的D3开发环境 搭建基于NPM(Node Packaged Modules是Node.js的套件管理工具)的开发环境 理解D3风格的JavaScript

数据可视化(二) 使用 D3 组件进行布局

了解用于绘制各种排列的组件的图形计算 这个由两部分组成的系列文章的 第 1 部分概述了 SVG 和 D3 的结合使用,提供了创建社交媒体的浏览数据可视化表示的一些基本示例.第 2 部分将介绍在 SVG 图形中使用不同图形组件排列或布局的步骤.您将学习如何使用 D3 强大的图形计算在 SVG 画布上放置组件,以及如何将自己的图形操作与 D3 的布局相结合.我还将探讨如何使用 JavaScript 对象表示法 (JSON) 作为一种可用于可视化的数据格式.本文最后将展示如何使用布局组合在单个 SVG

21款超实用的酷炫「数据可视化工具」

  辛辛苦苦分析一堆大数据,竟然没人看!到底怎么办?俗话说,有图有真相,一图胜千言,取悦了眼球,剩下的都好说.如果你正着手于从数据中洞察出有用信息,那你所需要的正是--数据可视化.本文挖掘了21款炙手可热的数据可视化工具,干净利落的高颜值信息图,就要这样做! 译者微信公众号:特赞Design,欢迎关注唷. FusionCharts FusionCharts Suite XT不仅可以为带给你漂亮的图表,还能帮你制作出生动的动画.巧妙的设计和丰富的交互性.它在PC端.Mac.iPad.iPhone和

盘点:10款最受欢迎数据可视化工具

在数字经济时代,人们需要对大量的数字进行分析,帮助用户更直观的察觉差异,做出判断,减少时间成本.当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世界上的第一张地图,但是,如今利用各种形态的数据可视化图表帮助用户减少分析时间,快速做出决策一直扮演着重要的作用. 世界上的第一张地图(公元前550年)这里给你推荐十款现今最受欢迎的数据可视化工具,供你参考: 1.Tableau Tableau数据可视化工具除了图片美观之外,是否容易上手,海量数据的处理速度等都是考量工具优劣的标准.而Tab

福利:盘点10款最受欢迎数据可视化工具

在数字经济时代,人们需要对大量的数字进行分析,帮助用户更直观的察觉差异,做出判断,减少时间成本.当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世界上的第一张地图,但是,如今利用各种形态的数据可视化图表帮助用户减少分析时间,快速做出决策一直扮演着重要的作用. 世界上的第一张地图(公元前550年) 这里给你推荐十款现今最受欢迎的数据可视化工具,供你参考. 1.Tableau Tableau 数据可视化工具除了图片美观之外,是否容易上手,海量数据的处理速度等都是考量工具优劣的标准.而T

一文读懂数据可视化

数据可视化,是指将相对晦涩的的数据通过可视的.交互的方式进行展示,从而形象.直观地表达数据蕴含的信息和规律. 早期的数据可视化作为咨询机构.金融企业的专业工具,其应用领域较为单一,应用形态较为保守.步入大数据时代,各行各业对数据的重视程度与日俱增,随之而来的是对数据进行一站式整合.挖掘.分析.可视化的需求日益迫切,数据可视化呈现出愈加旺盛的生命力,表现之一就是视觉元素越来越多样,从朴素的柱状图/饼状图/折线图,扩展到地图.气泡图.树图.仪表盘等各式图形.表现之二是可用的开发工具越来越丰富,从专业