数据可视化 Tableau Echarts Illustrator

学最有用的

第一章 : 导论

1-1 数据可视化应用及学习技巧

数据可视化作用:

  • 1.信息记录(使用图形化的数据记录信息)
  • 2.抽象 现实的一种抽象
  • 3.展示隐含模式
  • 4.传播思想

为什么:

  • 1.信息可视化
  • 2.清晰直观 视觉基因

第二章 : 数据可视化思想

2-1 可视化表达背景与趋势

和第一节内容一样

2-2 视觉感知与视觉通道

视觉编码描述的是将数据映射到最终可视化结果上

第三章 : Tableau可视化分析与表达

3-1 tableau安装及使用

tableau类似于exec表格化的操作

第四章 : Echarts可视化

百度开源的项目

4-1 前端基础概述

前端框架

  • 前端 = HTML + CSS + JavaScript(动画效果)

    HTML 指的是超文本标记语言 (Hyper Text Markup Language) 内容(文字语言) 标记语言

    CSS 指层叠样式表 (Cascading Style Sheets) 样式(大小 样子 格式) 标记语言

*JavaScript = DOM + BOM + ECMAScript

ECMAScript,描述了该语言的语法和基本对象,如类型、运算、流程控制、面向对象、异常等。(标准语言)

文档对象模型(DOM),描述处理网页内容的方法和接口。

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

Echarts

D3 可视化非常好、学习成本高(2D效果)

DECK.GL 3D效果 webGL

4-2 HTML+CSS

<!DOCTYPE html> 版本
<html lang="en">   页面语言是英文
<head>
    <meta charset="UTF-8">   页面是按照utf-8 编码 解码
    <title>标题</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>

HTML <meta> 元素

div 没有任何含义,只是一个组织模块。

css颜色样式 层叠样式表

<p style="backageground:**; color:***">  </p> 

CSS三种方式:

* 内联样式  在html元素中使用style属性
* 内部样式表   在html文档头部<head>区域中使用<style>元素来包含css
* 外部引用  -  使用外部CSS文件   .css文件
 <link> 标签定义了文档与外部资源之间的关系。
 <link> 标签通常用于链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

自定义颜色

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

#red {color:red;}
#green {color:green;}
?
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

4-3 JavaScript基础语法(一)

. 是在同级目录下寻找文件

<sccript src="./ecahrts">  </script>

console.log(parseInt("1"))  控制台输出

for 循环是初始条件 先判断、当判断合理为ture时 才进行循环。

函数解决重复代码的问,代码重复使用。

javascript 操作DOM能力的非常方便有助于,有助于书写爬虫!

document.getElementById("id")   通过标签拿到html元素,对他进行操作。

4-4 JavaScript基础语法(二)

数组可以嵌套

object 类似有字典 key-value

  • object["d"]
  • object.d

a.push()

a.length

4-5 Echarts可视化应用简介

4-6 Echarts零基础上手一个demo

4-7 Echarts可视化——饼图、环形图

4-8 Echarts可视化——南丁格尔玫瑰图

4-9 Echarts可视化——柱状图

4-10 Echarts可视化——散点图

4-11 Echarts可视化——折线图

4-12 Echarts可视化——日历图、树状图

4-13 Echarts可视化——地图

4-14 案例:旅行数据可视化

第五章 : Infographic信息图表可视化

5-1 Adobe Illustrator安装及概览

软件 类似与ps

第六章 : 数据可视化项目实战

6-1 智能城市项目:整体结构可视化

使用Adobe Illustrator实现

原文地址:https://www.cnblogs.com/JCcodeblgos/p/10340769.html

时间: 2024-10-03 14:00:50

数据可视化 Tableau Echarts Illustrator的相关文章

跟风舞烟学大数据可视化-Echarts从入门到上手实战

跟风舞烟学大数据可视化-Echarts从入门到上手实战 课程观看地址:http://www.xuetuwuyou.com/course/180 课程出自学途无忧网:http://www.xuetuwuyou.com 课程讲师:风舞烟 课时数:三个模块,共70课时   一.课程特色: 1.最全的Echarts课程讲解     70学时课时量,360度全方位,无死角的课程设计,让你通透Echarts可视化技术 2.最适合小白学员学习的课程,没有之一     只要你了解一点基本的Html,CSS,Ja

CSDN开源夏令营 百度数据可视化实践 ECharts(6) 期中总结

