How to use @vx/scale - 10 common examples
To help you get started, we’ve selected a few @vx/scale examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
williaster / data-ui / packages / event-flow / src / utils / scale-utils.js View on Github 
array.forEach(d => {
const key = accessor(d);
if (key) {
names[key] = true;
}
});
// sort to make color assignment deterministic
const sortedNames = Object.keys(names).sort();
if (sortedNames.length > colors.categories.length) {
console.warn(
`Unique color values ${sortedNames.length} exceeds the number of unique colors
(${colors.categories.length}). Consider filtering event types.`,
);
}
return scaleOrdinal({
range: [`url(#${FILTERED_EVENTS})`, ...colors.categories],
domain: [FILTERED_EVENTS, ...sortedNames],
});
}const stock = appleStock;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// accessors
const xStock = d => new Date(d.date);
const yStock = d => d.close;
// scales
const xStockScale = scaleTime({
range: [0, xMax],
domain: extent(stock, xStock),
});
const yStockScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(stock, yStock)],
nice: true,
});
return (
<svg width="{width}" height="{height}">
</svg>}
const brushMargin = { top: 0, bottom: 20, left: 50, right: 20 };
// bounds
const xMax = Math.max(width - margin.left - margin.right, 0);
const yMax = Math.max(height * 0.6 - margin.top - margin.bottom, 0);
const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0);
const yBrushMax = Math.max(120 - brushMargin.top - brushMargin.bottom, 0);
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(filteredStock, xStock),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(filteredStock, yStock) + yMax / 3],
nice: true,
});
const xBrushScale = scaleTime({
range: [0, xBrushMax],
domain: extent(stock, xStock),
});
const yBrushScale = scaleLinear({
range: [yBrushMax, 0],
domain: [0, max(stock, yStock) + yBrushMax / 3],
nice: true,
});
return (
<div></div>focusMargin.bottom;
// data
const data = appleStock;
// accessors
const x = d => new Date(d.date);
const y = d => d.close;
// scales
const xScaleContext = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleContext = scaleLinear({
range: [contextHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const xScaleFocus = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleFocus = scaleLinear({
range: [focusHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const invertX = ({ x, tx, sx }) => (x - tx) / sx;const {tooltipData, tooltipTop, tooltipLeft} = this.state
const x = ([i, j]) => i
const y = ([i, j]) => j
// Bounds
const margin = {
top: 20,
bottom: 60,
left: 80,
right: 20
}
const xMax = width - margin.left - margin.right
const yMax = height - margin.top - margin.bottom
const xScale = scaleLinear({
range: [0, xMax],
domain: extent(data, x)
})
const yScale = scaleLog({
range: [yMax, 1],
domain: [min(data, y), max(data, y)],
base: 10,
nice: true
})
const maxL = 10 ** Math.ceil(Math.log10(max(data, y)))
const minL = 10 ** Math.floor(Math.log10(min(data, y)))
const tNum = Math.ceil(Math.log10(maxL - minL)) + 1
const tValues = Array(tNum).fill().map((_, p) => 10 ** p)// accessors
const x = d => new Date(d.date);
const y = d => d.close;
// scales
const xScaleContext = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleContext = scaleLinear({
range: [contextHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const xScaleFocus = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleFocus = scaleLinear({
range: [focusHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const invertX = ({ x, tx, sx }) => (x - tx) / sx;
class Brush extends React.Component {
constructor(props) {
super(props);
this.state = {export default ({ width, height }) => {
// bounds
const xMax = width;
const yMax = height / 8;
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(data, x),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(data, y)],
});
return (
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#242424" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
{xMax > 8 &&
series.map((datum, i) => {
return (
</svg>export default ({ margin, width, height }) => {
const stock = appleStock;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// accessors
const xStock = d => new Date(d.date);
const yStock = d => d.close;
// scales
const xStockScale = scaleTime({
range: [0, xMax],
domain: extent(stock, xStock),
});
const yStockScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(stock, yStock)],
nice: true,
});
return (
<svg width="{width}" height="{height}">
</svg>height -
contextHeight -
contextMargin.top -
contextMargin.bottom -
focusMargin.top -
focusMargin.bottom;
// data
const data = appleStock;
// accessors
const x = d => new Date(d.date);
const y = d => d.close;
// scales
const xScaleContext = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleContext = scaleLinear({
range: [contextHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const xScaleFocus = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleFocus = scaleLinear({
range: [focusHeight, 0],const xMax = Math.max(width - margin.left - margin.right, 0);
const yMax = Math.max(height * 0.6 - margin.top - margin.bottom, 0);
const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0);
const yBrushMax = Math.max(120 - brushMargin.top - brushMargin.bottom, 0);
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(filteredStock, xStock),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(filteredStock, yStock) + yMax / 3],
nice: true,
});
const xBrushScale = scaleTime({
range: [0, xBrushMax],
domain: extent(stock, xStock),
});
const yBrushScale = scaleLinear({
range: [yBrushMax, 0],
domain: [0, max(stock, yStock) + yBrushMax / 3],
nice: true,
});
return (
<div>
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#32deaa" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
</svg></div>
