Day 21: RasterDay 10: North AmericaDay 30: My favoriteDay 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 1: Points
Day 17: Flow
Plot.plot({
insetBottom: -30,
projection: {
type: "equal-earth",
rotate: [90, -10]
},
width: 1200,
marks: [
Plot.sphere({fill: "#1c2e4a"}),
Plot.geo(land, {fill: "black", fillOpacity: 1, stroke: "#152238", strokeOpacity: 1}),
Plot.text(['Global Bilateral\nMigration from\nThe USA, 2000\nTop 10 countries'],{x:-138, y: -10, fontSize: 25, fill: "white", opacity: .4, lineHeight: 1.2, fontFamily: "oblique", fontWeight: "bold", fontStyle: "ITALIC"}),
Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "gray", strokeWidth: d=> 10, opacity: .2, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "#ccc", strokeWidth: d=> 7, opacity: .5, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "white", strokeWidth: d=> 2, opacity: 9, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 8, fill: "gray", opacity: .6, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 6, fill: "#ccc", opacity: .6, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 3, fill: "white", opacity: 1, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration.slice(0,1), {x: "startinglongitude", y: "startinglatitude", r: 10, fill: "#B31942", opacity: 1, stroke: "white", title: d=>"United States of America" }),
Plot.text(migration.slice(0,1), {x: "startinglongitude", y: "startinglatitude", dx: 70, fontSize: 20, dy: 20, stroke: "black", opacity: .7, fill: "white", text: d=>"United States\nof America" }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "#ccc", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest != 'Germany' & d.countrydest != 'Netherlands' & d.countrydest != 'Canada', dx: 20, dy: 30 }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "#ccc", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest == 'Netherlands' , dx: -50, dy: -30 }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "#ccc", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest == 'Canada' , dx: 0, dy: -20 }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "#ccc", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest == 'Germany' , dx: 40, dy: -10 }),
Plot.text(['Data: databank.worldbank.org | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-10, y: -70, dx: 50, fontSize: 14, fill: "gray", opacity: 1, lineHeight: 1.2, dy: -50 }),
],
r: { range: [5, 20]},
})
Plot.plot({
projection: {
type: "azimuthal-equal-area",
//rotate: [90, -10]
},
width: 1200,
marks: [
Plot.sphere({fill: "#1c2e4a"}),
Plot.geo(land, {fill: "black", fillOpacity: 1, stroke: "#152238", strokeOpacity: 1}),
Plot.text(['Global Bilateral\nMigration from\nThe USA, 2000\nTop 10 countries'],{x:-130, y: -10, dx: 70, dy: 50, fontSize: 25, fill: "white", opacity: .4, lineHeight: 1.2, fontFamily: "oblique", fontWeight: "bold", fontStyle: "ITALIC"}),
//Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "gray", strokeWidth: d=> 10, opacity: .2, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=0 }),
//Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "#ccc", strokeWidth: d=> 7, opacity: .5, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=0 }),
Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "white", strokeWidth: d=> 1, opacity: .3, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=0 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 8, fill: "gray", opacity: .6, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 6, fill: "#ccc", opacity: .6, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 3, fill: "white", opacity: .5, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=0 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 3, fill: "white", opacity: 1, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 8, fill: "orange", opacity: .6, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 }),
Plot.dot(migration.slice(0,1), {x: "startinglongitude", y: "startinglatitude", r: 10, fill: "#B31942", opacity: 1, stroke: "white", title: d=>"United States of America" }),
Plot.text(migration.slice(0,1), {x: "startinglongitude", y: "startinglatitude", dx: 70, fontSize: 20, dy: 20, stroke: "black", opacity: .7, fill: "white", text: d=>"United States\nof America" }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "orange", stroke: "black", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest != 'Germany' & d.countrydest != 'Netherlands' & d.countrydest != 'Canada', dx: 20, dy: 30 }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "orange", stroke: "black", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest == 'Netherlands' , dx: -50, dy: -30 }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "orange", stroke: "black", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest == 'Canada' , dx: 0, dy: -20 }),
Plot.text(migration,{x: "longitude", y: "latitude", text: "countrydest", fontSize: 19, fill: "orange", stroke: "black", opacity: 1, fontStyle: "oblique", filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=20000 & d.countrydest == 'Germany' , dx: 40, dy: -10 }),
Plot.text(['Data: databank.worldbank.org | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-10, y: -70, dx: 50, fontSize: 14, fill: "gray", opacity: 1, lineHeight: 1.2, dy: -50 }),
],
r: { range: [5, 20]},
})
Plot.plot({
projection: {
type: "conic-equal-area",
rotate: [0, 0]
},
width: 1200,
marks: [
Plot.sphere({fill: "#00072d"}),
Plot.geo(land, {fill: "black", fillOpacity: 1, stroke: "#152238", strokeOpacity: 1}),
Plot.link(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "white", strokeWidth: d=> 1, opacity: .8, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=0 }),
Plot.dot(migration, {x: "longitude", y: "latitude", r: 3, fill: "white", opacity: .8, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count, filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=0 }),
Plot.dot(migration.slice(0,1), {x: "startinglongitude", y: "startinglatitude", r: 10, fill: "#B31942", opacity: 1, stroke: "white", title: d=>"United States of America" }),
Plot.text(['Global Bilateral Migration from the USA, 2000\nData: databank.worldbank.org | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-10, y: -70, dx: 50, dy: -40, fontSize: 12, fill: "gray", opacity: 1, lineHeight: 1.2, fontStyle: "italic" }),
],
r: { range: [5, 20]},
})
bilateral_migration_usa.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