期中总结 (1)首先感谢林峰老师的辛勤指导!! 通过半个多月的培训,林峰老师讲解了ECharts总体框架和其中各个部分:图类.组件.接口.基础库的具有应用方法和应该把握的细节,并通过实际的例子熟悉和掌握各个控件.只有打牢基础才能正正的为下步的工作做好准备,熟练的属性代码的编程技巧,才能做出更好的专题. (2)第一次任务重点总结: 要求:了解ECharts特性中列举的每一项特性,并能找到实例中的例子,并且在实例中操作. 重点问题: 1)ECharts一种支持多少种图表?有多少个组件?列举出中英文名

CSDN开源夏令营 百度数据可视化实践 ECharts(2)

将ECharts引入项目中的几种详细方法讲解 (1)打好基本功 首先感谢林峰老师!给我们的悉心指导.我们之所以学习ECharts和Zrender图表组件,为了就是能够将图表应用到我们的实际情况中 来,进而让图表的战士能给我们一种更加人性化的方式呈现给用户.所有我们必须熟悉ECharts中相关组件.下面的例子都以line为例. (2)将ECharts引入项目共有三种方式 2.1)第一种方式-模块化包引入 模块化包引入模式也可以称为开发模式,是开发时最好的方法,不管是开发echarts还是用echa

CSDN开源夏令营 百度数据可视化实践 ECharts(1)

总体规划 (1)选题: 通过了解林峰老师的专题中国主要城市空气质量实况.中国经济十年时空漫游和中国人口流动大潮,涉及了人口.经济和民生等方面的内容,在这里我选择中国高考,作为我的切入点. 高考,一个永恒的话题,是一场你我都值得经历的一场无硝烟的战争.有人曾说:每个高考的孩子都背负着几代人的希望,每个高考的背后都有众多关注的眼睛.人生能有几回搏?虽然失去了许多,但终究会收获很多. (2)题目 2006-2014高考各省市报名人数及录取人数汇总专题 (3)搜集数据资料 工欲善其事,必先利其器.数据的

CSDN开源夏令营 百度数据可视化实践 ECharts(8)

(1)前言 首先谢谢林峰老师,继续接着第七篇提到的内容,CSS布局确实很累,感觉不好看了就的调整,总的看起来的高大上嘛,好了废话不再多说.今天主要就先讲解一个页面的内容,对于CSS布局后面讲会详细的介绍给大家. 另外我写的搭配时间轴地图扩展被ECharts采用,http://echarts.baidu.com/doc/example/map19.html (2)总体内容 专题包含有如下五块: 1)大海战全程: 实时描述大海战 2)国力对比篇: 中日战前.战后国力对比 3)装备对比篇: 海军实力全

CSDN开源夏令营 百度数据可视化实践 ECharts(4)

ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比较难的知识点,方便理解概念,进而更好的掌握ECharts. (1)1.  一个完整的option包含什么?可以归纳为几类? 下图中颜色已经区分出了三类分别是:公共选项 , 组件选项 , 数据选项 名称 描述 {color}backgroundColor 全图默认背景,(详见backgroundColor),默认为无,透明 {Array} color 数值系列的颜色列表,(详见color),可配数组,eg:

CSDN开源夏令营 百度数据可视化实践 ECharts(5)

Echarts map 谢谢林峰老师的辛勤指导! 本节内容:熟练掌握map和时间轴的搭配 (1)map基本属性 名称 默认值 描述 {boolean | string}selectedMode null 选中模式,默认关闭,可选single,multiple {string} mapType 'china' 地图类型,支持world,china及全国34个省市自治区.省市自治区的mapType直接使用简体中文: 新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南,

CSDN开源夏令营 百度数据可视化实践 ECharts(7)

本周主要内容整体页面布局: 基于CSS和javascript的页面布局 (1)CSS简介 CSS是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言.CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性. 方式:id选择器: 实例: #echarts1 {

CSDN开源夏令营 百度数据可视化实践 ECharts(3)

Echarts  仪表盘 这里主要讲一讲series(仪表盘)的用法,驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据 功能丰富,可以做出很漂亮的东西来. (1)首先讲一下仪表盘的基本属性 其中最常用的属性: center 圆心坐标,支持绝对值(px)和百分比,百分比计算min(width,height)*50%,radius 半径大小,支持绝对值(px),百分比计算. radius:半径属性,可以调控半径的大小,支持绝对路径和百分比. (2)全部属性: 名称 默认值 描述 {Ar