如何为您的数据选择正确的图表

时间:2015-04-19 05:21:53

标签: d3.js graph charts highcharts

我需要使用基于JavaScript的图表库。图表有很多很好的JS库:

  1. D3.js
  2. Google图表
  3. ChartJS
  4. N3-图表
  5. EmberCharts
  6. Meteor Charts
  7. HighCharts
  8. 依旧......

    虽然这些库提供了很多选项,但也会产生混淆,因此很难为您的数据选择正确的图表。

    我有以下问题:

    • 是否有基于数据选择图表的指南?
    • 您如何对数据进行分类?我从Web服务获取JSON数据,Data可以是多维的。没有限制。列和没有。的行。如果数据太大,阻止用户选择某些图表是否有意义?

1 个答案:

答案 0 :(得分:2)

有两种方法可以理解您的问题,并且都涉及非常复杂的答案。

选择正确的可视化

关于这个主题已经写了整本书。我所知道的最佳指南之一是SeeingData Inside the Chart系列。他们为每种更常见的图表类型(条形图,饼图或雷达图,散点图等)提供了一篇文章,每篇图都详细说明了您可以在其中看到的内容,它的数据以及它可以隐藏的信息类型。

根据经验,如果你有很多连续数据,比如时间序列,请使用line chart。如果您的数据点很少或数据是离散的,bar chart就在那里。如果您要提供共享,请使用stacked变体(尽管堆积折线图或area chart往往难以阅读)。如果显示相关性,请使用scatter plot。变更和差异最好显示在slope graph上。显示单个数据点的比率?如果您只有两个或三个竞争字段,请使用pie chart,对于更多元素,单个stacked bar通常是更好的选择。

有更多类型的图表,但除非您的读者擅长统计,否则他们可能无法阅读它们。请记住,作为作者,您有责任选择正确的图表类型,这不会误导读者,并且最好地传达数据的故事。请注意,一个数据集中可能有更多故事,因此有更多图表,更多视图。

更一般的建议是:不要有创意。善意(我希望我的图表看起来很酷)经常会导致灾难,比如这个误导性的Gun deaths in Florida图表。只要坚持基础,不做花哨的虚拟3D图表,让数据说明一切。正如Edwart Tufte所说的那样

  

显示数据变异而不仅仅是设计变异


选择正确的可视化库

主要因素是您的要求,任务的复杂性和编码技巧。谷歌图表是一个在线Excel,你点击你的鼠标几次,然后出来一个体面的图表。但是,您的自定义选项非常有限,如果您不喜欢输出,则必须查看其他地方。

另一方面,

D3.js是一个具有相当陡峭的学习曲线的低级工具。 make your first bar chart需要花费更多时间。最重要的事实是,它不是图形库,它是数据驱动文档库。是的,它确实有一些 helper 函数用于图形,但是你必须从头开始构建它们,这需要花费大量的时间和精力。您需要知道您的SVG,HTML和CSS,因为这是您将要操纵的内容。奖励是它的极大灵活性,您可以根据D3制作整个应用程序。凭借技巧,它可以完全取代jQuery。它比简单的饼图生成器要困难得多。

如果您想要一个简单饼图生成器,但Google Charts不提供您需要的选项,那么真正的图表库就像{{ 3}}适合你。他们采用多种格式的数据,让您选择基本的输出类型(例如饼图与条形图),做一些自定义,然后离开。它是中间地带。

我没有使用像n3,Ember或Meteor图表这样的特定于框架的库,但我猜他们会比D3更接近Highcharts。只需检查您是否需要提供数据和配置对象,或者您是否需要创建和设置单个SVG DOM节点。

一般来说,如果不知道该选择什么,请从最不复杂的那些开始。首先尝试在Excel中创建它。然后在谷歌图表中。然后学习一些JavaScript并尝试Highcharts或特定于框架的库。只有你还需要更多的选择才能获得像D3这样的大枪。