🎈
Hacking for fun
GithubCV
  • About me
  • Friends
  • Technology
    • os折腾——Arch & Win11 双系统
    • 2024 Let's GoSSIP
    • 固件仿真
    • 安全随笔——安全到底是什么
    • 《信息安全论文写作》方法论
    • Heap Exploitation
    • 信息收集
    • GPT-4 初体验
    • 关于定向 fuzz 的总结
    • Beacon 实验
    • 对 AI 的认知
    • CSAPP —— lab1 datalab
    • 可视化入门学习
    • Python 爬虫入门学习
    • 对 UNIX 新的认识
    • Great works are connected
    • 开源与黑客
    • 搭建个人网站
  • Life
    • 一个悲观de乐观主义者的独白
    • 路在脚下
    • 法律学习初体验
    • 悟已往之不谏 知来者之可追
    • 在自训队,是一种什么样的体验
    • 支教
    • A passion for difficult and novel problems
    • 2022,我的年度总结
    • 1.21 大年三十
    • 1.20 打工日记
    • 浪漫的中国酒文化
    • 我的哲学批判
    • The review of The Grand Hotel
    • 暑假感想
    • 随想
  • Paper reading
    • Fuzzing
      • PDIFF
      • SyzVegas: Beating Kernel Fuzzing Odds with Reinforcement Learning
      • 1dFuzz: Reproduce 1-Day Vulnerabilities with Directed Differential Fuzzing
      • SyzDirect: Directed Greybox Fuzzing for Linux Kernel
    • Others
      • Cumulative Reasoning With Language Model
      • A Review of the F-Measure: Its History, Properties, Criticism, and Alternatives
      • Araña: Discovering and Characterizing Password Guessing Attacks in Practice
      • ChameleMon: Shifting Measurement Attention as Network State Changes
Powered by GitBook
On this page
  • 前言
  • 调研

Was this helpful?

  1. Technology

可视化入门学习

前言

可视化是指用于创建图形、图像或动画,以便交流沟通讯息的任何技术和方法。翻译成人话,即用图表 / 图形来代替文本描述。可视化的重点在于清晰地表述观点。那么该如何入门可视化呢?师父有言,“先去调研,看看目前的可视化组件能做到什么程度”做事前先调研,既可以对该领域有一个大致的认知,又可以避免重复造轮子,为日后能在该领域做出一些独特的贡献打下基石。

调研

1. 调研方法论

  • 调研对象

    组件名
    地址

    Antv

    Vue

    Echarts

    Highcharts

    D3

    Ploty

    Sugar BI

  • 如何弄出一套适用的评定算法 / 方法论?

    • 先以某个成熟的大型组件为测试样例,逐一测试以下量化标准,一方面观察该组件是否符合标准,符合标准到一个什么程度;另一方面反过来思考这样的标准是否有意义,可以对标准进行一个适当地增删

    • 对标准进行合并整理,提出可量化的方法论

  • 量化标准:

    特色(最重要且最需要关注的地方)

    交互模式(在线还是离线;CS / BS / APP)

    组件暴露的API是否有详细且规范的输入输出描述?(关注二次开发有无可能)

    组件通用功能是否完善?有无约束和限制?动态效果怎么样?大数据渲染性能怎么样?

    组件是否有人持续更新与维护?社区活跃度怎么样?(遇到问题是否容易解决)

    是否有可以直接运行或者借鉴的 demo?(直接体现出效果)

    是否支持离线(内网使用)?

  • 评定组件的方法:

    • 体验官网的各个模块 + 本地安装尝试 + 看用户生态 / 用户评价 + 探索离线部署方式

      • 关注离线场景下的组件部署,可尝试以下方法:rancher(K8s的一个应用,底层依赖 docker 镜像)、docker + Nexus + Gitlab、第三方云原生交付平台(阿里云、ThingJS)

    • 行研报告 (调查不仅针对组件本身,同时也可以观察组件背后的开发者)

2. 调研示例

  • ECharts(侧重于图表)

    特色
    交互
    使用
    API
    活跃度
    不足

    1.图表样式齐全,颜色鲜明、对比度高 2.支持 Canvas 与 SVG,网页实时渲染效果好,延迟低

    BS / 作为库文件引入前端文件

    1.对于提供的图表样式,可直接在线修改数据从而快速获得图表,或下载其源码进行二次开发; 2.可在线定制下载 echarts 模块,使其作为 js 库文件引入前端开发直接使用

    有很细致且规范的输入输出描述

    Stackoverflow 相关问答很多 其 github 项目主体稳定且有人负责维护与更新 用户体验反馈较好

    对于 3D图形 / 数据量较大的渲染,网页响应效果不佳

作为库文件引入使用示例:

在线修改 demo 使用示例:

Echarts离线部署方案:

  1. 官网定制下载插件代码,再使用U盘 / 光盘拷贝至目的主机;

  2. 从 github 上拉取源码后,使用 cnpm 安装相应依赖。依靠 npm 可以提供内网服务,也可以引用 /echarts/dist 中的 js 文件进行二次开发。

3. 调研结论

  • 现有可视化组件类别:

    • 图表开发。例:Echarts、Highcharts、Chart.js、react-vis、ApexCharts

    • 图形开发。例:Antv、D3.js、billboard.js

    • 低代码开发,实现所见即所得。例:Sugar BI、react-big-screen、vue-big-screen

    • 模块开发,专注于某一类图表 / 图形。例:Deck.gl

  • 现有可视化组件功能总结:

    1. 在线修改 demo 代码,将图表导出使用;

    2. 作为库文件引入前端 IDE,进行二次开发。

  • 调研思考:

    • 现有可视化组件涵盖了基本所需的图表类型,demo 多而全。因此对于简单的开发情景,采用“拿来主义“,使用 Echarts,Antv/g2,甚至使用 Sugar BI,都能满足要求。 但如果要面对的是高度定制化的图表开发需求,那么 D3.js / Antv 几乎是唯一的出路。因为它们是面向图形开发的可视化组件,自由度高。但相应的这一类组件几乎都有自身的图形交互语法,学习曲线比较陡峭,不适用于敏捷开发。

​未来具有竞争力的开发组件应该具备以下特点:

特点
原因

面向图形开发

1. 图表开发需要涵盖大量的 demo,才能具有竞争力,成本高 2. 可以实现定制化开发

专注于某一模块

开发功能齐全的组件,对于个人开发者是不现实的,同时组件功能也难以达到行业顶尖水平

适配移动端

现有可视化组件的痛点之一是无法在移动端实现流畅地访问。现有的可视化组件即便能够访问,页面适配也做得极其糟糕

多人实时开发共享

类似腾讯文档的在线文档功能,现有可视化组件中尚未有组件实现这一功能,这可能是一个突破口

结语

  1. 观点是可视化的灵魂;

  2. 如何向一个毫无前置知识的人,清晰地阐述一个观点,是可视化的艺术;

  3. 留心观察生活中的点滴,思考这些东西向我传递了什么观点,是以一种什么样的形式?了解别人能做什么,然后去做别人没做到的事;

  4. 在研究的开始阶段,假设拥有完美的前置条件,往往有利于研究的开展。

PreviousCSAPP —— lab1 datalabNextPython 爬虫入门学习

Last updated 1 year ago

Was this helpful?

/

https://antv.vision/en
https://vue.mtruning.club/#/project/items
https://echarts.apache.org/en/index.html
https://www.highcharts.com/
https://www.hcharts.cn/
https://d3js.org/
https://plotly.com/dash/design-kit/
https://cloud.baidu.com/product/sugar.html?track=zhihu