<script>
import { onMount } from "svelte";
import * as d3 from "d3";
let data = [];
let svg;
// Load data reactively when the component mounts
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
})
);
});
// Chart dimensions
const width = 650;
const height = 300;
const padding = 60;
const maxDiff = 1000 * 60 * 60 * 24 * 30;
// Scales
$: xScale = d3.scaleTime().domain(d3.extent(data, (d) => d.date)).range([0, width]);
$: yScale = d3.scaleLinear().domain([0, d3.max(data, (d) => d.price)]).nice().range([height, 0]);
$: colorScale = d3.scaleOrdinal()
.domain(["AAPL", "AMZN", "GOOG", "IBM", "MSFT"])
.range(["#7a99ac", "#d4945d", "#c27c7c", "#a7c4ce", "#6ca06c"]);
$: line = d3.line().x((d) => xScale(d.date)).y((d) => yScale(d.price));
// Group the data by symbol