The avatar for @antv
AntV
Thinking in data visualization.
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

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more