Public
Edited
Sep 27, 2023
Importers
16 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
linear = new AS.Linear({
domain: [0, 1],
range: [0, 10],
tickCount
});
Insert cell
visualizeContinuousScale(linear);
Insert cell
color = new AS.Linear({
domain: [0, width],
range: ['yellow', 'red'],
interploate: AS.createInterpolateColor
})
Insert cell
visualizeColorScale(color)
Insert cell
(color.update({ range: ['rgb(255, 255, 255)', 'rgb(0, 255, 255)'] }),
visualizeColorScale(color))
Insert cell
Insert cell
Insert cell
constant = new AS.Constant({
range:[10],
tickCount,
});
Insert cell
visualizeContinuousScale(constant);
Insert cell
Insert cell
Insert cell
identity = new AS.Identity({
range: [0, 1],
tickCount
});
Insert cell
visualizeContinuousScale(identity);
Insert cell
Insert cell
Insert cell
Insert cell
log = new AS.Log({
domain:[1e-5, 1],
range:[0, 10],
tickCount,
base
});
Insert cell
visualizeContinuousScale(log);
Insert cell
Insert cell
Insert cell
Insert cell
pow = new AS.Pow({
domain: [0, 1],
range: [0, 10],
tickCount,
exponent
});
Insert cell
visualizeContinuousScale(pow);
Insert cell
Insert cell
Insert cell
sqrt = new AS.Sqrt({
tickCount,
domain: [0, 1],
range: [0, 10]
});
Insert cell
visualizeContinuousScale(sqrt);
Insert cell
Insert cell
Insert cell
time = new AS.Time({
tickCount,
range: [0, 10],
domain: [new Date(2000, 0, 1), new Date(2000, 0, 2)],
});
Insert cell
visualizeContinuousScale(time);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colors0 = ['#ebedf0', '#9be9a9', '#41c464', '#31a14e', '#216d39'];
Insert cell
Insert cell
Insert cell
Insert cell
threshold = new AS.Threshold({
domain: [400, 800, 1200, 1600],
range: colors0
});
Insert cell
visualizeDistributionScale(threshold, numbers, row, col);
Insert cell
visualizeDistributionScale(threshold, [...numbers].sort((a, b) => a - b), row, col);
Insert cell
Insert cell
Insert cell
quantize = new AS.Quantize({
domain: extent,
range: colors0
});
Insert cell
visualizeDistributionScale(quantize, numbers, row, col);
Insert cell
visualizeDistributionScale(quantize, [...numbers].sort((a, b) => a - b), row, col);
Insert cell
Insert cell
Insert cell
quantile = new AS.Quantile({
domain: numbers,
range: colors0
});
Insert cell
visualizeDistributionScale(quantile, numbers, row, col);
Insert cell
visualizeDistributionScale(quantile, [...numbers].sort((a, b) => a - b), row, col);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
q = new AS.Quantile({
domain:[0, 1, 2, 3, 6, 7, 8, 9, 10],
tickMethod: AS.d3Ticks
});
Insert cell
q.getTicks()
Insert cell
category = new AS.Ordinal({
domain: chars,
range: colors1
});
Insert cell
visualizeDiscreteScale(category);
Insert cell
Insert cell
md `Ordinal scales will sort input domain before mapping based on the specified *compare* option. They are useful for encoding oridnal data into colors.`
Insert cell
ordinal = new AS.Ordinal({
domain: ["苹果", "香蕉", "梨子", "西瓜"],
range: ["red", "yellow", "green"],
compare: (a, b) => a.codePointAt(0) - b.codePointAt(0)
})
Insert cell
visualizeDiscreteScale(ordinal);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
band = new AS.Band({
domain: chars,
range: [0, width],
paddingInner,
paddingOuter,
align
});
Insert cell
visualizeBand(band);
Insert cell
Insert cell
Insert cell
band1 = new AS.Band({
domain: chars,
range: [0, width],
paddingInner,
paddingOuter,
padding
});
Insert cell
visualizeBand(band1);
Insert cell
Insert cell
band2 = new AS.Band({
domain: chars,
range: [0, width],
paddingInner,
paddingOuter,
compare: (a, b) => a.codePointAt(0) - b.codePointAt(0)
});
Insert cell
visualizeBand(band2);
Insert cell
Insert cell
Insert cell
Insert cell
point = new AS.Point({
domain: chars,
range: [0, width],
padding: padding2,
});
Insert cell
visualizeBand(point);
Insert cell
Insert cell
point2 = new AS.Point({
domain: chars,
range: [0, width],
padding: padding2,
compare: (a, b) => a.codePointAt(0) - b.codePointAt(0)
});
Insert cell
visualizeBand(point2);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more