Published
Edited
Mar 1, 2021
1 star
md `### Scatter Geo Map: World Airports`
airports = {
const rawAirports = await (await fetch(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat"
)).text();
const airportDataHeading =
"Airport ID,Name,City,Country,IATA,ICAO,Latitude,Longitude,Altitude,Timezone,DST,Tz,Type,Source\n";
return d3.csvParse(airportDataHeading + rawAirports);
}
{
const myDiv = html`<div/>`;
const hoverText = airports.map(
(d, i) => "name: " + d.Name + ", city:" + d.City + ", country:" + d.Country
);
const data = [
{
type: 'scattergeo',
mode: "markers",
lat: unpack(airports, 'Latitude'),
lon: unpack(airports, 'Longitude'),
hoverinfo: 'text',
text: hoverText,
marker: {
size: 2
}
}
];
const layout = {
title: 'World Airports',
geo: {
scope: 'world',
showland: true,
landcolor: 'rgb(217, 217, 217)'
}
};
Plotly.newPlot(myDiv, data, { ...layout, ...mapLayout });
return myDiv;
}
us_cities_population = d3.csv(
"https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv",
d3.autoType
)
d3.extent(us_cities_population, d => d.pop)
{
const myDiv = html`<div/>`;
const citySizeScale = d3
.scaleSqrt()
.domain(d3.extent(us_cities_population, d => d.pop))
.range([4, 60]);
const citySize = us_cities_population.map(d => citySizeScale(d.pop));
const hoverText = us_cities_population.map(d => d.name + " pop: " + d.pop);
var data = [
// Plotly Trace data
{
type: 'scattergeo',
locationmode: 'USA-states',
lat: unpack(us_cities_population, 'lat'),
lon: unpack(us_cities_population, 'lon'),
hoverinfo: 'text',
text: hoverText,
marker: {
size: citySize, //Size specified the diameter
line: {
color: "lightgrey",
width: 1
}
}
}
];
var layout = {
title: '2014 US City Populations',
showlegend: false,
geo: {
scope: 'usa',
showland: true
}
};
Plotly.newPlot(myDiv, data, { ...layout, ...mapLayout });
return myDiv;
}
us_cities_population.map(d => d.name.trim())
viewof yearIndex = slider({
min: 0,
max: years.length-1,
step: 1,
value: 0,
format: i => `${years[i]}`,
title: "Years",
description: "Choose Year"
})
{
const myDiv = html`<div/>`;
const filter_and_unpack = (key, year) =>
gapminderData.filter(row => row['year'] == year).map(row => row[key]);
const locations = filter_and_unpack('iso_alpha', year);
const data = [
{
type: 'choropleth',
z: filter_and_unpack('lifeExp', year),
locations: locations,
text: locations,
locationmode: 'world'
//zauto: false,
//zmin: 30,
//zmax: 90
}
];
var layout = {
title: `World Life Expectency<br>${year}`,
showlegend: false,
geo: {
scope: 'world',
showland: true,
landcolor: 'rgb(217, 217, 217)',
showlakes: true,
lakecolor: 'rgb(128, 128, 255)'
}
};
Plotly.newPlot(myDiv, data, { ...layout, ...mapLayout }, { showLink: false });
return myDiv;
}
years = [...new Set(gapminderData.map(d => d.year))]
year = years[yearIndex]
gapminderData = d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder_with_codes.csv", d3.autoType)
md `## Geodesic Line`
{
const myDiv = html`<div style="width:800px;height:550px;"></div>`;
const OrlandoLatLon = [28.5383, -81.3792];
const DelhiLocation = [28.7041, 77.1025];
const data = [
{
type: 'scattergeo',
lat: [OrlandoLatLon[0], DelhiLocation[0]],
lon: [OrlandoLatLon[1], DelhiLocation[1]],
//mode: 'lines',
mode: "lines+markers",
marker: {
size: 5,
color: 'black'
},
line: {
width: 2,
color: 'brown'
}
}
];
const layout = {
title: 'Orlando to Delhi Geodesic Path',
showlegend: false,
geo: {
scope: 'world',
showland: true,
landcolor: 'rgb(217, 217, 217)',
showlakes: true,
lakecolor: 'rgb(128, 128, 255)',
subunitcolor: 'rgb(255, 255, 255)',
countrycolor: 'rgb(255, 255, 255)',
coastlinewidth: 2,
lataxis: {
range: [10, 80],
showgrid: true,
tickmode: 'linear',
dtick: 10
},
lonaxis: {
range: [-90, 90],
showgrid: true,
tickmode: 'linear',
dtick: 20
}
}
};
Plotly.newPlot(myDiv, data, { ...layout, ...mapLayout });
return myDiv;
}
routes = {
const rawRoutes = await (await fetch(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports-extended.dat"
)).text();
const dataHeading =
"Airport ID,Name,City,Country,IATA,ICAO,Latitude,Longitude,Altitude,Timezone,DST,Tz,Type,Source\n";
return d3.csvParse(dataHeading + rawRoutes, d3.autoType);
}
// Data Source: https://openflights.org/data.html
/*
As of June 2014, the OpenFlights/Airline Route Mapper Route Database contains 67663 routes between 3321 airports on 548 airlines spanning the globe, as shown in the map above. Each entry contains the following information:
Airline 2-letter (IATA) or 3-letter (ICAO) code of the airline.
Airline ID Unique OpenFlights identifier for airline (see Airline).
Source airport 3-letter (IATA) or 4-letter (ICAO) code of the source airport.
Source airport ID Unique OpenFlights identifier for source airport (see Airport)
Destination airport 3-letter (IATA) or 4-letter (ICAO) code of the destination airport.
Destination airport ID Unique OpenFlights identifier for destination airport (see Airport)
Codeshare "Y" if this flight is a codeshare (that is, not operated by Airline, but another carrier), empty otherwise.
Stops Number of stops on this flight ("0" for direct)
Equipment 3-letter codes for plane type(s) generally used on this flight, separated by spaces
The data is UTF-8 encoded. The special value \N is used for "NULL" to indicate that no value is available, and is understood automatically by MySQL if imported.
Notes:
Routes are directional: if an airline operates services from A to B and from B to A, both A-B and B-A are listed separately.
Routes where one carrier operates both its own and codeshare flights are listed only once.
Sample entries
BA,1355,SIN,3316,LHR,507,,0,744 777
BA,1355,SIN,3316,MEL,3339,Y,0,744
TOM,5013,ACE,1055,BFS,465,,0,320
*/
mapLayout = ({
autosize: false,
width: 900,
height: 500,
margin: {
l: 20,
r: 50,
b: 20,
t: 50,
pad: 4
},
paper_bgcolor: '#AAAAAA',
plot_bgcolor: '#8888c7'
})
unpack = (rows, key)=> rows.map(row => row[key])
import {slider} from "@jashkenas/inputs"
d3 = require("d3@v5")
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
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.
