kristw / encodable Goto Github PK
View Code? Open in Web Editor NEWConfigurable grammar for visualization components
Home Page: https://encodable.vercel.app
License: Apache License 2.0
Configurable grammar for visualization components
Home Page: https://encodable.vercel.app
License: Apache License 2.0
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.