viewof form = Inputs.form({ // creates interactivity
projection: Inputs.select(["equal-earth", "mercator", "orthographic"], {label: "Projection"}), // projections you csn switch between
lat: Inputs.range([-90, 90], {label: "Latitude", step: 1}), //adjust latitude
lon: Inputs.range([-180, 180], {label: "Longitude", step: 1}), //adjust longitude
})
Plot.plot({
projection: {
type: form.projection, //apply form
rotate: [-form.lon, -form.lat] // center rotation around a given set or coordinates
}, //"mercator" --> flat map, "orthographic" --> sphere "equal-earth" --> double-globe
width: 500,
marks: [
Plot.geo(world110m, {
//fill: "#eee",
fill: d => {
if (d.id == "USA") {return "blue"}
else if (d.id == "CHN") {return "red"}
else return "#eee"
},
stroke:"#ccc" }),
//plot.geo plots the outline of the countries
//Plot.graticule(), //plot.graticule plots the latitude/longitude lines
Plot.geo(usstates, { fill: "#eee", stroke:"#ccc" }), //plots individual states in US
Plot.geo(cville, { stroke:"blue" }),
// when replacing plot.geo(land) with plot.geo(world110m), we can see each individual outline from the file imported below
Plot.sphere({stroke:"#ccc"}) //plot.sphere plots the globe outline
]
})
//land = topojson.feature(land50m, land50m.objects.land)
//land50m = FileAttachment("land-50m.json").json()
import {basemaps} from "@emfielduva/dvlib_maps" //import map
world110m = (await basemaps.world110m.geojson).json() //provides a collection of features; each feature is a country
usstates = (await basemaps.us_states20m.geojson).json () //.json() tells Java to parse file as a json file
//plots individual states in US
cville = d3.json("https://opendata.arcgis.com/datasets/c371ad0b81024822bad1147ff6bb24c4_51.geojson")
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.