<script>
import {scaleLinear} from '@vx/scale';
import {genRandomNormalPoints} from '@vx/mock-data';
import Group from "@svx/components/src/group/Group.svelte";
import Circle from "@svx/components/src/shape/Circle.svelte";
import GradientPinkRed from "@svx/components/src/gradient/GradientPinkRed.svelte";
export let height = 360;
export let width = 900;
const x = d => d[0];
const y = d => d[1];
const z = d => d[2];
const points = genRandomNormalPoints(600).filter((d, i) => {
return i < 600;
});
let yMax;
let xMax;
let xScale;
let yScale;
$: {
xMax = width;
yMax = height - 100;
xScale = scaleLinear({
domain: [1.3, 2.2],
range: [0, xMax],
clamp: true
});
yScale = scaleLinear({
domain: [0.75, 1.6],
range: [yMax, 0],
clamp: true
});
}
</script>
<svg {width} {height}>
<GradientPinkRed id="teal"/>
<rect {width} {height} fill="url(#teal)" rx="4"/>
<Group top={40}>
{#each points as point, i}
<Circle
r={i % 3 === 0 ? 2 : 2.765}
cx={xScale(x(point))}
cy={yScale(y(point))}
fill="#f6c431"
on:click={() => console.log(point)}
/>
{/each}
</Group>
</svg>