react 数据可视化_JavaScript教程：使用React-vis轻松实现数据可视化

react 数据可视化

数据可视化是讲述故事的重要组成部分，但是使用D3.js ，您可能会迷失数小时，而只是制作一些简单的图表。 如果只需要图表，则有很多库可以包装D3，并为您提供构建简单可视化文件的便捷方法。 本周，我们将开始研究React-vis ，这是Uber创建并开源的图表库。

React和d3.js有一个有趣的关系。 React只是关于组件的声明式渲染，而D3.js只是关于强制性地操作DOM元素。 可以使用ref将它们一起使用，但是将所有操作代码封装在单独的组件中会更好，因此您不必切换上下文。 幸运的是，React-vis库已经为我们提供了许多可组合的组件，我们可以使用这些组件来构建可视化。

测试数据可视化库或实际上是任何库的最好方法是通过构建一些东西。 我们使用纽约市的流行婴儿名字数据集来完成此操作。

为React-vis准备数据

首先，我使用create-react-app引导了一个React项目，并添加了一些依赖项： react-vis, d3-fetch帮助提取CSV数据，以及moment帮助日期格式化。 我还整理了一些样板代码，以使用d3-fetch并解析包含流行名称的CSV。 以JSON格式，我们提取的数据集大约有11,000行，每个条目如下所示：

{
   
  "Year of Birth": "2016",
  "Gender": "FEMALE",
  "Ethnicity": "ASIAN AND PACIFIC ISLANDER",
  "Child's First Name": "Olivia",