Code Monkey home page Code Monkey logo

encodable's Introduction

๐ŸŽญ encodable

Codecov branch GitHub Workflow Status David

tl;dr. When you have a visualization component, this library helps you defines the visual channels that you can encode data into and provide API similar to vega-lite's grammar for consumers to customize the visual encoding.

Install

npm install encodable global-box

Documentation

See documentation and more examples here.

Example

Preview

Edit encodable Demo

more demo...

License

Apache-2.0

encodable's People

Contributors

dependabot[bot] avatar domoritz avatar kristw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

encodable's Issues

Optional channel encoding

First of all, thanks for the library! It's a really neat idea.

I am wondering, is it possible to define optional encodings? Say for instance, you want to build a bar chart and optionally want to allow the encoding for error bars.

I believe encodable currently always requires a default encoding. Without it one runs into some errors. I think a way around it is by marking certain encodings as optional in the config type and setting the default value to something special but that feels very hacky. Is there another way to define an optional encoding or would you be interested in adding this feature in the future? I am happy to take a stab at it.

Support for multi-hue color maps

Is your feature request related to a problem? Please describe.
While @encodable/color exposes all D3 color maps, the main library is not using the interpolator with scaleSequential. Instead scaleLinear is used with a range of the scheme colors. However, this effectively results in a linear scale between the first two colors of the scheme only. Sequential multi-hue color scales are thus not supported.

Describe the solution you'd like
My understanding is that we'd have to extend encodable's createScale():

function createScale<Output extends DefaultOutput>(config: ScaleConfig<Output>) {
  const { range } = config;

  // Handle categorical color scales
  // An ordinal scale without specified range
  // is assumed to be a color scale.
  if (config.type === ScaleType.ORDINAL && typeof range === 'undefined') {
    const scheme = 'scheme' in config ? config.scheme : undefined;
    const resolve = Encodable.getCategoricalColorScaleResolver();

    let colorScale: ScaleOrdinal<StringLike, string>;
    if (typeof scheme === 'undefined') {
      colorScale = resolve({});
    } else if (isSchemeParams(scheme)) {
      colorScale = resolve(scheme);
    } else {
      colorScale = resolve({ name: scheme });
    }

    const castedColorScale = (colorScale as unknown) as ScaleOrdinal<StringLike, Output>;
    applyDomain(config, castedColorScale);

    return castedColorScale;
  }

  // Handle sequential color scales
  if (config.type === ScaleType.SEQUENTIAL && config?.scheme && isSchemeParams(config?.scheme)) {
    const scheme = config.scheme;

    let count = isContinuousScaleConfig(config) && domain
      ? domain.length
      : scheme.count || 2;

    let extent = scheme.extent
      ? scheme.extent
      : [0, 1];

    const schemeObject = Encodable.resolveColorScheme({
      name: scheme.name,
      type: ScaleType.SEQUENTIAL
    });

    if (typeof schemeObject !== 'undefined' && schemeObject.type === ScaleType.SEQUENTIAL) {
      const wrappedScheme = wrapColorScheme(schemeObject);
      const colors = wrappedScheme.getColors(count, extent) as Output[];
      const interpolator = piecewise(interpolateRgb, colors);
      const colorScale = (scaleSequential(interpolator) as unknown) as ScaleLinear<string, string>;

      applyDomain(config, colorScale);

      return colorScale;
    } 
  }

  const scale = createScaleFromScaleType<Output>(config.type);

  return updateScale(scale, config);
}

I probably missed a few aspects here but I am happy to give this a shot if you accept PRs.

Describe alternatives you've considered
Alternatively, we could probably extend createScaleFromScaleType() to support scaleSequential via ScaleType like VegaLite. However, I don't think encodable supports applying interpolators anywhere so it might be easier to do the above route.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.