Published
Edited
Mar 1, 2021
1 star
Introduction to Observable and PlotlyJSUseful Javascript Array functions.Plotly.Js: Getting Started with Old FaithfulUseful D3 Functions for Data handlingPlotly Color UsageGeoVisualizationGapminder data in PlotlySample US Wind Data VizHCL color modelHSV and HSL Color ModelsColor Blind SimulatorColorBlindLibD3: IntroducingWebGL Volume RenderingColor from Wavelength, Correlated Temperature and HTML color pickerColor Solids: RGB and HSL2D Vector Field Visualization1D Dataviz in PlotlyStock Market Performance of Presidents Trump, Obama, W. Bush, Clinton, H.W. Bush, Reagan During their first term.SVG cheat sheetScales and AxesFetch Covid-19 data
PlotlyJS GeoVisualization
Also listed in…
CAP 6737
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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.