超级会员免费看
数据可视化：InfoVis 与 Google Charts 实战
在数据可视化的领域中，InfoVis 和 Google Charts 是两个强大的工具。InfoVis 适合展示节点之间的复杂关系，而 Google Charts 则能让我们轻松创建各种类型的图表。下面将详细介绍如何使用这两个工具进行数据可视化。
1. 使用 InfoVis 创建旭日图
InfoVis 是一个专注于展示节点关系的库，它可以创建出非常酷炫的旭日图。旭日图能够展示节点之间的双向关系，非常适合展示如国家出口数据等复杂的数据集。
1.1 准备工作
首先，你需要获取源文件。可以下载示例文件，或者访问 http://blog.everythingfla.com/?p=339 获取最新版本。
1.2 创建 HTML 文件
创建一个名为 sunburst - infovis.html 的 HTML 文件，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Sunberst - InfoVis</title>
<meta charset="utf-8" />
<style>
#infovis {
position:relative;
width:600px;
height:600px;
margin:auto;
overflow:hidden;
}
</style>
<script src="./external/jit/jit-yc.js"></script>
<script src="./07.05.jit.js"></script>
</head>
<body onload="init();">
<div id="infovis"></div>
</body>
</html>
1.3 创建 JavaScript 文件
在 07.05.jit.js 文件中，我们需要完成以下几个步骤：
1. 创建基础数据源 ：
var dataSource = [ {"id": "node0", "name": "","data": {"$type": "none" },"adjacencies": []}]; //starting with invisible root
- 创建节点函数 ：
function createNode(id,name,wid,hei,clr){
var obj = {id:id,name:name,data:{"$angularWidth":wid, "$height":hei,"$color":clr},adjacencies:[]};
dataSource[0].adjacencies.push({"nodeTo": id,"data": {'$type': 'none'}});
dataSource.push(obj);
return obj;
}
- 创建关系函数 ：
function relate(obj){
for(var i=1; i<arguments.length; i++){
obj.adjacencies.push({'nodeTo':arguments[i]});
}
}
- 创建高亮函数 ：
function highlight(nodeid){
var selectedIndex = 0;
for(var i=1; i<dataSource.length; i++){
if(nodeid!= dataSource[i].id){
for(var item in dataSource[i].adjacencies)
delete dataSource[i].adjacencies[item].data;
}else{
selectedIndex = i;
for(var item in dataSource[i].adjacencies)
dataSource[i].adjacencies[item].data = {"$color": "#ddaacc","$lineWidth": 4 };
}
}
if(selectedIndex){
var node = dataSource.splice(selectedIndex,1)[0];
dataSource.splice(1,0,node);
}
}
- 初始化函数 ：
function init(){
var node = createNode('geek','02geek',100,40,"#B1DDF3");
relate(node,'ben');
node = createNode('packt','PacktBub',100,40,"#FFDE89");
relate(node,'ben');
node = createNode('ben','Ben',100,40,"#E3675C");
relate(node,'geek','packt','nic');
node = createNode('nic','Nicolas',100,40,"#C2D985");
var sb = new $jit.Sunburst({
injectInto: 'infovis', //id container
Node: {
overridable: true,
type: 'multipie'
},
Edge: {
overridable: true,
type: 'hyperline',
lineWidth: 1,
color: '#777'
},
NodeStyles: {
enable: true,
type: 'Native',
stylesClick: {
'color': '#444444'
},
stylesHover: {
'color': '#777777'
},
duration: 700
},
Events: {
enable: true,
type: 'Native',
onClick: function(node, eventInfo, e){
if (!node) return;
highlight(node.id);
sb.loadJSON(dataSource);
sb.refresh()
}
},
levelDistance: 120
});
sb.loadJSON(dataSource);
sb.refresh();
}
1.4 旭日图数据结构
旭日图的数据结构有几个重要特点：
- 有一个基础父节点，它是所有无父节点的节点的父节点。
- 节点之间的关系通过 adjacencies 数组来表示，其中 nodeTo 是必需的属性，用于指定单向关系。
- 可以通过 highlight 函数来高亮显示节点之间的关系。
以下是一个简单的数据结构示例：
[
{
"id": "node0",
"name": "",
"data": {
"$type": "none"
},
"adjacencies": [
{"nodeTo": "node1","data": {'$type': 'none'}},
{"nodeTo": "node2","data": {'$type': 'none'}},
{"nodeTo": "node3","data": {'$type': 'none'}},
{"nodeTo": "node4","data": {'$type': 'none'}}
]
},
{
"id": "node1",
"name": "node 1",
"data": {
"$angularWidth": 300,
"$color": "#B1DDF3",
"$height": 40
},
"adjacencies": [
{
"nodeTo": "node3",
"data": {
"$color": "#ddaacc",
"$lineWidth": 4
}
}
]
}
]
2. 使用 Google Charts 创建饼图
Google Charts 是一个强大的可视化工具，它提供了丰富的图表类型和简单易用的 API。下面将介绍如何使用 Google Charts 创建一个饼图。
2.1 准备工作
创建一个空的 HTML 文件 08.01.getting-started.html 和一个空的 JavaScript 文件 08.01.getting-started.js 。
2.2 创建 HTML 文件
<!DOCTYPE html>
<html>
<head>
<title>Google Charts Getting Started</title>
<meta charset="utf-8" />
<script src="https://www.google.com/jsapi"></script>
<script src="./08.01.getting-started.js"></script>
</head>
<body style="background:#fafafa">
<div id="chart"></div>
</body>
</html>
2.3 创建 JavaScript 文件
在 08.01.getting-started.js 文件中，我们需要完成以下几个步骤：
1. 加载 Google API ：
google.load('visualization', '1.0', {'packages':['corechart']});
- 设置回调函数 ：
google.setOnLoadCallback(init);
- 初始化函数 ：
function init(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Type of Death');
data.addColumn('number', 'Deaths');
data.addRows([
['Diseases of heart', 616828],
['Malignant neoplasms', 565469],
['Chronic lower respiratory diseases', 141090],
['Cerebrovascular diseases', 134148],
['Accidents', 121902],
['Alzheimer\'s disease', 82435],
['Diabetes mellitus', 70553],
['Influenza and pneumonia', 56284],
['Suicide', 36035],
['Septicemia', 35927],
['Chronic liver disease and cirrhosis', 29963],
['Essential hypertension and hypertensive renal disease', 25742],
['Parkinson\'s disease', 20483],
['Homicide', 17826],
['All other causes', 469062]
]);
var options = {'title':'Deaths, for the 15 leading causes of death: United States, 2008',
'width':800,
'height':600};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
2.4 Google Charts 工作原理
使用 Google Charts 创建图表主要有以下几个步骤：
1. 加载 Google API ：通过 <script> 标签引入 Google API，并使用 google.load 方法加载所需的库和包。
2. 设置回调函数 ：使用 google.setOnLoadCallback 方法设置回调函数，当库加载完成后执行。
3. 创建数据表格 ：使用 google.visualization.DataTable 创建数据表格，并使用 addColumn 和 addRows 方法添加列和行。
4. 设置选项 ：创建一个选项对象，用于设置图表的属性，如标题、宽度、高度等。
5. 创建和绘制图表 ：使用相应的图表类（如 PieChart ）创建图表对象，并使用 draw 方法绘制图表。
2.5 高级特性：创建 3D 图表
可以通过在选项对象中添加 is3D 参数来创建 3D 图表：
var options = {'title':'Deaths, for the 15 leading causes of death: United States, 2008',
'width':800,
'height':600,
"is3D": true};
总结
通过以上步骤，我们可以使用 InfoVis 创建旭日图来展示节点之间的复杂关系，使用 Google Charts 创建饼图来展示数据的比例关系。这两个工具都提供了丰富的功能和简单易用的 API，能够帮助我们轻松实现数据可视化。
流程图
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px
A([开始]):::startend --> B(准备源文件):::process
B --> C(创建 HTML 文件):::process
C --> D(创建 JavaScript 文件):::process
D --> E{选择工具}:::decision
E -->|InfoVis| F(创建旭日图):::process
E -->|Google Charts| G(创建饼图):::process
F --> H(完成旭日图):::process
G --> I(完成饼图):::process
H --> J([结束]):::startend
I --> J
表格
| 工具 | 适用场景 | 主要步骤 |
|---|---|---|
| InfoVis | 展示节点之间的复杂关系 | 准备源文件、创建 HTML 文件、创建 JavaScript 文件、创建节点、创建关系、高亮显示、初始化、加载数据、刷新图表 |
| Google Charts | 创建各种类型的图表 | 准备 HTML 和 JavaScript 文件、加载 Google API、设置回调函数、创建数据表格、设置选项、创建和绘制图表 |
数据可视化：InfoVis 与 Google Charts 实战
3. 深入理解 InfoVis 旭日图的交互性
InfoVis 旭日图的交互性是其一大亮点，通过点击节点可以高亮显示节点之间的关系。下面详细解释其交互逻辑。
3.1 事件处理
在初始化旭日图时，我们设置了 Events 选项，当点击节点时会触发 onClick 函数：
Events: {
enable: true,
type: 'Native',
onClick: function(node, eventInfo, e){
if (!node) return;
highlight(node.id);
sb.loadJSON(dataSource);
sb.refresh()
}
}
这个函数的逻辑如下：
1. 检查点击的节点是否存在，如果不存在则直接返回。
2. 调用 highlight 函数，将点击的节点 ID 作为参数传入，该函数会高亮显示该节点及其相关的关系。
3. 使用 loadJSON 方法重新加载数据源。
4. 调用 refresh 方法刷新图表，使高亮效果立即显示。
3.2 高亮函数详解
highlight 函数的主要作用是高亮显示选中节点的关系，并取消其他节点的高亮效果。代码如下：
function highlight(nodeid){
var selectedIndex = 0;
for(var i=1; i<dataSource.length; i++){
if(nodeid!= dataSource[i].id){
for(var item in dataSource[i].adjacencies)
delete dataSource[i].adjacencies[item].data;
}else{
selectedIndex = i;
for(var item in dataSource[i].adjacencies)
dataSource[i].adjacencies[item].data = {"$color": "#ddaacc","$lineWidth": 4 };
}
}
if(selectedIndex){
var node = dataSource.splice(selectedIndex,1)[0];
dataSource.splice(1,0,node);
}
}
具体步骤如下：
1. 初始化 selectedIndex 为 0。
2. 遍历 dataSource 数组，对于每个节点：
- 如果该节点的 ID 不等于选中节点的 ID，则删除其 adjacencies 数组中每个元素的 data 属性，取消高亮效果。
- 如果该节点的 ID 等于选中节点的 ID，则记录其索引，并为其 adjacencies 数组中每个元素的 data 属性设置高亮样式（颜色和线宽）。
3. 如果 selectedIndex 不为 0，则将选中节点移动到数组的第二个位置（索引为 1），确保其关系能够正确显示。
4. Google Charts 的更多应用场景
除了创建饼图，Google Charts 还可以创建其他类型的图表，如柱状图、折线图等。下面介绍如何使用 ChartWrapper 创建不同类型的图表。
4.1 使用 ChartWrapper 创建图表
ChartWrapper 是 Google Charts 提供的一个方便的工具，它可以简化图表的创建过程。以下是一个使用 ChartWrapper 创建柱状图的示例：
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(init);
function init(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows([
['2018', 1000],
['2019', 1170],
['2020', 660],
['2021', 1030]
]);
var options = {
title: 'Sales by Year',
width: 800,
height: 600
};
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: data,
options: options,
containerId: 'chart'
});
chartWrapper.draw();
}
步骤如下：
1. 加载 Google API 和所需的包。
2. 设置回调函数 init 。
3. 在 init 函数中创建数据表格，并添加列和行。
4. 创建选项对象，设置图表的属性。
5. 使用 ChartWrapper 创建图表对象，指定图表类型、数据表格、选项和容器 ID。
6. 调用 draw 方法绘制图表。
4.2 切换数据来源到 Google Spreadsheet
Google Charts 还支持从 Google Spreadsheet 中获取数据。以下是实现步骤：
1. 准备一个 Google Spreadsheet，并确保其共享设置为“任何人都可以查看”。
2. 获取 Spreadsheet 的 URL，格式如下：
https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/edit
其中 SPREADSHEET_ID 是 Spreadsheet 的唯一标识符。
3. 在 JavaScript 代码中使用 google.visualization.Query 从 Spreadsheet 中获取数据：
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(init);
function init(){
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/gviz/tq?gid=0');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
title: 'Data from Google Spreadsheet',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
步骤如下：
1. 加载 Google API 和所需的包。
2. 设置回调函数 init 。
3. 在 init 函数中创建 Query 对象，指定 Spreadsheet 的 URL。
4. 调用 send 方法发送查询请求，并指定回调函数 handleQueryResponse 。
5. 在 handleQueryResponse 函数中，检查响应是否有错误，如果有则显示错误信息，否则获取数据表格并绘制图表。
流程图
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px
A([开始]):::startend --> B(加载 Google API):::process
B --> C(设置回调函数):::process
C --> D(创建数据表格):::process
D --> E{选择图表类型}:::decision
E -->|PieChart| F(创建饼图):::process
E -->|ColumnChart| G(创建柱状图):::process
F --> H(绘制图表):::process
G --> H
H --> I(完成图表):::process
I --> J([结束]):::startend
表格
| 功能 | 实现方式 | 代码示例 |
|---|---|---|
| InfoVis 节点高亮 | 设置 Events 选项，调用 highlight 函数 | javascript<br>Events: {<br> enable: true,<br> type: 'Native',<br> onClick: function(node, eventInfo, e){<br> if (!node) return;<br> highlight(node.id);<br> sb.loadJSON(dataSource);<br> sb.refresh()<br> }<br>}<br> |
| Google Charts 使用 ChartWrapper | 创建 ChartWrapper 对象，指定图表类型、数据表格、选项和容器 ID | javascript<br>var chartWrapper = new google.visualization.ChartWrapper({<br> chartType: 'ColumnChart',<br> dataTable: data,<br> options: options,<br> containerId: 'chart'<br>});<br>chartWrapper.draw();<br> |
| Google Charts 从 Google Spreadsheet 获取数据 | 使用 google.visualization.Query 发送查询请求，处理响应 | javascript<br>var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/gviz/tq?gid=0');<br>query.send(handleQueryResponse);<br> |
总结
InfoVis 和 Google Charts 是两个强大的数据可视化工具，它们各自具有独特的功能和应用场景。InfoVis 适合展示节点之间的复杂关系，通过交互性可以更好地探索数据。Google Charts 则提供了丰富的图表类型和简单易用的 API，支持多种数据来源，能够满足不同的可视化需求。通过深入学习和实践，我们可以利用这些工具将数据转化为直观、易懂的图表，为决策提供有力支持。
扫一扫
2138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
