Day 21: RasterDay 10: North AmericaDay 8: AfricaDay 14: EuropeDay 9: HexagonsTurkey vulture migrations in South AmericaDay 3: PolygonsDay 18: AtmosphereDay 29: PopulationDay 2: LinesDay 28: Is this a chart or a mapDay 23: 3DDay 11: RetroDay 20: OutdoorsDay 16: OceaniaDay 13: ChoroplethProjection importsDay 6: AsiaDay 7 - NavigationDay 4: Bad mapDay 17: FlowDay 1: Points
Day 30: My favorite
Plot.plot({
insetBottom: 30, insetLeft: 0, insetTop: 10,
projection: {
type: "mercator",
domain: {type: "MultiPoint", coordinates:[[ 5.9375, 45.7980 ], [ 10.5121, 45.7980 ], [ 5.9375, 47.8285 ],[ 10.5121, 47.8285 ]]} },
width: 800,
marks: [
Plot.geo(land, {fill: "#9c6f44", fillOpacity: .1, stroke: "#ccc", strokeOpacity: 1}),
Plot.geo(countries, {fill: (d)=> "black", stroke: "black", opacity: 1,title: (d)=> d.properties.name}),
Plot.geo(countries, {fill: (d)=> "black", opacity: 1, stroke: "white",title: (d)=> d.properties.name, filter: d=>d.properties.name == "Switzerland"}),
Plot.raster(train_stations_europe, {x: "longitude", y: "latitude", fill:"is_city", filter: d=>d.country == "CH"}),
Plot.text(['Switzerland'],{x: 5.9375, y: 47.8285 , dy: -60, dx: 400, fontSize: 70, fontFamily: "italic", fontStyle: "italic", fontWeight: "bold", fill: "#ccc", opacity: 1, lineHeight: 1.2}),
Plot.text(['The densest rail network in Europe'],{x: 5.9375, y: 45.7980 , dy: 40, dx: 400, fontSize: 40, fontFamily: "italic", fontStyle: "italic", fontWeight: "bold", fill: "#ccc", opacity: 1, lineHeight: 1.2}),
Plot.text(['Data: kaggle.com | Design: Deepsha Menghani | Threads: IandLoveandData | Mastodon: Deepsha'],{x:10.4121, y: 45.7980, dy: 120, fontSize: 18, fontStyle: "italic",fill: "gray", opacity: .7, lineHeight: 1.2, textAnchor: "end" }),
],
color: {type: "sequential", legend: false,
range: ["white", "#836539"],
style: {fontSize: 20}, width: 700, ticks: 7},
})
Plot.plot({
insetBottom: 30, insetLeft: 0,
projection: {
type: "mercator",
domain: {type: "MultiPoint", coordinates:[[ 5.8462, 47.2501 ],
[ 15.0619, 47.2501 ],
[ 5.8462, 55.0782 ],
[ 15.0619, 55.0782 ]]
}
},
width: 600,
marks: [
Plot.sphere({fill: "lightblue", opacity: .6}),
Plot.geo(land, {fill: "#9c6f44", fillOpacity: .1, stroke: "#ccc", strokeOpacity: 1}),
Plot.geo(countries, {fill: (d)=> "black", stroke: "black", opacity: 1,title: (d)=> d.properties.name}),
Plot.geo(countries, {fill: (d)=> "black", opacity: 1, stroke: "gray",title: (d)=> d.properties.name, filter: d=>d.properties.name == "Germany"}),
Plot.raster(train_stations_europe, {x: "longitude", y: "latitude", fill:"is_city", filter: d=>d.country == "DE"}),
Plot.raster(train_stations_europe, {x: "longitude", y: "latitude", fill:"is_city", filter: d=>d.country == "DE"}),
Plot.text(['Train stations\nin Germany'],{x:6, y: 54.5, fontSize: 30, fontFamily: "italic", fontStyle: "italic", fill: "gray", opacity: 1, lineHeight: 1.2}),
Plot.text(['Data: kaggle | Design: Deepsha Menghani | Threads: IandLoveandData | Mastodon: Deepsha'],{x:16.6, y: 47, fontSize: 14, fill: "gray", opacity: .7, lineHeight: 1.2, textAnchor: "end" }),
],
color: {type: "sequential", legend: false,
range: ["lightblue", "#008080"],
style: {fontSize: 20}, width: 700, ticks: 7},
})
train_stations_europe.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import {countries} from "ff0a83b495637684"
import {land} from "ff0a83b495637684"
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.
