You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte

96 lines
1.7 KiB

<script>
import { onMount } from 'svelte';
import { scaleLinear } from 'd3-scale';
export let points;
let svg;
let width = 500;
let height = 200;
const padding = { top: 20, right: 40, bottom: 40, left: 25 };
$: xScale = scaleLinear()
.domain([0, 20])
.range([padding.left, width - padding.right]);
$: yScale = scaleLinear()
.domain([0, 12])
.range([height - padding.bottom, padding.top]);
$: xTicks = width > 180 ?
[0, 4, 8, 12, 16, 20] :
[0, 10, 20];
$: yTicks = height > 180 ?
[0, 2, 4, 6, 8, 10, 12] :
[0, 4, 8, 12];
onMount(resize);
function resize() {
({ width, height } = svg.getBoundingClientRect());
}
</script>
<svelte:window on:resize='{resize}'/>
<svg bind:this={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>