How to use the @vx/scale.scaleBand function in @vx/scale
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.
hshoff / vx / packages / vx-demo / components / tiles / bargroup.js View on Github 
}
}) => {
if (width < 10) return null;
// bounds
const xMax = width;
const yMax = height - margin.top - 100;
// // scales
const x0Scale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(x0),
padding: 0.2,
tickFormat: () => val => formatDate(val)
});
const x1Scale = scaleBand({
rangeRound: [0, x0Scale.bandwidth()],
domain: keys,
padding: 0.1
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
domain: [
0,
max(data, d => {
return max(keys, key => d[key]);
})
]
});
const zScale = scaleOrdinal({
domain: keys,
range: ['#aeeef8', '#e5fd3d', '#9caff6']},
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip
}) => {
if (width < 10) return null;
// bounds
const xMax = width;
const yMax = height - margin.top - 100;
// // scales
const xScale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(x),
padding: 0.2,
tickFormat: () => val => formatDate(val)
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
nice: true,
domain: [0, max(totals)]
});
const zScale = scaleOrdinal({
domain: keys,
range: ['#6c5efb', '#c998ff', '#a44afe']
});
let tooltipTimeout;export default ({ width, height, events = false }) => {
if (width < 10) return null;
// bounds
const xMax = width;
const yMax = height - 120;
// scales
const xScale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(x),
padding: 0.4
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
domain: [0, max(data, y)]
});
return (
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="{`url(#teal)`}" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
{data.map((d, i) => {
const datum = { x: x(d), y: y(d) };
</svg>// accessors
const y = d => d.date;
const x = d => d.value;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// // scales
const xScale = scaleLinear({
rangeRound: [0, xMax],
domain: [0, max(totals)],
nice: true
});
const yScale = scaleBand({
rangeRound: [yMax, 0],
domain: data.map(y),
padding: 0.2,
tickFormat: () => val => formatDate(val)
});
const zScale = scaleOrdinal({
domain: keys,
range: ['#6c5efb', '#c998ff', '#a44afe']
});
let tooltipTimeout;
return (
<div style="{{">
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#eaedff" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
</svg></div>tooltipData,
showTooltip
}) => {
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const points = entityIds
.map((d: string) => entityDiscoveryTimes[d].map(date => [d, date]))
.flatMap(x => x) as [string, DateTime][];
const xScale = scaleTime({
range: [0, xMax],
domain: [minDate.toJSDate(), maxDate.toJSDate()]
});
const yScale = scaleBand({
range: [yMax, 0],
domain: entityIds.slice().reverse(), // Need to reverse (without mutation) to get in the right order
padding: 0.2
});
const onDeviceNameClick = (entityName: string | number | undefined) => () => {
const entityId = Object.keys(entityIdNameMap).reduce(
(acc: undefined | string, currentEntityId) => {
return acc !== undefined
? acc
: entityIdNameMap[currentEntityId] === entityName
? currentEntityId
: undefined;
},
undefined
);}) => {
if (width < 10) return null;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - 100;
// // scales
const y0Scale = scaleBand({
rangeRound: [0, yMax],
domain: data.map(y0),
padding: 0.2,
tickFormat: () => val => formatDate(val)
});
const y1Scale = scaleBand({
rangeRound: [0, y0Scale.bandwidth()],
domain: keys,
padding: 0.1
});
const xScale = scaleLinear({
rangeRound: [xMax, 0],
domain: [
0,
max(data, d => {
return max(keys, key => d[key]);
})
]
});
const zScale = scaleOrdinal({data,
x,
y,
xFormat,
yFormat,
xAxisLabel,
yAxisLabel,
yLabelOffset,
numTicksX,
color,
margin
}) => {
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const yScale = scaleBand({
rangeRound: [0, yMax],
domain: data.map(y),
padding: 0.2
});
const xScale = scaleLinear({
rangeRound: [0, xMax],
domain: [0, max(data, x)]
});
return (handleMouseLeave,
data,
x,
y,
xFormat,
yFormat,
xAxisLabel,
yAxisLabel,
numTicksY,
color,
margin
}) => {
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const xScale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(d => x(d)),
padding: 0.2
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
domain: [0, max(data, y)]
});
return (colors,
margin
}) => {
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const colorScale = scaleOrdinal({
domain: keys,
range: colors
});
const x0Scale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(x),
padding: 0.2
});
const x1Scale = scaleBand({
rangeRound: [0, x0Scale.bandwidth()],
domain: keys,
padding: 0.1
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
domain: [
0,
max(data, d => {
return max(keys, key => d[key]);
})
]
});
return (fill: 'rgb(229, 253, 61)',
rotate: 45,
},
{
sides: 6,
fill: 'rgb(229, 130, 255)',
rotate: 0,
},
{
sides: 8,
fill: 'url(#polygon-pink)',
rotate: 0,
},
];
const yScale = scaleBand({
domain: polygons.map((p, i) => i),
padding: 0.5,
});
export default ({ width, height }) => {
yScale.rangeRound([0, height]);
return (
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#7f82e3" height="{height}" width="{width}"></rect>
{polygons.map((polygon, i) => (
<polygon rotate="{polygon.rotate}" fill="{polygon.fill}" size="{25}"></polygon>
))}
</svg>
