<script>
import { scaleLinear, scaleBand } from 'd3-scale';
import { slide } from 'svelte/transition';
let points = [
{ id: 1, year: 1990, birthrate: 16.7 },
{ id: 2, year: 1995, birthrate: 14.6 },
{ id: 3, year: 2000, birthrate: 14.4 },
{ id: 4, year: 2005, birthrate: 14 },
{ id: 5, year: 2010, birthrate: 13 },
{ id: 6, year: 2015, birthrate: 12.4 }
];
$: years = points.map(d => d.year)
const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
const yTicks = [0, 5, 10, 15, 20];
const padding = { top: 20, right: 15, bottom: 20, left: 25 };
let width = 500;
let height = 200;
function formatMobile(tick) {
return "'" + tick.toString().slice(-2);
}
function updateData() {
points = points.map(d => ({ ...d, birthrate: d.year > 2000 ? d.birthrate : 0 }))
const timeout = setTimeout(() => {
points = points.filter(d => d.year > 2000)
}, 1000)
}
$: xScale = scaleBand()
.domain(years)
.range([padding.left, width - padding.right])