Plot.plot({
marginRight: 100,
marginBottom: 50,
marginLeft: 75,
insetBottom: 10,
insetLeft: 10,
color: {scheme: "Tableau10", reverse: true},
marks: [Plot.axisY({ tickSize: 0, fontSize: 20, label: "% of Electricity Production", anchor: "left", labelAnchor: "center", ticks: 4}),
Plot.axisX({ tickSize: 0, fontSize: 0 }),
Plot.areaY(electricity_edited, {x: "Year", y: "perc", z: "name", fill: "name", title: "name", opacity: 1}),
Plot.text(coords, {x:2023, y: "percsum", text: "name", fontSize: 18, textAnchor:"start", fill: "name"}),
Plot.text(['Electricity production\nby source,\nWorld'], {x:1986, y: 20, fontSize: 50, textAnchor:"start", fill: "#f9e29c", lineHeight: 1.1, opacity: 1, fontWeight: "Bold", fontStyle: "oblique"}),
Plot.ruleY(coords, {x1:2021, x2: 2023, y: "percsum", stroke: "name", filter: d=>d.name!='Other'}),
Plot.link(coords, {x1:2021, x2: 2023, y1:100, y2: "percsum", stroke: "name", filter: d=>d.name==='Other'}),
Plot.text(electricity_edited, {x: "Year", y: -2.5, text: "yearchar", fontSize: 15, fill: "gray",dx:20, filter: d => d.Year === 1985 | d.Year === 1990 | d.Year === 1995| d.Year === 2000| d.Year === 2005 | d.Year === 2010 | d.Year === 2015 | d.Year === 2020, opacity: .3}),
Plot.ruleY([0])
],
height: 600, width: 800
})
bigfoot = Plot.plot({
projection: "albers-usa",
insetLeft: 150,
marks: [Plot.geo(states, { fill: "pink", stroke: "#d3d3d3", opacity: 0.2}),
Plot.density(bfro_reports_geocoded, {x: "longitude", y: "latitude", r: 3, opacity: 0.3, fill: "forestgreen", bandwidth: 5, thresholds: 200, fillOpacity: 0.7, mixBlendMode: "multiply", title: d=>d.state + "\n"+d.season}),
Plot.geo(states, {stroke: "gray"}),
Plot.dot(bfro_reports_geocoded, {x: "longitude", y: "latitude", r: .3, fill: "white", title: d=>d.state + "\n"+d.season+"\n"+d.date}),
Plot.text(['Bigfoot sightings\nin the US'],{x:-106, y: 51, dx: -290, fontSize: 25, fill: "black", stroke: "gray", opacity: 0.8, lineHeight: 1.2, fontStyle: "italic", fontWeight: "Bold"}),
Plot.image(bfro_reports_geocoded,{x:-106, y: 52, opacity: 1, width: 300, dy:200, dx: -300, src: "https://th.bing.com/th/id/OIP.jHAiev5hWSlwAg_ufosPFgAAAA?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" })
],
height: 500,
width: 800,
margin: 50
})
Plot.plot({
style: "overflow: visible;",
insetLeft: 20,
marginTop: 60,
insetTop: 0,
marginLeft: 60,
insetRight: 180,
marks: [Plot.image(mmr_world_2016, {x:2012.9, y: 16, dx: 100, width:200, opacity: .1, src: "https://th.bing.com/th/id/OIP.x2pANN8PS88kejkKY7Kw8gAAAA?w=128&h=150&c=7&r=0&o=5&dpr=1.3&pid=1.7"}),
Plot.text(['The maternal mortality ratio (MMR) is defined as the number of maternal deaths during a given time period per 100,000 live births during the same time period.'], {x:2014, y: 6, opacity: 1, fill: "gray", fontSize: 20, textAnchor: "middle", lineWidth: 9, lineHeight: 1.4}),
Plot.barY([22.2], {fill: "orange", fillOpacity: 0.2}),
Plot.ruleX([2016, 2020]),
Plot.text(['2016'], {x:2016.1, y: .5, fontSize: 20, textAnchor: "start", fill: "gray"}),
Plot.text(['2020'], {x:2019.9, y: .5, fontSize: 20, textAnchor: "end", fill: "gray"}),
Plot.text(['Increase'], {x:2016.3, y: 16, fontSize: 25, textAnchor: "start", fill: "maroon"}),
Plot.text(['and'], {x:2017.5, y: 16, fontSize: 25, textAnchor: "start", fill: "black"}),
Plot.text(['Decrease'], {x:2018.1, y: 16, fontSize: 25, textAnchor: "start", fill: "forestgreen"}),
Plot.text(['in Maternal Mortality Ratio'], {x:2016.3, y: 14.6, fontSize: 25, textAnchor: "start", fill: "black"}),
Plot.line(mmr_world_2016, {x: "year", y: "MaternalMortalityRate", title: "Country", stroke: "Country", textAnchor: "start"}),
Plot.axisY({ tickSize: 0, fontSize: 0, ticks: 4,label: "Maternal Mortality Rate (per 100,000)", anchor: "left", labelAnchor: "center"}),
Plot.axisX({ tickSize: 0, fontSize: 0}),
Plot.text(mmr_world_2016, {x:2015.8, y: "MaternalMortalityRate"
, opacity: 1, fill: "Country", fontSize: 15,
text: d=>d.MaternalMortalityRate,
textAnchor: "end", lineWidth: 10,
filter: d=>d.year === 2016 & d.Country != "France" & d.Country != "Germany"
}),
Plot.text(mmr_world_2016, {x:2015.8, y: d=>d.MaternalMortalityRate - 0.5
, opacity: 1, fill: "Country", fontSize: 15,
text: d=>d.MaternalMortalityRate,
textAnchor: "end", lineWidth: 10,
filter: d=>d.year === 2016 & (d.Country === "France" | d.Country === "Germany")
}),
Plot.text(mmr_world_2016, {x:2020.2, y: "MaternalMortalityRate"
, opacity: 1, fill: "Country", fontSize: 15,
text: d=>d.MaternalMortalityRate + " ("+d.Country+")",
textAnchor: "start", lineWidth: 15,
filter: d=>d.year === 2020
}),
],
color: {
type: "categorical",
range: ["maroon", "maroon","maroon", "forestgreen", "forestgreen", "forestgreen", "forestgreen", "forestgreen", "forestgreen", "forestgreen" ],
domain: ["United States", "United Kingdom", "France", "Canada", "Germany", "Australia", "Netherlands (Kingdom of the)", "New Zealand", "Norway", "switzerland"],
legend: false,
},
height: 700,
width: 900
})
Plot.plot({
style: "overflow: visible;",
insetTop: 10,
marginTop: 10,
marginRight: 100,
marks: [
Plot.barY([45000], {fill: "pink", fillOpacity: 0.2}),
Plot.barY([99000], {fill: "pink", fillOpacity: 0.1}),
Plot.barY([150000], {fill: "pink", fillOpacity: 0.05}),
Plot.tickY(owidfiltered, {x: "country", y: "cumulative_luc_co2", sort: {x: "y"}, stroke: "cumulative_luc_co2", title: "country", r: "cumulative_luc_co2", opacity: 0.8, title: d=>d.yearchar + "\n" + d.cumulative_luc_co2, opacity: 0.4, strokeWidth: 3,
filter: d=>d.year <= yearinput
}),
Plot.axisY({ tickSize: 0, fontSize: 18, label: "Cumulative C02 (million T)", anchor: "right", labelAnchor: "center", ticks: 5}),
Plot.axisX({ tickSize: 0, fontSize: 0, label: "", anchor: "top", labelAnchor: "center", fill: "purple"}),
Plot.text([`Cumulative Land\nUse Change CO2`], {y:135000, dx: -500, frameAnchor: "middle", fontSize:68, lineWidth: 25, textAnchor: "start", lineHeight: 1.2, clip: false, fill: "purple", opacity: .3}),
Plot.text(owidfiltered, {y:107000, dx: -500, frameAnchor: "middle", fontSize: 130, text: "yearchar", lineWidth: 25, textAnchor: "start", lineHeight: 1.2, clip: false, fill: "purple", opacity: .04, filter: d=>d.year === yearinput}),
Plot.text(owidfiltered, {x: "country", y:"cumulative_luc_co2", dx: -75, dy: -20, frameAnchor: "middle", fontSize: 22, text: "country", lineWidth: 25, textAnchor: "start", lineHeight: 1.2, clip: false, fill: "purple", opacity: 1, filter: d=>d.year === yearinput}),
Plot.image(owidcountries, {x: "country", y:"cumulative_luc_co2", dx: -50, dy: -60, src: "flagurl", width: 50, filter: d=>d.year === yearinput}),
Plot.text([`Data Source: ourworldindata.org | Design: Deepsha Menghani | twitter: Bigdatadipper`], {y:1500, dx: -6, frameAnchor: "middle", fontSize: 14, fontStyle: "oblique", lineWidth: 70, textAnchor: "start", lineHeight: 1.2, clip: false, fill: "gray", opacity: 1}),
],
r: { range: [1, 25]},
color: {scheme: "turbo"},
height: 700,
width: 1200,
marginBottom: 50,
marginLeft: 75
})
viewof daynumber = Inputs.range([1,30], {label: "Select the day", step: 1, value: 1, width: 700})
Plot.plot({
inset: 50,
marks: [Plot.image(moon, {x: -30, y: 3, width: 1300, opacity: .05,
src: "https://th.bing.com/th/id/OIP.-aNrctkF5h_5waiswFpDAAHaEK?w=319&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
}),
Plot.text(moon, {x: "Coords", y: "Coordsy", text: "Moon", fontSize: 70, filter: d=> d.Day<=daynumber, opacity: 1}),
Plot.text(moon, {x: "Coords", y: "Coordsy", text: "Day", fontSize: 20, dy: 55, fill: "#6030a8", filter: d=> d.Day<=daynumber & (d.Day===1 | d.Day ===7 | d.Day ===15 | d.Day ===22 | d.Day ===29.5)}),
Plot.text(['New\nmoon\ncycle'], {x: -64, y: 3, fontSize: 70,fill: "#6030a8", fontStyle: "oblique", fontWeight: "bold"}),
Plot.text(moon, {x: "Coords", y: "Coordsy", text: d=>"Day " + d.Day, fontSize: 25, fill: "#6030a8", dy: -65, filter: d=> d.Day<=daynumber & (d.Day===1 | d.Day ===29.5)}),
Plot.text(moon, {x: "Coords", y: "Coordsy", text: d=>"New", fontSize: 25, fill: "#6030a8", dy: 85, filter: d=> d.Day<=daynumber & (d.Day===1 | d.Day ===29.5)}),
Plot.text(moon, {x: "Coords", y: "Coordsy", text: d=>"Full", fontSize: 25, fill: "#6030a8", dy: 85, filter: d=> d.Day<=daynumber & (d.Day===15)}),
Plot.text(moon, {x: 7, y: 3, text: d=>"It takes about 27.3 days for the Moon to orbit Earth. However, because of how sunlight hits the Moon, it takes about 29.5 days to go from one new moon to the next new moon.", fontSize: 20, fontWeight: "bold", lineWidth: 14, lineHeight: 1.5, fill: "#6030a8", opacity: 1,
filter: d=> d.Day<=daynumber & (d.Day ===29.5)
}),
Plot.barX([-66], {fillOpacity: 0}),
Plot.barX([12], {fillOpacity: 0}),
Plot.axisY({ tickSize: 0, fontSize: 0}),
Plot.axisX({ tickSize: 0, fontSize: 0}),
Plot.text(['--Made with moon emojis'], {x: 13, y: 3, fontSize: 15, dx: -40, dy: 160,fill: "#6030a8", fontStyle: "oblique", opacity: 0.5, textAnchor: "middle"}),
],
width: 1210,
height: 350
})
addTooltips(Plot.plot({
insetBottom: 10,
projection: "equirectangular",
width,
marks: [Plot.sphere({fill: "black"}),
Plot.geo(land, {fill: "gray", opacity: 1, stroke: "#ccc"}),
Plot.graticule(),
Plot.text(['Global Bilateral\nMigration from\nThe USA, 2000'],{x:-130, y: -30, fontSize: 35, fill: "#ccc", opacity: 1, lineHeight: 1.2}),
Plot.text(['data.worldbank.org'],{x:-130, y: -55, fontSize: 15, fill: "gray", opacity: 1, fontStyle: "oblique"}),
Plot.dot(migration, {x: "longitude", y: "latitude", r: "count", fill: "forestgreen", opacity: .9,
stroke: "#ccc",
title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count,
filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=minmigration
}),
Plot.arrow(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "forestgreen", opacity: 0.2, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count,
filter: d=> d.year === 2000 & d.gender === "Total" & d.count>=minmigration
}),
Plot.arrow(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "forestgreen", opacity: 0.5, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count,
filter: d=> d.year === 2000 & d.gender === "Total" & d.count > 10000& d.count>=minmigration
}),
Plot.arrow(migration, {x1: "startinglongitude", y1: "startinglatitude", x2: "longitude", y2: "latitude", stroke: "forestgreen", opacity: 1, bend: true, title: d=>d.continent+" \n"+d.countrydest+" \n"+d.count,
filter: d=> d.year === 2000 & d.gender === "Total" & d.count > 100000 & d.count>=minmigration
}),
Plot.dot(migration.slice(0,1), {x: "startinglongitude", y: "startinglatitude", r: 5, fill: "blue", opacity: .7, stroke: "white",
title: d=>"United States of America"
}),
Plot.text(['Data source: data.worldbank.org, Design: Deepsha Menghani'],{x:70, y: -85, fontSize: 10, fill: "black", opacity: 1, lineHeight: 1.2 }),
],
r: { range: [5, 20]},
color: {legend: true, label: "Renewable energy percentage across the countries of the world (2020)", style: {fontSize: 20}}
}), {fill: d => d.n, stroke: "black", "stroke-width": 4}
)
mmr_world_2016@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
owid-co2-data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
owidco2
owidfiltered
bilateral_migration_usa.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
land50m = FileAttachment("land-50m.json").json()
land = topojson.feature(land50m, land50m.objects.land)
mooncopy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
us = FileAttachment("us-counties-10m.json").json()
states = topojson.feature(us, us.objects.states)
bfro_reports_geocoded.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
electricity_edited_world.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
electricity
electricity
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.