Click on the button above the chart to display a map.
You can use ReGraph with Leaflet.js to visualize and analyze geospatial data. When Leaflet is imported to your app, set the chart’s map prop to true.
Nodes are positioned on the map according to the values in the coordinates property.
See also
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import * as L from "leaflet/dist/leaflet";
import { Chart } from "regraph";
import data from "./data";
import "leaflet/dist/leaflet.css";
import "@ci/theme/rg/css/button.css";
import "@ci/theme/rg/css/layout.css";
const layout = { tightness: 2 };
const MAP_BOUNDS = {
nw: [63.911247, -164.971138],
se: [10.976886, -60.016372],
};
export const Demo = () => <Geospatial items={data()} />;
function Geospatial(Props) {
const { items } = Props;
const [map, setMap] = useState(false);
const toggleMap = () => {
setMap(!map);
};
return (
<div className="story">
<div className="options">
<button type="button" onClick={toggleMap}>
Toggle Map
</button>
</div>
<div className="chart-wrapper">
<Chart
items={items}
map={map}
options={{
map: {
leaflet: {
maxZoom: 13,
maxBounds: L.latLngBounds(MAP_BOUNDS.nw, MAP_BOUNDS.se),
maxBoundsViscosity: 1,
},
},
}}
layout={layout}
animation={{ animate: true, time: 650 }}
/>
</div>
</div>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
function data() {
return {
HNL: {
label: [{ text: "HNL", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 21.318681,
lng: -157.922428,
},
},
OGG: {
label: [{ text: "OGG", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 20.89865,
lng: -156.430458,
},
},
DAL: {
label: [{ text: "DAL", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 32.847111,
lng: -96.851778,
},
},
HOU: {
label: [{ text: "HOU", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 29.645419,
lng: -95.278889,
},
},
LAX: {
label: [{ text: "LAX", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 33.942536,
lng: -118.408075,
},
},
SAN: {
label: [{ text: "SAN", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 32.733556,
lng: -117.189667,
},
},
KOA: {
label: [{ text: "KOA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 19.738767,
lng: -156.045631,
},
},
LIH: {
label: [{ text: "LIH", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 21.975983,
lng: -159.338958,
},
},
DFW: {
label: [{ text: "DFW", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 32.896828,
lng: -97.037997,
},
},
ORD: {
label: [{ text: "ORD", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 41.978603,
lng: -87.904842,
},
},
ATL: {
label: [{ text: "ATL", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 33.636719,
lng: -84.428067,
},
},
LGA: {
label: [{ text: "LGA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 40.777245,
lng: -73.872608,
},
},
MCO: {
label: [{ text: "MCO", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 28.429394,
lng: -81.308994,
},
},
MKE: {
label: [{ text: "MKE", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 42.947222,
lng: -87.896583,
},
},
SAT: {
label: [{ text: "SAT", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 29.533694,
lng: -98.469778,
},
},
ANC: {
label: [{ text: "ANC", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 61.174361,
lng: -149.996361,
},
},
SEA: {
label: [{ text: "SEA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 47.449,
lng: -122.309306,
},
},
AUS: {
label: [{ text: "AUS", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 30.194528,
lng: -97.669889,
},
},
ITO: {
label: [{ text: "ITO", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 19.721375,
lng: -155.048469,
},
},
BOS: {
label: [{ text: "BOS", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 42.364347,
lng: -71.005181,
},
},
PHL: {
label: [{ text: "PHL", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 39.871944,
lng: -75.241139,
},
},
FLL: {
label: [{ text: "FLL", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 26.072583,
lng: -80.15275,
},
},
DCA: {
label: [{ text: "DCA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 38.852083,
lng: -77.037722,
},
},
SFO: {
label: [{ text: "SFO", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 37.618972,
lng: -122.374889,
},
},
TPA: {
label: [{ text: "TPA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 27.975472,
lng: -82.53325,
},
},
EWR: {
label: [{ text: "EWR", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 40.6925,
lng: -74.168667,
},
},
OAK: {
label: [{ text: "OAK", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 37.721278,
lng: -122.220722,
},
},
IAH: {
label: [{ text: "IAH", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 29.984433,
lng: -95.341442,
},
},
JFK: {
label: [{ text: "JFK", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 40.639751,
lng: -73.778925,
},
},
MIA: {
label: [{ text: "MIA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 25.79325,
lng: -80.290556,
},
},
BUR: {
label: [{ text: "BUR", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 34.200667,
lng: -118.358667,
},
},
LAS: {
label: [{ text: "LAS", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 36.080056,
lng: -115.15225,
},
},
JAX: {
label: [{ text: "JAX", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 30.494056,
lng: -81.687861,
},
},
RDU: {
label: [{ text: "RDU", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 35.877639,
lng: -78.787472,
},
},
SMF: {
label: [{ text: "SMF", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 38.695417,
lng: -121.590778,
},
},
DEN: {
label: [{ text: "DEN", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 39.861656,
lng: -104.673178,
},
},
MSP: {
label: [{ text: "MSP", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 44.881956,
lng: -93.221767,
},
},
SJC: {
label: [{ text: "SJC", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 37.3626,
lng: -121.929022,
},
},
BWI: {
label: [{ text: "BWI", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 39.175361,
lng: -76.668333,
},
},
PHX: {
label: [{ text: "PHX", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 33.434278,
lng: -112.011583,
},
},
MSY: {
label: [{ text: "MSY", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 29.993389,
lng: -90.258028,
},
},
CLT: {
label: [{ text: "CLT", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 35.214,
lng: -80.943139,
},
},
DTW: {
label: [{ text: "DTW", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 42.212444,
lng: -83.353389,
},
},
RNO: {
label: [{ text: "RNO", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 39.499108,
lng: -119.768108,
},
},
PBI: {
label: [{ text: "PBI", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 26.683161,
lng: -80.095589,
},
},
SNA: {
label: [{ text: "SNA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 33.675667,
lng: -117.868222,
},
},
CHS: {
label: [{ text: "CHS", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 32.898647,
lng: -80.040528,
},
},
BNA: {
label: [{ text: "BNA", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 36.124472,
lng: -86.678194,
},
},
MCI: {
label: [{ text: "MCI", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 39.297606,
lng: -94.713905,
},
},
MDW: {
label: [{ text: "MDW", bold: true, position: "e", fontSize: 40 }],
...style.primary2,
size: 0.4,
coordinates: {
lat: 41.785972,
lng: -87.752417,
},
},
"HNL-OGG-HA": {
id1: "HNL",
id2: "OGG",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "HA", bold: true, color: "#115967" },
color: "#115967",
width: 10,
},
"DAL-HOU-WN": {
id1: "DAL",
id2: "HOU",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 8,
},
"LAX-SAN-OO": {
id1: "LAX",
id2: "SAN",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "OO", bold: true, color: "#8263a0" },
color: "#8263a0",
width: 8,
},
"HNL-KOA-HA": {
id1: "HNL",
id2: "KOA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "HA", bold: true, color: "#115967" },
color: "#115967",
width: 6,
},
"HNL-LIH-HA": {
id1: "HNL",
id2: "LIH",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "HA", bold: true, color: "#115967" },
color: "#115967",
width: 6,
},
"DFW-LAX-AA": {
id1: "DFW",
id2: "LAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 6,
},
"DFW-ORD-AA": {
id1: "DFW",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 5,
},
"ATL-LGA-DL": {
id1: "ATL",
id2: "LGA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 5,
},
"ATL-MCO-DL": {
id1: "ATL",
id2: "MCO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 5,
},
"LGA-ORD-AA": {
id1: "LGA",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 5,
},
"MKE-ORD-OO": {
id1: "MKE",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "OO", bold: true, color: "#8263a0" },
color: "#8263a0",
width: 5,
},
"DFW-SAT-AA": {
id1: "DFW",
id2: "SAT",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 5,
},
"ANC-SEA-AS": {
id1: "ANC",
id2: "SEA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AS", bold: true, color: "#1f405f" },
color: "#1f405f",
width: 4,
},
"AUS-DFW-AA": {
id1: "AUS",
id2: "DFW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 4,
},
"HNL-ITO-HA": {
id1: "HNL",
id2: "ITO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "HA", bold: true, color: "#115967" },
color: "#115967",
width: 4,
},
"BOS-PHL-US": {
id1: "BOS",
id2: "PHL",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 4,
},
"ATL-FLL-DL": {
id1: "ATL",
id2: "FLL",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 4,
},
"BOS-DCA-US": {
id1: "BOS",
id2: "DCA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 4,
},
"ORD-SFO-UA": {
id1: "ORD",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 4,
},
"ATL-DCA-DL": {
id1: "ATL",
id2: "DCA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 4,
},
"DCA-LGA-US": {
id1: "DCA",
id2: "LGA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 4,
},
"LAX-SFO-UA": {
id1: "LAX",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 4,
},
"DFW-LGA-AA": {
id1: "DFW",
id2: "LGA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 4,
},
"ATL-TPA-DL": {
id1: "ATL",
id2: "TPA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 4,
},
"EWR-SFO-UA": {
id1: "EWR",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"LAX-OAK-WN": {
id1: "LAX",
id2: "OAK",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"IAH-LAX-UA": {
id1: "IAH",
id2: "LAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"IAH-ORD-UA": {
id1: "IAH",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"JFK-LAX-AA": {
id1: "JFK",
id2: "LAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 3,
},
"LGA-MIA-AA": {
id1: "LGA",
id2: "MIA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 3,
},
"BUR-OAK-WN": {
id1: "BUR",
id2: "OAK",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"DAL-SAT-WN": {
id1: "DAL",
id2: "SAT",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"LAX-SEA-AS": {
id1: "LAX",
id2: "SEA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AS", bold: true, color: "#1f405f" },
color: "#1f405f",
width: 3,
},
"LAS-SAN-WN": {
id1: "LAS",
id2: "SAN",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"DFW-LAS-AA": {
id1: "DFW",
id2: "LAS",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 3,
},
"BOS-LGA-US": {
id1: "BOS",
id2: "LGA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 3,
},
"ATL-JAX-DL": {
id1: "ATL",
id2: "JAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"ATL-RDU-DL": {
id1: "ATL",
id2: "RDU",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"LAX-SMF-OO": {
id1: "LAX",
id2: "SMF",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "OO", bold: true, color: "#8263a0" },
color: "#8263a0",
width: 3,
},
"EWR-LAX-UA": {
id1: "EWR",
id2: "LAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"DEN-IAH-UA": {
id1: "DEN",
id2: "IAH",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"DFW-MIA-AA": {
id1: "DFW",
id2: "MIA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 3,
},
"ATL-DFW-DL": {
id1: "ATL",
id2: "DFW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"OAK-SAN-WN": {
id1: "OAK",
id2: "SAN",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"ATL-MIA-DL": {
id1: "ATL",
id2: "MIA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"ATL-MSP-DL": {
id1: "ATL",
id2: "MSP",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"LAS-LAX-WN": {
id1: "LAS",
id2: "LAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"ATL-BOS-DL": {
id1: "ATL",
id2: "BOS",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"LAX-ORD-UA": {
id1: "LAX",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"EWR-ORD-UA": {
id1: "EWR",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"DFW-SFO-AA": {
id1: "DFW",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 3,
},
"EWR-IAH-UA": {
id1: "EWR",
id2: "IAH",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 3,
},
"AUS-DAL-WN": {
id1: "AUS",
id2: "DAL",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"LAX-SJC-OO": {
id1: "LAX",
id2: "SJC",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "OO", bold: true, color: "#8263a0" },
color: "#8263a0",
width: 3,
},
"ATL-BWI-DL": {
id1: "ATL",
id2: "BWI",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"LAS-PHX-WN": {
id1: "LAS",
id2: "PHX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 3,
},
"ATL-MSY-DL": {
id1: "ATL",
id2: "MSY",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"ATL-PHL-DL": {
id1: "ATL",
id2: "PHL",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 3,
},
"ATL-CLT-DL": {
id1: "ATL",
id2: "CLT",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"ATL-LAX-DL": {
id1: "ATL",
id2: "LAX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"PHX-SAN-WN": {
id1: "PHX",
id2: "SAN",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"DFW-MCO-AA": {
id1: "DFW",
id2: "MCO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"ATL-DTW-DL": {
id1: "ATL",
id2: "DTW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"ATL-EWR-DL": {
id1: "ATL",
id2: "EWR",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"DCA-DFW-AA": {
id1: "DCA",
id2: "DFW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"ATL-ORD-DL": {
id1: "ATL",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"IAH-SFO-UA": {
id1: "IAH",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 2,
},
"DEN-DFW-AA": {
id1: "DEN",
id2: "DFW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"LAX-SJC-WN": {
id1: "LAX",
id2: "SJC",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"LAS-RNO-WN": {
id1: "LAS",
id2: "RNO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"CLT-LGA-US": {
id1: "CLT",
id2: "LGA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 2,
},
"LAX-PHX-OO": {
id1: "LAX",
id2: "PHX",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "OO", bold: true, color: "#8263a0" },
color: "#8263a0",
width: 2,
},
"DEN-ORD-UA": {
id1: "DEN",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 2,
},
"MIA-ORD-AA": {
id1: "MIA",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"LAX-ORD-AA": {
id1: "LAX",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"BOS-ORD-AA": {
id1: "BOS",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"ATL-PBI-DL": {
id1: "ATL",
id2: "PBI",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"BOS-DCA-B6": {
id1: "BOS",
id2: "DCA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "B6", bold: true, color: "#9e4817" },
color: "#9e4817",
width: 2,
},
"ATL-DFW-AA": {
id1: "ATL",
id2: "DFW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"DEN-SFO-UA": {
id1: "DEN",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 2,
},
"BUR-LAS-WN": {
id1: "BUR",
id2: "LAS",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"LAX-SFO-WN": {
id1: "LAX",
id2: "SFO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"DFW-SNA-AA": {
id1: "DFW",
id2: "SNA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"HOU-MSY-WN": {
id1: "HOU",
id2: "MSY",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"LGA-ORD-UA": {
id1: "LGA",
id2: "ORD",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 2,
},
"ATL-CHS-DL": {
id1: "ATL",
id2: "CHS",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"JFK-MCO-B6": {
id1: "JFK",
id2: "MCO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "B6", bold: true, color: "#9e4817" },
color: "#9e4817",
width: 2,
},
"SAN-SJC-WN": {
id1: "SAN",
id2: "SJC",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"DFW-SAN-AA": {
id1: "DFW",
id2: "SAN",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"CLT-PHL-US": {
id1: "CLT",
id2: "PHL",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 2,
},
"CLT-EWR-US": {
id1: "CLT",
id2: "EWR",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 2,
},
"EWR-MCO-UA": {
id1: "EWR",
id2: "MCO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "UA", bold: true, color: "#808080" },
color: "#808080",
width: 2,
},
"BOS-CLT-US": {
id1: "BOS",
id2: "CLT",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 2,
},
"CLT-MCO-US": {
id1: "CLT",
id2: "MCO",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "US", bold: true, color: "#404040" },
color: "#404040",
width: 2,
},
"ATL-BNA-DL": {
id1: "ATL",
id2: "BNA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "DL", bold: true, color: "#ff9651" },
color: "#ff9651",
width: 2,
},
"MCI-MDW-WN": {
id1: "MCI",
id2: "MDW",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"MCO-MIA-AA": {
id1: "MCO",
id2: "MIA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"BWI-FLL-WN": {
id1: "BWI",
id2: "FLL",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
"DCA-MIA-AA": {
id1: "DCA",
id2: "MIA",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "AA", bold: true, color: "#4481ba" },
color: "#4481ba",
width: 2,
},
"SAN-SMF-WN": {
id1: "SAN",
id2: "SMF",
end1: { arrow: true },
end2: { arrow: true },
label: { text: "WN", bold: true, color: "#c85150" },
color: "#c85150",
width: 2,
},
};
}
export default data;<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>