暑期实习面试 - 阿里数据中台前端可视化总结

发表于 | 分类于 | | 阅读次数:
字数统计: 3.7k | 阅读时长 ≈ 12

三面

数据结构：

为什么需要二叉树？

B+树？

跳表？

操作系统：

进程通信方式？

拥塞

数据库：

数据库了解吗？

算法：

找出小于k的所有质数

可视分析流程

数据转化、可视映射、视图转化

原数据->转化后的数据->可视结构->视图

如：我们选择线性投影将30维的原数据降为5维度的转化数据，再使用平行坐标视觉映射转为可视结构，然而数据有相互遮挡，则选择PCP方法视图转化至视图上。最后呈现热力图式的平行坐标。

image-20190318103214651

D3.js源码阅读：

  • 把输入的原始数据转化成为标准的D3可接受的数据格式
  • 根据原始数据定义好x轴函数、y轴函数和定义好作图方式(如d3.line)
  • 在SVG上面画出x轴y轴、根据原始数据结合x轴及y轴函数作线状图
  • 再画出标题等细节的东西
  • 最后，给已经完成的图形添加动画效果

D3力导向图。

模块1：center.js 设置力导图点阵中心

虽然每个节点的坐标都是计算得到的，但总有开始状态。开始状态下的坐标设置的是获取的随机数，这个随机数可以根据当前 View 的宽高来限定。

遍历所有 FNode，给每个 FNode 设置一个随机获取的坐标。遍历所有 FLink，计算每条 FLink 的 sourceNode 和 targetNode 的距离 d，利用 α 值和 FLink 的拉力，计算 sourceNode 和 targetNode 的距离的减少量。

遍历所有 FNode，使每个节点向 View 中心聚拢。

模块3：jiggle.js 微小晃动随机数

模块4：collide.js 碰撞

https://segmentfault.com/a/1190000008578391

问面试官的问题

可以了解一下团队对于实习生的培养吗？如果有幸接到offer后，是否可以联系组内前辈去问一下需要学习哪些技能，因为现在距离暑期实习还有一两个月时间，是否可以预备学习一些组内的必备技能？

您是我一个位BOSS面的面试官，可以了解一下作为高级前端工程师的一些工作的日常吗？之前总听说架构这些词，但是在校园里面确实没有接触过您这样的高级工程师。谢谢！

位图和矢量图

1.位图图像(bitmap)
亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。

矢量图：矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果。

数据中台

阿里中台主要由业务中台和数字中台并肩构成了双中台，并肩扛起了所有前台业务。

业务中台将后台资源进行抽象包装整合，转化为前台友好的可重用共享的核心能力，实现了后端业务资源到前台易用能力的转化。

数据中台从后台及业务中台将数据流入，完成海量数据的存储、计算、产品化包装过程，构成企业的核心数据能力，为前台基于数据的定制化创新和业务中台基于数据反馈的持续演进提供了强大支撑。业务中台与数据中台，相辅相成，互相支撑，一起构建起了战场强大的后方炮火群。

img

二面

可视化项目，及相关展开

可视化的流程

data transformation、visual structure、view transformation + 交互

如果类别多、数据大有遮挡该如何解决？

  1. data transformation：

    数据采样

  2. visual structure：已有方式——散点图、三维散点图、平行坐标。我研究的方式——。

  3. view transformation：如果以上方式还是会产生遮挡问题，可以采用一些通道编码，如颜色深浅、透明度、大小——表示该位置的相同类型数据的多少；

    热力图、透明度、汇合

  4. 交互：

在散点矩阵中使用动画来减轻重叠（Using Animation to Alleviate Overdraw in Multiclass Scatterplot Matrices）

数据预处理——数据缺失和异常

缺失值处理：

造成数据缺失的原因是多方面的，主要可能有以下几种：

  1. 有些信息暂时无法获取，致使一部分属性值空缺出来。
  2. 有些信息因为一些人为因素而丢失了。
  3. 有些对象的某个或某些属性是不可用的。如一个未婚者的配偶姓名。
  4. 获取这些信息的代价太大，从而未获取数据。

空值处理的重要性：

空值的存在，造成了以下影响：

  1. 系统丢失了大量的有用信息；
  2. 系统的不确定性更加显著，系统中的确定性成分更难把握；
  3. 包含空值的数据会使挖掘过程陷入混乱，导致不可靠的输出。

空值处理的方法：

一、删除元组

将存在遗漏信息属性值的对象（记录）删除，从而得到一个完备的信息表。这种方法在对象有多个属性缺失值、被删除的含缺失值的对象与信息表中的数据量相比非常小的情况下是非常有效的。然而这种方法丢弃了大量隐藏在这些对象中的信息。在信息表中对象很少的情况下会影响到结果的正确性，可能导致数据发生偏离，从而引出错误的结论。

二、数据补齐

