<script>
import * as Pancake from '@sveltejs/pancake';
import points from './points.js';
</script>
<div class="chart">
<Pancake.Chart x1={1979} x2={2016} y1={0} y2={8}>
<Pancake.Grid horizontal count={5} let:value let:first>
<div class="grid-line horizontal" class:first><span>{value}</span></div>
</Pancake.Grid>
<Pancake.Grid vertical count={10} let:value>
<div class="grid-line vertical"></div>
<span class="year-label">{value}</span>
</Pancake.Grid>
<Pancake.Svg>
<Pancake.SvgScatterplot data={points} x="{d => d.myX}" y="{d => d.myY}" let:d>
<path class="data" {d}/>
</Pancake.SvgScatterplot>
<Pancake.Quadtree data={points} x="{d => d.myX}" y="{d => d.myY}" let:closest>
{#if closest}
<Pancake.SvgPoint x={closest.myX} y={closest.myY} let:d>
<path class="highlight" d={d}/>
</Pancake.SvgPoint>
{/if}
</Pancake.Quadtree>
</Pancake.Svg>
</Pancake.Chart>
</div>
<style>
.chart {
height: 200px;
padding: 3em 0 2em 2em;