How to use the @vx/scale.scaleLog 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 / lineradial.js View on Github 
// utils
const extent = (data, value = d => d) => [
Math.min(...data.map(value)),
Math.max(...data.map(value)),
];
// accessors
const date = d => new Date(d.date);
const close = d => d.close;
// scales
const xScale = scaleTime({
range: [0, Math.PI * 2],
domain: extent(appleStock, date),
});
const yScale = scaleLog({
domain: extent(appleStock, close),
});
const angle = d => xScale(date(d));
const radius = d => yScale(close(d));
const firstPoint = appleStock[0];
const lastPoint = appleStock[appleStock.length - 1];
export default ({ width, height }) => {
if (width < 10) return null;
yScale.range([0, height / 2 - 20]);
return (
<svg height="{height}" width="{width}"></svg>// 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)
return (
[<svg viewBox="{`0">
</svg>
