<script>
import * as d3 from "d3";
let data = [
{ a: "A", b: 28 },
{ a: "B", b: 55 },
{ a: "C", b: 43 },
{ a: "D", b: 91 },
{ a: "E", b: 81 },
{ a: "F", b: 53 },
{ a: "G", b: 19 },
{ a: "H", b: 87 },
{ a: "I", b: 52 }
];
let hovered = null;
let width = 400;
let height = 300;
let margin = { top: 20, right: 20, bottom: 60, left: 60 };
$: xScale = d3
.scaleBand()
.domain(data.map(d => d.a))
.range([margin.left, width - margin.right])
.paddingInner(0.2);
$: yScale = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.b)])
.nice()
.range([height - margin.bottom, margin.top]);
$: yTicks = yScale.ticks();
</script>
<svg