这类方法是基于统计学原理用一定的值去填充空值，从而使信息表完备化。数据挖掘中常用的有以下几种补齐方法：

  1. 人工填写
    这个方法产生数据偏离最小，是填充效果最好的一种。当数据规模很大、空值很多的时候，该方法是不可行的。
  2. 特殊值填充
    将空值作为一种特殊的属性值来处理，它不同于其他的任何属性值。如所有的空值都用“unknown”填充。这样将形成另一个概念，可能导致严重的数据偏离，一般不使用。
  3. 平均值填充
    如果空值是数值属性，就使用该属性在其他所有对象的取值的平均值来填充该缺失的属性值.
    如果空值是非数值属性，就根据统计学中的众数原理，用该属性在其他所有对象出现频率最高的值来补齐该缺失的属性值。
  4. 热卡填充（就近补齐）
    对于一个包含空值的对象，热卡填充法在完整数据中找到一个与它最相似的对象，然后用这个相似对象的值来进行填充。不同的问题选用不同的标准来对相似进行判定。
  5. K最近邻法
    先根据欧式距离或相关分析来确定距离具有缺失数据样本最近的K个样本，将这K个值加权平均来估计该样本的缺失数据。
  6. 使用所有可能的值填充
    这种方法是用空缺属性值的所有可能的属性取值来填充，能够得到较好的补齐效果。但是当数据量很大或者遗漏的属性值较多时，其计算的代价很大，可能的测试方案很多。
  7. 回归
    基于完整的数据集，建立回归方程（模型）。对于包含空值的对象，将已知属性值代入方程来估计未知属性值，以此估计值来进行填充。
  8. 期望值最大化方法（EM）
    在缺失类型为随机缺失的条件下，假设模型对于完整的样本是正确的，通过观测数据的边际分布可以对未知参数进行极大似然估计。它一个重要前提：适用于大样本。有效样本的数量足够以保证ML估计值是渐近无偏的并服从正态分布。但是这种方法可能会陷入局部极值，收敛速度也不是很快，并且计算很复杂。
三、不处理——使用深度学习、数据挖掘方式填补

直接在包含空值的数据上进行数据挖掘。这类方法包括贝叶斯网络和人工神经网络等。

异常处理

异常值的判别方法：
  1. 简单统计分析
    对属性值进行一个描述性的统计（规定范围），从而查看哪些值是不合理的（范围以外的值）。
  2. 3δ原则
    若数据服从正态分布：根据正态分布的定义可知，距离平均值3δ之外的概率为 P(|x-μ|>3δ) <= 0.003 ，这属于极[小概率事件]，在默认情况下我们可以认定，距离超过平均值3δ的样本是不存在的。因此，当样本距离平均值大于3δ，认为该样本为异常值。
  3. 使用距离检测多元离群点
    当数据不服从正态分布时，可以通过远离平均距离多少倍的标准差来判定，多少倍的取值需要根据经验和实际情况来决定。
  4. 可视化结果后的判定
异常值的处理方法：
  1. 删除含有异常值的记录
  2. 将异常值视为缺失值，使用缺失值处理方法来处理
  3. 用平均值来修正
  4. 不处理

经典可视化图标的优缺点

饼图的缺点

玫瑰图的缺点，视觉干扰是什么

image-20190319232437932

场景应用

解决分类数据可视化中类别过多、数据量过多的遮挡问题。

数据部分：

可视化部分：

交互部分：

面向对象思维

绘制折线图和柱状图的代码大部分相似，可以写在一个类中。

一个平面n个圆有多少个相交的圆

1 遍历的方法。时间复杂度较高。

2 对每一个圆计算其变上有多少个交点，交点数除以2就位改圆的相交圆的个数。将所有相交个数加起来除以2(2个圆相交会有一个相交个数，遍历后算了两遍)，结果为一共有多少个相交的圆。

一面

t-SNE没回答完整。

高维数据可视分析研究有哪些？

子空间聚类？

常问问题

Q1：基础知识

Q2可视化图表：

比如在没写过图表的前提下，怎么抽象数据与图形的映射，怎么去组合不同的图表部件。

要从图表类型的隐喻上进行区分

饼图表达的是一个整体和局部的关系，也就是一个部分占据整体的多少比例。柱状图和折线图较为接近，通常前者表示不同对象数据的对比，后者更常用作表示同一对象数据在不同（时间）维度上的趋势。

首先，饼图中的类目不应太多，否则信息很分散，不知道作者想表达什么信息。

其次，饼图的颜色不要五颜六色，除了用以区分类目之外，颜色还可以传递更多有效信息。比如上图用绿色表示正确，灰色表示错误，是符合一般对颜色的认知的，并且绿色的类目更醒目，第一眼就能关注到；相反，如果用普通的三种颜色表示三个类目，则读者很难一眼从图中解读出有效信息。

第三，区分出想表明特定意思的类目。比如上图将正确的类目和错误的类目分隔开，读者很容易抓取到关键信息。

南丁格尔玫瑰图：

误导在于，数据的比值为到底是半径比、面积比、还是角度比？

第一种图将数据映射到半径；第二种图将数据映射到半径和角度；第三将图将数据映射到角度。

何时使用？

Q3前端设计：

常问的一个校招问题，有一块区域要展示一组数据，但数据需要请求 3 个接口才能计算得到，请问前端是怎么做的，如何优化，前端什么情况下可以放弃合并接口的要求。这个地方至少会考察到异步，本地缓存，延展下会问下并发，竞态，协程等。

HR面试准备

1、为什么想加入这家公司？你需要了解下这家公司的文化和氛围。
2、为什么离开上一家公司？钱少，不能实现梦想，还是有哪些不爽的地方。如果是换工作为了实现梦想，那么你的梦想是什么。不爽的地方如果在新公司再遇到怎么处理。
3、你的职业规划是什么？
4、当你遇到瓶颈的时候你怎么办？
5、这些年你每年的成长是什么？怎么能体现你的进步？

6、谈谈你对阿里的企业文化理解？
7、你的期望薪资？
8、项目中遇到的最大挑战是什么？怎么解决的？
9、最有成就感的事情是？
10、怎么看待加班（你能接受996、997、007吗）？

11、说说自己性格上的优缺点（描述一下自己的性格）
12、自己觉得自己工作上的短板/优点是什么？
13、可以接受降薪吗？

作者：阅跑影财者

链接：https://www.jianshu.com/p/a1863ef1610f

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。