Update @vx/scales to be consistent with d3 v5.0.0

trainorpj commented 6 years ago

I was looking through @vx/scale, when I noticed that it's not up-to-date with d3 v5.0.0 (the most current version)

The release notes have these two announcements:

Add d3-scale-chromatic.

Remove d3.schemeCategory20* categorical color schemes. (See note below.) . . D3 now includes new categorical color schemes from ColorBrewer, along with ColorBrewer’s excellent diverging, sequential single-hue and sequential multi-hue color schemes. The twenty-color schemes were removed because their grouped design often falsely implied non-existent relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while the relative lightness can falsely imply order.

Issues that come from this:

vx is not consistent with the latest release of d3
- If someone wanted to learn more about d3-scales page, they'd be confused as to why vx says there are colors, but d3 says otherwise 😢
Images on the @vx/scales readme are broken

Proposed Solution:

Port d3-scale-chromatic to @vx/scales, and update the docs. This won't change the API, i.e.

// old way
import {schemeCategory10} from '@vx/scale'

// new way... it's the same :)
import {schemeCategory10} from '@vx/scale'

Breaking Changes:

For better or for worse (seems like for better) schemeCategory20[b,c] won't work anymore

Thanks for reading 😄

Let me know if you'd like help on this. I'd be happy to submit a PR once this has @hshoff's blessing 🙏

hshoff commented 6 years ago

We should follow d3s lead here and remove the categorical color schemes from @vx/scale altogether. The reasoning makes sense to me:

The twenty-color schemes were removed because their grouped design often falsely implied non-existent relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while the relative lightness can falsely imply order.

Then we can point folks to d3-scale-chromatic and not have to worry about maintaining a wrapper around it.

@vx/scale was made with the plan of eventually making scales play nicer in react land by making them immutable (easier checking in shouldComponentUpdate()). Currently @vx/scale just provides the non-fluent api around d3-scale:

// d3
scaleLiner().domain().range()

// vx
scaleLinear({ domain, range })

Tracking immutable scale progress here: https://github.com/hshoff/vx/issues/170

trainorpj commented 6 years ago

Sounds good. I agree with linking to d3-scale-chromatic. Maybe the readme can include a note on how to make color scales, i.e.

import { ordinal } from '@vx/scale'
import { schemeCategory10 } from 'd3-scale-chromatic'

colorScale = ordinal({
  range: category10
})

I'll work on this. After updating the dependency, most of the work will be in fixing up the readme 📝and fixing tests

airbnb / visx