D3.js 数据预处理

[ghost]

D3.js 进行数据可视化的时候，有很多不同的表现形式，我们可以发挥自己的想象。同时，为了适应不同的表现形式，我们就需要对数据源进行预处理

一个简单的实例，我希望可以把自己 GitHub 帐号关注的项目，用图表来展现各种编程语言关注的项目的数量

可以通过 GitHub 提供的 API https://api.github.com/users/pennyjs/starred 来获取数据

superagent.get('https://api.github.com/users/pennyjs/starred').then((response) => {
}).catch((error) => {})

数据源是一个数组，每一项有很多信息，但图表仅需要各项的 language，可以用 map 函数来筛选

superagent.get('https://api.github.com/users/pennyjs/starred').then((response) => {
  response.body.map((item) => {
    return item.language
  })
}).catch((error) => {})

现在数据就变成一个 30 项的数组

["Kotlin", "C", "JavaScript", "Swift", "Ruby", "Ruby", "Objective-C", "JavaScript", "JavaScript", "Swift", "Swift", "JavaScript", "Kotlin", "Java", "Java", "Go", "Kotlin", "JavaScript", "HTML", "Python", "Java", "Go", "CSS", "Kotlin", "Kotlin", "Java", "Swift", null, "Ruby", "Shell"]

可以看出，我们还需要统计相同的项出现的次数，可以利用 underscore 的 groupBy 函数

superagent.get('https://api.github.com/users/pennyjs/starred').then((response) => {
  const languages = _.groupBy(response.body.map((item) => {
    return item.language
  }))

  Object.keys(languages).map((item) => {
    return {
      name: item,
      count: languages[item].length
    }
  })
}).catch((error) => {})

现在数据变成 13 项的数组，但其中有一项是

{
  name: 'null',
  count: 1
}

需要过滤掉这一项

superagent.get('https://api.github.com/users/pennyjs/starred').then((response) => {
  const languages = _.groupBy(response.body.map((item) => {
    return item.language
  }))

  Object.keys(languages).map((item) => {
    return {
      name: item,
      count: languages[item].length
    }
  }).filter((item) => {
    return item.name !== 'null'
  })
}).catch((error) => {})

最后的数据用 JSON 表示的话是这样的

[
  {
    "name": "Kotlin",
    "count": 5
  },
  {
    "name": "C",
    "count": 1
  },
  {
    "name": "JavaScript",
    "count": 5
  },
  {
    "name": "Swift",
    "count": 4
  },
  {
    "name": "Ruby",
    "count": 3
  },
  {
    "name": "Objective-C",
    "count": 1
  },
  {
    "name": "Java",
    "count": 4
  },
  {
    "name": "Go",
    "count": 2
  },
  {
    "name": "HTML",
    "count": 1
  },
  {
    "name": "Python",
    "count": 1
  },
  {
    "name": "CSS",
    "count": 1
  },
  {
    "name": "Shell",
    "count": 1
  }
]

[joephon]

cool