当前位置:   article > 正文

数据可视化 Tableau Echarts Illustrator

tebluea和echarts

学最有用的

第一章 : 导论

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

  1. <!DOCTYPE html> 版本
  2. <html lang="en"> 页面语言是英文
  3. <head>
  4. <meta charset="UTF-8"> 页面是按照utf-8 编码 解码
  5. <title>标题</title>
  6. </head>
  7. <body>
  8. <p>这是一个段落。</p>
  9. </body>
  10. </html>
  11. HTML <meta> 元素
  12. div 没有任何含义,只是一个组织模块。

css颜色样式 层叠样式表

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

CSS三种方式:

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

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

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

4-3 JavaScript基础语法(一)

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

  1. <sccript src="./ecahrts"> </script>
  2. 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

数组排序:

  • 顺序:
a.sort();
  • 逆序:
  1. a.sort(function (a,b){
  2. return b-a;
  3. })

使用jquery

  1. 引入jquery
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
  3. $ 是jquery的符号
  4. <script>
  5. $.get('./test.txt',function(data){
  6. console.log(data);
  7. })
  8. </script>
  9. ./test.txt 同级调用
  10. ./src/test.txt 其他目录

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/587175
推荐阅读
相关标签
  

闽ICP备14008679号