<script>
import { onMount } from "svelte";
import * as d3 from "d3";
import * as topojson from "topojson-client";
let selectedAirport = null;
let us = null;
let flights = [];
let airports = [];
let width = 900;
let height = 500;
onMount(async () => {
us = await d3.json("https://raw.githubusercontent.com/vega/vega-datasets/main/data/us-10m.json");
flights = await d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/main/data/flights-airport.csv");
airports = await d3.csv(
"https://raw.githubusercontent.com/vega/vega-datasets/main/data/airports.csv",
(d) => ({
iata: d.iata,
name: d.name,
city: d.city,
state: d.state,
country: d.country,
latitude: +d.latitude,
longitude: +d.longitude
})
);
});
$: states = us ? topojson.feature(us, us.objects.states).features : [];
$: filteredAirports =
airports &&
flights &&
airports
.map((airport) => ({
...airport,
routes: flights.filter((f) => f.origin === airport.iata).length
}))
.filter(