<script>import { LayerCake, Svg, WebGL, Html } from'layercake';
importScatterWebGLfrom'./_components/Scatter.webgl.svelte';
importAxisXfrom'./_components/AxisX.svelte';
importAxisYfrom'./_components/AxisY.svelte';
importQuadTreefrom'./_components/QuadTree.html.svelte';
// This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for detailsimport data from'./_data/points.csv';
const xKey = 'myX';
const yKey = 'myY';
const r = 3;
const xyPadding = 6;
</script><divclass="chart-container"><LayerCakepadding={{ top: 5, right: 5, bottom: 20, left: 25 }}x={xKey}y={yKey}xPadding={[xyPadding, xyPadding]}yPadding={[xyPadding, xyPadding]}{data}
><Svg><AxisX /><AxisYtickMarks={false}ticks={5} /></Svg><WebGL><ScatterWebGL{r} /></WebGL><Html><QuadTree>{#snippet children({ x, y, visible })}<divclass="circle"style="top:{y}px;left:{x}px;display: {visible ? 'block' : 'none'};"
></div>{/snippet}</QuadTree></Html></LayerCake></div><style>/*
The wrapper div needs to have an explicit width and height in CSS.
It can also be a flexbox child or CSS grid element.
The point being it needs dimensions since the <LayerCake> element will
expand to fill it.
*/.chart-container {
width: 100%;
height: 250px;
}
.circle {
position: absolute;
border-radius: 50%;
background-color: rgba(171, 0, 214);
transform: translate(-50%, -50%);
pointer-events: none;
width: 10px;
height: 10px;
}
</style>
<!--
@component
Generates a a WebGl scatter plot.
--><script>import reglWrapper from'regl';
import { getContext, onMount, untrack } from'svelte';
const { data, xGet, yGet, width, height } = getContext('LayerCake');
/**
* @typedef {Object} Props
* @property {number} [r=5] - The circle's radius.
* @property {string} [fill='#0cf'] - The circle's fill color.
* @property {string} [stroke='#000'] - Not yet implemented
*//** @type {Props} */let { r = 5, fill = '#0cf', stroke = '#000' } = $props();
/**
* @param {string} hex
* @returns {number[]|undefined} - Returns an array of RGB values in the range [0, 1].
*/functionhexToRgbPercent(hex) {
let str = hex.replace('#', '');
if (str.length === 3) {
str = str[0] + str[0] + str[1] + str[1] + str[2] + str[2];
}
return str.match(/.{1,2}/g)?.map(d =>parseInt(d, 16) / 255);
}
const { gl } = getContext('gl');
functionresize() {
if ($gl) {
const canvas = $gl.canvas;
// Lookup the size the browser is displaying the canvas.const displayWidth = canvas.clientWidth;
const displayHeight = canvas.clientHeight;
// Check if the canvas is not the same size.if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
// Make the canvas the same size
canvas.width = displayWidth;
canvas.height = displayHeight;
}
$gl.viewport(0, 0, canvas.width, canvas.height);
}
}
let regl;
functionrender() {
if ($gl) {
regl = reglWrapper({
gl: $gl,
extensions: ['oes_standard_derivatives']
});
regl.clear({
color: [0, 0, 0, 0],
depth: 1
});
const draw = regl({
// circle code comes from:// https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/frag: `
#extension GL_OES_standard_derivatives : enable
precision mediump float;
uniform vec3 fill_color;
uniform vec3 stroke_color;
varying float s_s;
void main () {
vec2 cxy = 2.0 * gl_PointCoord - 1.0;
float dist = dot(cxy, cxy);
float delta = fwidth(dist);
float alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, dist);
float outer_edge_center = 1.0 - s_s;
float stroke = 1.0 - smoothstep(outer_edge_center - delta, outer_edge_center + delta, dist);
// gl_FragColor = vec4(fill_color,1.0) * alpha;
gl_FragColor = vec4( mix(stroke_color, fill_color, stroke), 1.0 ) * alpha;
gl_FragColor.rgb *= gl_FragColor.a;
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute float r;
attribute float stroke_size;
varying float s_s;
uniform float stage_width;
uniform float stage_height;
// http://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html
vec2 normalizeCoords(vec2 position) {
// read in the positions into x and y vars
float x = position[0];
float y = position[1];
return vec2(
2.0 * ((x / stage_width) - 0.5),
// invert y to treat [0,0] as bottom left in pixel space
-(2.0 * ((y / stage_height) - 0.5))
);
}
void main () {
s_s = stroke_size;
gl_PointSize = r;
gl_Position = vec4(normalizeCoords(position), 0.0, 1.0);
}`,
attributes: {
/**
* @param {any} context
* @param {{ points: Array<any>, pointWidth?: number }} props
*/// There will be a position value for each point// we pass inposition: (context, props) => {
return props.points.map(point => {
return [$xGet(point), $yGet(point)];
});
},
r: (context, props) => {
// const m = window.devicePixelRatio > 1 ? 4.0 : 2.0// If using an r-scale, set width herereturn props.points.map(p => props.pointWidth);
},
stroke_size: (context, props) => {
// If using an r-scale, set that herereturn props.points.map(p =>0);
}
},
uniforms: {
fill_color: hexToRgbPercent(fill),
// stroke_color: [0.6705882352941176, 0, 0.8392156862745098],stroke_color: hexToRgbPercent(stroke),
// FYI: there is a helper method for grabbing// values out of the context as well.// These uniforms are used in our fragment shader to// convert our x / y values to WebGL coordinate space.stage_width: regl.context('drawingBufferWidth'),
stage_height: regl.context('drawingBufferHeight')
},
count: (context, props) => {
// set the count based on the number of points we havereturn props.points.length;
},
primitive: 'points',
blend: {
enable: true,
func: {
srcRGB: 'src alpha',
srcAlpha: 'src alpha',
dstRGB: 'one minus src alpha',
dstAlpha: 'one minus src alpha'
}
},
depth: { enable: false }
});
draw({
pointWidth: r * 2,
points: $data
});
}
}
onMount(() => {
$effect(() => {
if ($width && $height) {
untrack(() => {
resize();
render();
});
}
});
});
</script>
<!--
@component
Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
--><script>import { getContext } from'svelte';
const { width, height, xScale, yRange } = getContext('LayerCake');
/**
* @typedef {Object} Props
* @property {boolean} [tickMarks=false] - Show a vertical mark for each tick.
* @property {boolean} [gridlines=true] - Show gridlines extending into the chart area.
* @property {number} [tickMarkLength=6] - The length of the tick mark.
* @property {boolean} [baseline=false] - Show a solid line at the bottom.
* @property {boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart.
* @property {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return.
* @property {number|Array<any>|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.
* @property {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min).
* @property {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label.
* @property {number} [dy=12] - Any optional value passed to the `dy` attribute on the text label.
*//** @type {Props} */let {
tickMarks = false,
gridlines = true,
tickMarkLength = 6,
baseline = false,
snapLabels = false,
format = d => d,
ticks = undefined,
tickGutter = 0,
dx = 0,
dy = 12
} = $props();
/** @param {number} i
* @param {boolean} sl */functiontextAnchor(i, sl) {
if (sl === true) {
if (i === 0) {
return'start';
}
if (i === tickVals.length - 1) {
return'end';
}
}
return'middle';
}
let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
/** @type {Array<any>} */let tickVals = $derived(
Array.isArray(ticks)
? ticks
: isBandwidth
? $xScale.domain()
: typeof ticks === 'function'
? ticks($xScale.ticks())
: $xScale.ticks(ticks)
);
let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
</script><gclass="axis x-axis"class:snapLabels>{#each tickVals as tick, i (tick)}{#if baseline === true}<lineclass="baseline"y1={$height}y2={$height}x1="0"x2={$width} />{/if}<gclass="tick tick-{i}"transform="translate({$xScale(tick)},{Math.max(...$yRange)})">{#if gridlines === true}<lineclass="gridline"x1={halfBand}x2={halfBand}y1={-$height}y2="0" />{/if}{#if tickMarks === true}<lineclass="tick-mark"x1={halfBand}x2={halfBand}y1={tickGutter}y2={tickGutter + tickLen}
/>{/if}<textx={halfBand}y={tickGutter + tickLen}{dx}{dy}text-anchor={textAnchor(i, snapLabels)}
>{format(tick)}</text
>
</g>{/each}</g><style>.tick {
font-size: 11px;
}
line,
.tickline {
stroke: #aaa;
stroke-dasharray: 2;
}
.ticktext {
fill: #666;
}
.tick.tick-mark,
.baseline {
stroke-dasharray: 0;
}
/* This looks slightly better */.axis.snapLabels.tick:last-childtext {
transform: translateX(3px);
}
.axis.snapLabels.tick.tick-0text {
transform: translateX(-3px);
}
</style>
<!--
@component
Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
--><script>import { getContext } from'svelte';
const { xRange, yScale, width } = getContext('LayerCake');
/**
* @typedef {Object} Props
* @property {boolean} [tickMarks=false] - Show marks next to the tick label.
* @property {string} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'.
* @property {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark.
* @property {boolean} [gridlines=true] - Show gridlines extending into the chart area.
* @property {number} [tickMarkLength] - The length of the tick mark. If not set, becomes the length of the widest tick.
* @property {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return.
* @property {number|Array<any>|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.
* @property {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min).
* @property {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label.
* @property {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label.
* @property {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value).
*//** @type {Props} */let {
tickMarks = false,
labelPosition = 'even',
snapBaselineLabel = false,
gridlines = true,
tickMarkLength = undefined,
format = d => d,
ticks = 4,
tickGutter = 0,
dx = 0,
dy = 0,
charPixelWidth = 7.25
} = $props();
/** @param {number} sum
* @param {string} val */functioncalcStringLength(sum, val) {
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
return sum + charPixelWidth;
}
let isBandwidth = $derived(typeof $yScale.bandwidth === 'function');
/** @type {Array<any>} */let tickVals = $derived(
Array.isArray(ticks)
? ticks
: isBandwidth
? $yScale.domain()
: typeof ticks === 'function'
? ticks($yScale.ticks())
: $yScale.ticks(ticks)
);
let widestTickLen = $derived(
Math.max(
10,
Math.max(...tickVals.map(d =>format(d).toString().split('').reduce(calcStringLength, 0)))
)
);
let tickLen = $derived(
tickMarks === true
? labelPosition === 'above'
? (tickMarkLength ?? widestTickLen)
: (tickMarkLength ?? 6)
: 0
);
let x1 = $derived(-tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen));
let y = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
let maxTickValPx = $derived(Math.max(...tickVals.map($yScale)));
</script><gclass="axis y-axis">{#each tickVals astick (tick)}{@const tickValPx = $yScale(tick)}<gclass="tick tick-{tick}"transform="translate({$xRange[0]}, {tickValPx})">{#if gridlines === true}<lineclass="gridline"{x1}x2={$width}y1={y}y2={y}></line>{/if}{#if tickMarks === true}<lineclass="tick-mark"{x1}x2={x1 + tickLen}y1={y}y2={y}></line>{/if}<textx={x1}{y}dx={dx + (labelPosition === 'even' ? -3 : 0)}text-anchor={labelPosition === 'above' ? 'start' : 'end'}dy={dy +
(labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx)
? -3
: 4)}>{format(tick)}</text
>
</g>{/each}</g><style>.tick {
font-size: 11px;
}
.tickline {
stroke: #aaa;
}
.tick.gridline {
stroke-dasharray: 2;
}
.ticktext {
fill: #666;
}
.tick.tick-0line {
stroke-dasharray: 0;
}
</style>
<!--
@component
Creates an interaction layer (in HTML) using [d3-quadtree](https://github.com/d3/d3-quadtree) to find the nearest datapoint to the mouse. This component creates a snippet that exposes variables `x`, `y`, `found` (the found datapoint), `visible` (a Boolean whether any data was found) and `e` (the event object).
The quadtree searches across both the x and y dimensions at the same time. But if you want to only search across one, set the `x` and `y` props to the same value. For example, the [shared tooltip component](https://layercake.graphics/components/SharedTooltip.html.svelte) sets `y='x'` since it's nicer behavior to only pick up on the nearest x-value.
--><script>import { getContext } from'svelte';
import { quadtree } from'd3-quadtree';
const { data, xGet, yGet, width, height } = getContext('LayerCake');
let visible = $state(false);
let found = $state({});
let e = $state({});
/**
* @typedef {Object} Props
* @property {string} [x='x'] - The dimension to search across when moving the mouse left and right.
* @property {string} [y='y'] - The dimension to search across when moving the mouse up and down.
* @property {number|undefined} [searchRadius] - The number of pixels to search around the mouse's location. This is the third argument passed to [`quadtree.find`](https://github.com/d3/d3-quadtree#quadtree_find) and by default a value of `undefined` means an unlimited range.
* @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass override the default here in here in case you don't want to use the main data or it's in a strange format.
* @property {import('svelte').Snippet<[any]>} [children]
*//** @type {Props} */let { x = 'x', y = 'y', searchRadius, dataset, children } = $props();
let xGetter = $derived(x === 'x' ? $xGet : $yGet);
let yGetter = $derived(y === 'y' ? $yGet : $xGet);
/** @param {MouseEvent} evt */functionfindItem(evt) {
e = evt;
const xLayerKey = /** @type {'layerX'|'layerY'} */ (`layer${x.toUpperCase()}`);
const yLayerKey = /** @type {'layerX'|'layerY'}*/ (`layer${y.toUpperCase()}`);
found = finder.find(evt[xLayerKey], evt[yLayerKey], searchRadius) || {};
visible = Object.keys(found).length > 0;
}
let finder = $derived(
quadtree()
.extent([
[-1, -1],
[$width + 1, $height + 1]
])
.x(xGetter)
.y(yGetter)
.addAll(dataset || $data)
);
</script><divclass="bg"onmousemove={findItem}onmouseout={() => (visible = false)}onblur={() => (visible = false)}role="tooltip"
></div>{@render children?.({ x: xGetter(found) || 0, y: yGetter(found) || 0, found, visible, e })}<style>.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>