<script>
import { onMount } from "svelte";
import * as d3 from "d3";
onMount(async () => {
// Load the data
const data = await d3.json(
"https://raw.githubusercontent.com/vega/vega-datasets/main/data/cars.json"
);
const width = 300;
const height = 300;
const padding = 50;
const gap = 30;
const rowGap = 50;
// Define axis ranges
const xRanges = {
"Miles_per_Gallon": [0, 50],
"Acceleration": [0, 25],
"Horsepower": [0, 250],
};
const yRanges = {
"Horsepower": [0, 250],
"Acceleration": [0, 25],
"Miles_per_Gallon": [0, 50],
};
// Filter data to exclude points outside the axis range (null values in data)
const filteredData = data.filter(
(d) =>
d.Miles_per_Gallon >= xRanges["Miles_per_Gallon"][0] &&
d.Miles_per_Gallon <= xRanges["Miles_per_Gallon"][1] &&
d.Acceleration >= xRanges["Acceleration"][0] &&
d.Acceleration <= xRanges["Acceleration"][1] &&
d.Horsepower >= yRanges["Horsepower"][0] &&