Google Git
Sign in
apache / echarts-doc / refs/tags/4.5.0 / . / blog / 2017 / 03 / 15 / echarts-dataAbstraction-tutorial.html
blob: 15253e77c4ba341666a2278a347749a2ea75399a [file] [log] [blame]
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>可视化中的数据 </title>
<meta name="description" content="当下随着大数据热潮的到来，数据可视化作为一个新兴的领域，受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表，各个领域都在越来越多的使用它。既然是数据可视化，说明数据是主体，可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱，一探究竟。">
<meta name="keywords" content="可视化, 教程">
<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="可视化中的数据">
<meta property="og:description" content="当下随着大数据热潮的到来，数据可视化作为一个新兴的领域，受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表，各个领域都在越来越多的使用它。既然是数据可视化，说明数据是主体，可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱，一探究竟。">
<meta property="og:url" content="http://echarts.baidu.com/blog/2017/03/15/echarts-dataAbstraction-tutorial.html">
<meta property="og:site_name" content="">
<link rel="canonical" href="http://echarts.baidu.com/blog/2017/03/15/echarts-dataAbstraction-tutorial.html">
<link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For all browsers -->
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css">
<meta http-equiv="cleartype" content="on">
<!-- Load Modernizr -->
<script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png">
</head>
<body id="post" class="feature">
<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://echarts.baidu.com/index.html" class="navbar-brand">
<img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo">
</a>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li>
<li id="nav-doc" class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/feature.html">特性</a></li>
<li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li>
<li><a href="http://echarts.baidu.com/api.html">API</a></li>
<li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li>
<li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li>
<li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li>
</ul>
</li>
<li id="nav-download" class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/download.html">下载</a></li>
<li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li>
<li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li>
<li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li>
</ul>
</li>
<li id="nav-examples">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li>
<li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li>
</ul>
</li>
<li id="nav-community" class="active">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://gallery.echartsjs.com">GALLERY</a></li>
<li><a href="http://echarts.baidu.com/blog">博客</a></li>
</ul>
</li>
<li id="nav-tool">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li>
<li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li>
<li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li>
</ul>
</li>
<li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li>
<li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li>
<li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li>
</ul>
</div>
</div>
</nav>
<div class="entry-header">
<div class="entry-image">
<img src="http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-dataset.png" alt="可视化中的数据">
</div><!-- /.entry-image -->
</div><!-- /.entry-header -->
<div id="post-main" role="main">
<article class="hentry">
<header class="header-title">
<div class="header-title-wrap">
<h1 class="entry-title">可视化中的数据</h1>
<h2><span class="entry-date date published"><time datetime="2017-03-15T00:00:00+08:00">2017-03-15</time></span></h2>
</div><!-- /.header-title-wrap -->
</header>
<div class="entry-content">
<p>当下随着大数据热潮的到来，数据可视化作为一个新兴的领域，受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表，各个领域都在越来越多的使用它。既然是数据可视化，说明数据是主体，可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱，一探究竟。</p>
<h2 id="可视化什么数据抽象">可视化什么：数据抽象</h2>
<p>既然是数据可视化，无可非议，可视化的元素肯定是数据，这里所指的数据是广义上的数据，包括文本、图片、声音等超媒体数据。ECharts在可视化过程中所涉及的四种基本数据集类型分别是表格数据、网状数据、场数据和几何空间（spatial）数据，像集合、列表等也是常用的数据集类型。这些基本数据集类型又是由不同的数据类组合构成的，这里的数据类是指可视化中所涉及的数据种类，主要包括四种数据类，分别是数据项、数据项的属性、链接（links）、位置。数据项的属性又可分为类别型和有序型两种，其中有序型又进一步细分为序数型和数值型，下面将分别介绍数据类，数据集类型，以及属性类型。</p>
<h3 id="数据类">数据类</h3>
<p>本文主要讨论ECharts中所涉及的四种基本数据类，分别是数据项、数据项的属性、链接、位置。数据项是指一个独立的实体，如关系数据表中的一行，或网络中的一个节点；属性是数据项的某个可被观测的特性，如年龄，性别等；链接是指数据项之间的关系，该数据类型在网状关系型数据集中用的比较多；位置是地理空间数据类型，指代二维或三维空间中的某个具体位置；下图展示了四种不同的数据集类型所包含的数据类。</p>
<p><img src="http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-datatypes.png" alt="data" /></p>
<h3 id="数据集类型">数据集类型</h3>
<p>数据集是指为了分析而收集的任何信息，数据集包括数据表，网状数据，场数据（本文主要关注信息可视化，而场数据主要应用于科学可视化，因而在此不作介绍）以及几何空间数据这四种基本类型，而现实世界中的数据集一般是由这四个基本类型中的一个或多个组合而成的。下图展示了四种不同数据集类型具体的内部结构。</p>
<p><img src="http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-dataset.png" alt="data" /></p>
<h4 id="数据表">数据表</h4>
<p>数据表是常用的数据集形式，由行和列组成。对于简单的扁平表格来说，每一行代表一个数据项，每一列代表一个属性，表格中的每一个单元格是由行号和列号索引的，保存着某个数据项的某个属性值；多维数据表在数据仓库中用的比较多，具有复杂的结构以及复杂的索引机制，一般来说，简单扁平表格至多具有一个键属性（key attribute），而多维表格具有多个键属性。</p>
<h4 id="网状数据">网状数据</h4>
<p>网状数据主要用来表明数据项之间具有某种关系，在网状数据中数据项通常被称为节点，两个节点之间的关系被称为链接，也就是网络中的边，并且节点和链接都可以拥有与之相关联的属性。树是一种具有层次结构的特殊类型网络数据，与一般网络数据相比，树没有回路，每一个子节点都对应唯一的一个父节点。</p>
<h4 id="几何空间spatial数据">几何空间（spatial）数据</h4>
<p>几何空间结构数据通过明确的几何空间位置指定数据项的形状信息，这些数据项可以是空间中的点、一维的直线或曲线、二维的平面或区域，以及三维的立方体。空间数据在不同的度量尺度上具有层级结构。这种层级结构要么是原始数据集固有的，要么是从原始数据集派生出来的。
可视化中的数据主要以两种形式存在，一种是静态的数据文件，一种是动态的数据流。静态的数据文件是指可以同时获得完整的数据文件，而动态的数据流是指数据在不断的更新和变化。</p>
<h3 id="属性类型">属性类型</h3>
<p>属性类型主要分为类别型和有序型两种，有序型又可进一步分为序数型和数值型。有序型数据的排列方向有三种，分别是单向型，有公共零点的双向型，以及环状周期型，如下图所示，除此之外，属性也可能有层级结构。
类别型属性是指名称上的不同，属性的值之间没有明确的排序，例如喜欢的球类运动包括足球、篮球、排球等。虽然类别型属性内部没有明确的排序，但任意外部的排序机制可以被应用在类别型属性上，如将球类运动的名字按字母顺序排列。
有序型属性包括序数型属性和数值型属性，所有有序型属性都有隐含的排列顺序。对于序数型属性，如小中大，虽然我们不能对它进行完全的算术运算，但在属性的内部有明确定义的顺序，如大减去中并不是有意义的概念，但我们知道中介于大和小之间。数值属性与序数属性不同，它具有大小和量级的明确度量，并且支持算术比较，一般以整数和实数形式存在，如76米减去34米是个有意义的数值，并且它们之间的差是可以被度量的，像温度、高度、长度等都是数值属性。
有序型数据可以是单向的有序序列，比如人的年龄，只能往一个方向递增，也可以是有公共零点的对向序列，如温度。有序型数据也可以是环状周期的，如时间相关的属性。
在单个属性内部或者多个属性之间可能具有层级结构，如北京一年的交通事故数量，这是一个时间序列数据，具有时间属性，可以分层级聚合，可以分别按周、月、年聚合，在不同的时间聚合尺度下可能会发现数据集中有趣的模式。除了时间属性之外，地理空间数据也具有层级结构，如可以细分到省、市、县等。</p>
<p><img src="http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-attribute.png" alt="" /></p>
<h2 id="总结">总结</h2>
<p>本文简要讨论了可视化中的数据，从数据的种类、数据集的类型以及属性的类型这三个角度阐述了可视化中需要可视表达的数据信息。</p>
<h4 id="参考文献">参考文献</h4>
<p>[1] Tamara Munzner.Visualization Analysis and Design. CRC Press, 2014.</p>
<div class="entry-meta">
<span class="tag-panel">
<!--<a href="http://echarts.baidu.com/blog/tags/#可视化" title="Pages tagged 可视化" class="tag">-->
<span class="term">可视化</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</span>
</div>
</div><!-- /.entry-content -->
<div class="container">
<div class="read-more">
<h3>更多相关信息</h3>
<div class="row">
<div class="col-md-4">
<div class="read-more-post">
<h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4>
<p>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL 更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢？答案是肯定的，用户除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</p>
<div class="tag-panel">
<!--<a href="http://echarts.baidu.com/blog/tags/#可视化" title="Pages tagged 可视化" class="tag">-->
<span class="term">可视化</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="read-more-post">
<h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图">ECharts v3.6 发布：自定义系列、极坐标柱状图</a></h4>
<p>在 ECharts 新发布的 3.6 版本中，新增了自定义系列，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p>
<div class="tag-panel">
<!--<a href="http://echarts.baidu.com/blog/tags/#可视化" title="Pages tagged 可视化" class="tag">-->
<span class="term">可视化</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="read-more-post">
<h4><a href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" title="ECharts 统计扩展教程">ECharts 统计扩展教程</a></h4>
<p>你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。</p>
<div class="tag-panel">
<!--<a href="http://echarts.baidu.com/blog/tags/#可视化" title="Pages tagged 可视化" class="tag">-->
<span class="term">可视化</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div><!-- /#main -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div>
<div id="efe-product" class="col-md-2 col-sm-4 pc">
<h3>百度EFE更多产品</h3>
<ul id="efe-product">
<li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li>
<li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li>
<li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li>
<li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li>
<li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li>
<li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li>
</ul>
</div>
<div class="col-md-3 col-md-offset-1 col-sm-4 pc">
<h3>友情链接</h3>
<ul>
<li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li>
<li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li>
<li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li>
</ul>
</div>
<div class="col-md-3" id="footer-icon-panel">
<div class="icon-panel">
<a href="mailto:echarts@baidu.com" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-email.png"/>
</a>
<a href="https://twitter.com/EChartsJs" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-twitter.png"/>
</a>
<a href="http://weibo.com/u/5160877841" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-weibo.png"/>
</a>
<a href="https://github.com/ecomfe/echarts" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-github.png"/>
</a>
</div>
<div id="echarts-copyright">&#9400; 2017 百度ECharts团队出品</div>
</div>
</div>
</div>
</footer>
<script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script>
<script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>