Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: default colours for groups #145

Open
ntthung opened this issue Apr 29, 2019 · 3 comments
Open

Feature request: default colours for groups #145

ntthung opened this issue Apr 29, 2019 · 3 comments

Comments

@ntthung
Copy link

ntthung commented Apr 29, 2019

In the vgg-multi-line example, the groupBy operation was carried out on the colours. In a real life case, users are more likely to group by some sort of ID. The user will then need to write a method to map from IDs to colours. It would be nice to set default colours for groups.

@luucvanderzee
Copy link
Collaborator

luucvanderzee commented May 1, 2019

a method to map from IDs to colours.

So... a (categorical) color scale?

@bianchi-dy
Copy link
Contributor

Hi @ntthung, would you be referring to categorical color scales here? We do have support for those found in d3: Categorical Color Scales, but please elaborate if they're not exactly what you had in mind.

These can be specified the same way you currently specify other color scales like reds:

{ type: 'category10' }

@ntthung
Copy link
Author

ntthung commented May 2, 2019

I realized that I can do :stroke="{ val: row.id, scale: { type: 'category10', domain: 'id' } }". So this is not really a feature request anymore.

But let me explained my thought process. I was looking at this example in vgg-multi-line

<vgg-graphic
  :width="200"
  :height="250"
  :data="{ 
    year: [
      2000, 2005, 2010, 2015,
      2000, 2005, 2010, 2015
    ],
    population: [
      100, 110, 130, 180,
      200, 310, 430, 480
    ],
    color: [
      '#c66366', '#c66366', '#c66366',
      '#c66366', '#008080', '#008080',
      '#008080', '#008080'
    ]
  }">

  <vgg-section
    :x1="25"
    :x2="175"
    :y1="25"
    :y2="225"
    scale-x="year"
    scale-y="population"
    :axes="{
      left: {'tick-count': 4, 'w': 30},
      bottom: {'tick-count': 4}
    }"
  >
    <vgg-data :transform="{ groupBy: 'color' }">
    
      <vgg-map v-slot="{ row }">

        <vgg-multi-line
          :x="row.grouped.year"
          :y="row.grouped.population"
          :stroke="row.color"
        />

      </vgg-map>

    </vgg-data>

  </vgg-section>

</vgg-graphic>

And then I replaced color with id and it didn't work. Of course it didn't work, because IDs are not colours. But I was just thinking of colour as a normal attribute. This is probably because I came from a ggplot background.

So perhaps only the documentation needs to be clarified.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants