• 数据可视化 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

    数组排序:

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

    使用jquery

    引入jquery
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    
    
    $ 是jquery的符号
    
    <script>
        $.get('./test.txt',function(data){
            console.log(data);
        })
    ​
    </script>
    
    ./test.txt  同级调用 
    
    ./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实现

  • 相关阅读:
    大数据下高并发的处理详解
    【玩转TensorFlow】TensorFlow常见问题详解
    在阿里云上两分钟玩转AlextNet
    【前端精华】React源码分析系列
    svm
    神经网络结构选择
    神经网络反向传播跳出局部极小
    ubuntu16.04设置电池充电阈值
    pandas datafram重命名列名称
    centos6.8/ubuntu 安装python2.7 or python3.6
  • 原文地址:https://www.cnblogs.com/JCcodeblgos/p/10340769.html
Copyright © 2020-2023  润新知