如何 select 为您的数据制作正确的图表
How to select right chart for your data
我需要使用基于 JavaScript 的图表库。有很多不错的图表 JS 库：
- D3.js
- Google 个图表
- ChartJS
- n3 图表
- EmberCharts
- 流星图
- HighCharts
等等....
虽然这些库提供了很多选项，但也会造成混乱，很难为您的数据选择正确的图表。
我有以下问题：
- 是否有根据数据选择图表的指南？
- 您如何对数据进行分类？我从 Web 服务获取 JSON 数据，数据可以是多维的。没有限制。列和没有。的行。如果数据太大，阻止用户选择某些图表是否有意义？
有两种方法可以理解您的问题，并且都涉及非常复杂的答案。
选择正确的可视化
整本书都是关于这个主题的。我所知道的最好的指南之一是 SeeingData's Inside the Chart 系列。他们针对每一种更常见的图表类型（条形图、饼图或雷达图、散点图等）都有一篇文章，详细介绍了您可以在其中看到的内容、数据的用途以及可以隐藏的信息类型。
根据经验，如果您有大量连续数据，例如时间序列，使用 line chart. If you have few datapoints or the data is discrete, bar chart is there for you. Use stacked variants if you're presenting shares (although stacked line chart, or area chart tends to be hard to read). If presenting correlation, use a scatter plot. Changes and differences are best shown on a slope graph. Showing ratios of a single datapoint? If you have just two or three competing fields, use a pie chart, for more elements, a single stacked bar 通常是更好的选择。
图表的种类更多，但除非您的读者精通统计学，否则他们可能看不懂。请记住，作为作者，您有责任选择正确的图表类型，这不会误导读者并且最好地传达数据的故事。请注意，一个数据集中可能有更多的故事，因此会有更多的图表，更多的视图。
一个更一般的建议是：不要有创意。善意 （我希望我的图表看起来很酷） 往往会导致灾难，就像这张误导性的 Gun deaths in Florida 图表。坚持基础知识，不要做花哨的人造 3D 图表，让数据说明一切。正如爱德华·塔夫特所说
Show data variation not just design variation
选择正确的可视化库
主要因素是您的要求、任务的复杂性和您的编码技能。 Google 图表是在线的 Excel，你点击鼠标几次，就会出现一个不错的图表。但是，您的自定义选项 非常 有限，如果您不喜欢输出，则必须查看其他地方。
D3.js on the other hand is a low-level tool with quite steep learning curve. It takes a better part of the day to make your first bar chart。最重要的事实是，它不是 图形库 ，而是 数据驱动文档 库。是的，它确实有一些 helper 图形功能，但你必须从头开始构建它们，这需要花费大量时间和精力。您需要知道您的 SVG，HTML 和 CSS，因为这就是您要操作的内容。回报是它的极大灵活性，您可以基于 D3 制作整个应用程序。加上技巧，完全可以代替jQuery。它比简单的饼图生成器要难得多。
如果简单的饼图生成器是您想要的，但是Google图表没有提供您需要的选项，那么真正的像 Highcharts 这样的图形库 适合你。他们以多种格式获取数据，让您选择基本的输出类型（例如饼图与条形图），进行一些自定义，然后就可以了。这是中间立场。
我不使用特定于框架的库，如 n3、Ember 或 Meteor 图表，但我猜它们更接近 Highcharts 而不是 D3。只需检查您是否只需要提供 数据和一个配置对象 ，或者您是否要创建和设置单独的 SVG DOM 节点。
一般来说，如果不知道选择什么，就从最简单的开始。尝试先在 Excel 中完成。然后在 Google 图表中。然后学习一些 JavaScript 并尝试使用 Highcharts 或特定于框架的库。并且只有当您仍然需要更多选择时，才可以选择像 D3 这样的大炮。
我需要使用基于 JavaScript 的图表库。有很多不错的图表 JS 库：
- D3.js
- Google 个图表
- ChartJS
- n3 图表
- EmberCharts
- 流星图
- HighCharts
等等....
虽然这些库提供了很多选项，但也会造成混乱，很难为您的数据选择正确的图表。
我有以下问题：
- 是否有根据数据选择图表的指南？
- 您如何对数据进行分类？我从 Web 服务获取 JSON 数据，数据可以是多维的。没有限制。列和没有。的行。如果数据太大，阻止用户选择某些图表是否有意义？
有两种方法可以理解您的问题，并且都涉及非常复杂的答案。
选择正确的可视化
整本书都是关于这个主题的。我所知道的最好的指南之一是 SeeingData's Inside the Chart 系列。他们针对每一种更常见的图表类型（条形图、饼图或雷达图、散点图等）都有一篇文章，详细介绍了您可以在其中看到的内容、数据的用途以及可以隐藏的信息类型。
根据经验，如果您有大量连续数据，例如时间序列，使用 line chart. If you have few datapoints or the data is discrete, bar chart is there for you. Use stacked variants if you're presenting shares (although stacked line chart, or area chart tends to be hard to read). If presenting correlation, use a scatter plot. Changes and differences are best shown on a slope graph. Showing ratios of a single datapoint? If you have just two or three competing fields, use a pie chart, for more elements, a single stacked bar 通常是更好的选择。
图表的种类更多，但除非您的读者精通统计学，否则他们可能看不懂。请记住，作为作者，您有责任选择正确的图表类型，这不会误导读者并且最好地传达数据的故事。请注意，一个数据集中可能有更多的故事，因此会有更多的图表，更多的视图。
一个更一般的建议是：不要有创意。善意 （我希望我的图表看起来很酷） 往往会导致灾难，就像这张误导性的 Gun deaths in Florida 图表。坚持基础知识，不要做花哨的人造 3D 图表，让数据说明一切。正如爱德华·塔夫特所说
Show data variation not just design variation
选择正确的可视化库
主要因素是您的要求、任务的复杂性和您的编码技能。 Google 图表是在线的 Excel，你点击鼠标几次，就会出现一个不错的图表。但是，您的自定义选项 非常 有限，如果您不喜欢输出，则必须查看其他地方。
D3.js on the other hand is a low-level tool with quite steep learning curve. It takes a better part of the day to make your first bar chart。最重要的事实是，它不是 图形库 ，而是 数据驱动文档 库。是的，它确实有一些 helper 图形功能，但你必须从头开始构建它们，这需要花费大量时间和精力。您需要知道您的 SVG，HTML 和 CSS，因为这就是您要操作的内容。回报是它的极大灵活性，您可以基于 D3 制作整个应用程序。加上技巧，完全可以代替jQuery。它比简单的饼图生成器要难得多。
如果简单的饼图生成器是您想要的，但是Google图表没有提供您需要的选项，那么真正的像 Highcharts 这样的图形库 适合你。他们以多种格式获取数据，让您选择基本的输出类型（例如饼图与条形图），进行一些自定义，然后就可以了。这是中间立场。
我不使用特定于框架的库，如 n3、Ember 或 Meteor 图表，但我猜它们更接近 Highcharts 而不是 D3。只需检查您是否只需要提供 数据和一个配置对象 ，或者您是否要创建和设置单独的 SVG DOM 节点。
一般来说，如果不知道选择什么，就从最简单的开始。尝试先在 Excel 中完成。然后在 Google 图表中。然后学习一些 JavaScript 并尝试使用 Highcharts 或特定于框架的库。并且只有当您仍然需要更多选择时，才可以选择像 D3 这样的大炮。