<script>
import { onMount } from "svelte";
import * as d3 from "d3";
let data = [];
let svg, lineChart, yAxis, hoverLine, hoverText, yScale, gridLines;
let width = 650, height = 300, padding = 60;
let selectedDate = null;
onMount(async () => {
data = await d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/refs/heads/main/data/stocks.csv", d => ({
date: d3.timeParse("%b %d %Y")(d.date),
symbol: d.symbol,
price: +d.price
}));
drawChart();
});
function drawChart() {
const xScale = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([padding, width - padding]);
yScale = d3.scaleLinear()
.domain([-2, 2])
.nice()
.range([height - padding, padding]);
const colorScale = d3.scaleOrdinal()
.domain(["AAPL", "AMZN", "GOOG", "IBM", "MSFT"])
.range(["#7a99ac", "#d4945d", "#c27c7c", "#a7c4ce", "#6ca06c"]); // Muted versions
const nestedData = d3.groups(data, d => d.symbol).map(([symbol, values]) => ({
symbol,
values