svelte/site/content/examples/scatterplot/Scatterplot.html

<script>
	// TODO this example needs updating
	import { onMount } from 'svelte';
	import { scaleLinear } from 'd3-scale';

	export let svg;

	const xScale = scaleLinear();
	const yScale = scaleLinear();

	export let width = 500;
	export let height = 200;
	export let padding = { top: 20, right: 40, bottom: 40, left: 25 };
	export let points;
	export let xTicks = [0, 4, 8, 12, 16, 20];
	export let yTicks = [0, 2, 4, 6, 8, 10, 12];

	function xTicks() {
		return width > 180 ?
			[0, 4, 8, 12, 16, 20] :
			[0, 10, 20];
	}

	function yTicks() {
		return height > 180 ?
			[0, 2, 4, 6, 8, 10, 12] :
			[0, 4, 8, 12];
	}

	function xScale() {
		return xScale()
			.domain([0, 20])
			.range([padding.left, width - padding.right]);
	}

	function yScale() {
		return yScale()
			.domain([0, 12])
			.range([height - padding.bottom, padding.top]);
	}

	onMount(() => {
		resize();
	});

	function resize() {
		const { width, height } = svg.getBoundingClientRect();
		width = width, height = height;
	}
</script>

<svelte:window on:resize='{resize}'/>

<svg ref:svg>
	<!-- y axis -->
	<g class='axis y-axis'>
		{#each yTicks as tick}
			<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick)})'>
				<line x1='{padding.left}' x2='{xScale()(22)}'/>
				<text x='{padding.left - 8}' y='+4'>{tick}</text>
			</g>
		{/each}
	</g>

	<!-- x axis -->
	<g class='axis x-axis'>
		{#each xTicks as tick}
			<g class='tick' transform='translate({xScale()(tick)},0)'>
				<line y1='{yScale()(0)}' y2='{yScale()(13)}'/>
				<text y='{height - padding.bottom + 16}'>{tick}</text>
			</g>
		{/each}
	</g>

	<!-- data -->
	{#each points as point}
		<circle cx='{xScale()(point.x)}' cy='{yScale()(point.y)}' r='5'/>
	{/each}
</svg>

<style>
	svg {
		width: 50%;
		height: 50%;
		float: left;
	}

	circle {
		fill: orange;
		fill-opacity: 0.6;
		stroke: rgba(0,0,0,0.5);
	}

	.tick line {
		stroke: #ddd;
		stroke-dasharray: 2;
	}

	text {
		font-size: 12px;
		fill: #999;
	}

	.x-axis text {
		text-anchor: middle;
	}

	.y-axis text {
		text-anchor: end;
	}
</style>