数据可视化 Tableau Echarts Illustrator

匿名 (未验证) 提交于 2019-12-02 23:05:13

学最有用的

数据可视化作用:

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

为什么:

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

和第一节内容一样

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

tableau类似于exec表格化的操作

百度开源的项目

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

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

  

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

<sccript src="./ecahrts">  </script>  console.log(parseInt("1"))  控制台输出

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

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

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

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

数组可以嵌套

object 类似有字典 key-value

  • object["d"]
  • object.d

a.push()
a.length

软件 类似与ps

使用Adobe Illustrator实现

{ }
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!