Large data visualization big-screen graphic design experience, teach you

 Foreword  

 

Since the first article to share with you the "big data visualization, large-screen design experience, to teach you! " A lot

 

 

 Graphic Design  

 

 

Graphic design concept

Graphic design is a branch of the field of data visualization, data is secondary processing, were presented in a way statistical charts, as well as core performance data visualization, graphic design is necessary to ensure the chart itself clear and accurate data, intuitive and easy to understand, but also appropriate to highlight the core pinpoint the user's attention, to help users make decisions through data.

 

The following three common visualizations Design Analysis:

 

line chart

Commonly used in the line graph shows changes and trends in the data, different variations of the amplitude of the fold line coordinate axes has a great influence.

 

Is too low, line changes left coordinate axis setting is too steep, the drawing interval values ​​(10-34) of performance data visualization exaggerated polyline trend changes.

 

Right axis value is set too high, the broken line changes are too flat, not a clear change in performance polyline.

 

 

Reasonable line graph should occupy the position of two-thirds of the chart, X-axis values ​​range of the graph to be changed according to the increase or decrease in the value of the polygonal line, which requires little brother sister with a small distal description, made dynamically calculated.

 

 

Line graph polyline thickness must be reasonable and meticulous polyline data will reduce the performance too thick broken line data loss will fluctuate details polyline, visually difficult to accurately find the corresponding value of the polyline points! I usually use two pixel lines, it seems more appropriate!

 

 

Tick ​​the right color too heavy, affect the performance chart data, zero baseline with tick marks in the comparison chart is not obvious, the whole mess. It emphasizes the starting position is a zero baseline, generally larger than the projected number of line color chart.

 

 

Bar / histogram

 

Ideal is full, the reality is very skinny. This case is before the problem I encountered at work, after the data came in, scared, cause of the problem is no communication with the front-end small Gejie good, they write dead X-axis, resulting in this problem, in fact, should the situation these diagrams should range written dynamically calculated.

 

例如,以现在数值范围为例,数据的最高值为18,X轴最高数值应该为25,当数据又上升一定的高度后,X轴再上升到相应的数值高度,这样避免了如右图的问题。

 

 

坐标轴的标签文字最好能水平排列,当X轴标签文字过多时,不建议倾斜排列、上下排列、换行排列文字多了这样的展示大大降低了阅读性!下图给出两个解决方案,大大提高标签文字的阅读性!

 

解决方案

 

 

柱子之间过于分散就会失去数据之间的关联性,过密就会变得数据之间没有独立性更不利于舒适阅读。

 

当柱子为n时,柱子直接的距离建议与n相差不要太大,柱子靠边的距离,最好是柱子之间的一半的距离,这样视觉上最为舒适。

 

 

饼图

 

左1图,不建议在饼图内与百分比数值一起显示,饼图本身的形状和大小,文字过多时容易溢出,如果出现一个2%一个1%,就很难辨别图形指向,这样也就失去了数据可视化的意义,PPT通常有这样的设计样式,因为是个死图。

 

左3图,人的阅读习惯是从左到右,从上到下,所以数据从大到小排列,更有助于阅读,图形也更具美感!

 

 

当饼图为检出率,或者一些重要信息检测的重点关注数据,就不建议大小数据顺时针排列,左1图这种情况一般很少出现,因为关注的是检出数值,展示未检出数据实为鸡肋,可能是极少情况的需要吧!

 

右图对于类似检出率的数据最为合适,直观清晰,没有无用数据干扰!

 

当饼图的标签维度过多时,就不适合把数据围绕饼图一周展示,会很乱,不易阅读,解决方案如右图!

 

 

图表分类图

 

分享一张图表分类大全,保存起来,设计数据可视化产品,会有重要参考价值!

 

这张图由设计师Abela对图表的各种特征进行了大致的概括总结。

Guess you like

Origin www.cnblogs.com/telwanggs/p/10975202.html