Data Viz New
#Meta Data
Airport ID Unique OpenFlights identifier for this airport.
Name Name of airport. May or may not contain the City name.
City Main city served by airport. May be spelled differently from Name.
Country Country or territory where airport is located. See Countries to cross-reference to ISO 3166-1 codes.
IATA 3-letter IATA code. Null if not assigned/unknown.
ICAO 4-letter ICAO code. Null if not assigned.
Latitude Decimal degrees, usually to six significant digits. Negative is South, positive is North.
Longitude Decimal degrees, usually to six significant digits. Negative is West, positive is East.
Altitude In feet.
Timezone Hours offset from UTC. Fractional hours are expressed as decimals, eg. India is 5.5.
DST Daylight savings time. One of E (Europe), A (US/Canada), S (South America), O (Australia), Z (New Zealand), N (None) or U (Unknown). See also: Help: Time
Tz database time zone Timezone in "tz" (Olson) format, eg. "America/Los_Angeles".
Type Type of the airport. Value "airport" for air terminals, "station" for train stations, "port" for ferry terminals and "unknown" if not known. In airports.csv, only type=airport is included.
Source Source of this data. "OurAirports" for data sourced from OurAirports, "Legacy" for old data not matched to OurAirports (mostly DAFIF), "User" for unverified user contributions. In airports.csv, only source=OurAirports is included.
// Loading Data
raw = aq.loadCSV(dataurl, {header: false, names: headers} )
// Adding header
headers = ["id", "airport", "city", "country", "icao", "iata", "lat", "long", "altitude", "timezone", "dst", "tz", "type", "source"]
rawd3 = d3.csv(dataurl)
Inputs.table(raw)
IndiaData = raw.filter((d) => d["country"] === "India")
Inputs.table(IndiaData)
vegalite = require("vega-embed")
vegalite({
width: width,
data: {values: IndiaData},
mark: "point",
encoding:{
x:{ field: "iata", type: "nominal", sort : "-y"},
y:{ field: "altitude", type: "quantitative"}
}
})
themeConfig = ({
width: 800,
legend: {
orient: "bottom-left",
gradientDirection: "horizontal",
symbolDirection: "horizontal"
}
})
Plotting on India Map
vegalite(
{
width: 400,
height: 400,
projection: { type: "mercator" },
data: { values: IndiaData },
mark: "circle",
encoding: {
latitude: { field: "lat", type: "quantitative" },
longitude: { field: "long", type: "quantitative" },
size: { field: "altitude", type: "quantitative" },
color: {
field: "altitude",
type: "quantitative",
axis: null,
scale: { scheme: "spectral" }
}
}
},
themeConfig,
)
vegalite(
{
width: 400,
height: 400,
data: { values: IndiaData },
transform: [{ filter: "datum.altitude > 3000" }],
mark: { type: "arc", padAngle: "0.1" },
encoding: {
radius: { field: "altitude", type: "quantitative" },
theta: { field: "city", type: "nominal", sort: "-radius" }
}
},
themeConfig
)
Inputs.table(raw)
Plotting on World Map
vegalite(
{
width: 400,
height: 400,
projection: { type: "mercator" },
data: { values: raw },
mark: "circle",
encoding: {
latitude: { field: "lat", type: "quantitative" },
longitude: { field: "long", type: "quantitative" },
size: { field: "altitude", type: "quantitative" }
}
},
themeConfig
)
vegalite({
width:width,
data: {values: raw},
mark: "point",
encoding:{
x:{ field: "iata", type: "nominal", sort : "-y"},
y:{ field: "altitude", type: "quantitative"}
}
})
vegalite(
{
width: 800,
height: 400,
projection: { type: "mercator" },
data: { values: raw },
mark: "circle",
encoding: {
latitude: { field: "lat", type: "quantitative" },
longitude: { field: "long", type: "quantitative" },
size: { field: "altitude", type: "quantitative" }
}
},
themeConfig
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
