The avatar for @deepsha
Deepsha
Public
30 Day chart challenge
Edited
Sep 26, 2023
2 forks
9 stars
8
Insert cell
Insert cell
Insert cell
owid-co2-data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
owidco2
Select *, REPLACE(CAST(year as varchar(10)), '.0', '') as yearchar
from owidco2
where year >= 1900 and country in ('China', 'United States', 'India', 'Canada', 'Brazil', 'Russia')
Insert cell
owidfiltered
select *,
case when country = 'Brazil' then 'https://th.bing.com/th/id/OIP.HFDP6apvouo_FycOJ2tmsAHaFL?w=243&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
when country = 'United States' then 'https://th.bing.com/th/id/OIP.k7hBQIE2mquc4agdMnep9gAAAA?w=217&h=118&c=7&r=0&o=5&dpr=1.3&pid=1.7'
when country = 'India' then 'https://th.bing.com/th/id/OIP.YHufaYYtdq8EtHQRPAx_9QHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
when country = 'China' then 'https://th.bing.com/th/id/OIP.uCayufWV5RIWEdzvMOP-UAHaE8?w=247&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
when country = 'Canada' then 'https://th.bing.com/th/id/OIP.Igj3z8Bx2ncoEYV5-ywzWgHaDt?w=346&h=174&c=7&r=0&o=5&dpr=1.3&pid=1.7'
when country = 'Russia' then 'https://th.bing.com/th/id/OIP.ENUz0FabDUNzaSgfSBqaVQAAAA?w=246&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
else '' end as flagurl
from owidfiltered
where year in (1900, 2020)
order by year desc
Insert cell
Plot.plot({
style: "overflow: visible;",
insetBottom: 30,
insetLeft: 20,
insetRight: 20,
marks: [
Plot.ruleX([1900], {stroke: "gray", opacity: 0.2}),
Plot.ruleX([2020], {stroke: "gray", opacity: 0.2}),
Plot.lineY(owidfiltered, {x: "year", y: "cumulative_luc_co2", stroke: "country", title: "country", opacity: 0.8, title: "year", opacity: 0.4}),
Plot.text(owidcountries.slice(0,6), {x: 2023, y: d => (d.cumulative_luc_co2), text: "country", fontSize: 15, fill: "country",textAnchor: "start",dx: 3}),
Plot.image(owidcountries.slice(0,6), {x: 2020, y: d => (d.cumulative_luc_co2), src: "flagurl", width: 30}),
Plot.text(['Brazil surpassed\nRussia\n2005'],{x:2003, y: 101000, fontSize: 20, fill: "darkblue"}),
Plot.text(['China surpassed\nIndia & Canada\n1988'],{x:1986, y: 45000, fontSize: 20, fill: "maroon"}),
Plot.text(owidcountries, {x: "year", y: 50, text: "yearchar", fontSize: 60, fill: "gray", opacity: 0.1, textAnchor: "start"}),
Plot.dotY({x:2004, y: 103000, fontSize: 20, r: 20}),
Plot.axisY({ tickSize: 0, fontSize: 15, label: "", anchor:"left", labelAnchor: "center"}),
Plot.axisX({ tickSize: 0, fontSize: 0, label: "", anchor: "bottom", labelAnchor: "center"}),
Plot.text([`Cumulative Land\nUse Change\nCO2`], {x:1900, y:110000, frameAnchor: "middle", fontSize: 50, lineWidth: 25, textAnchor: "start", lineHeight: 1.2, clip: false, fill: "gray", opacity: 0.3}),
],
color: {type: "categorical"},
height: 800,
width: 1000,
marginBottom: 50,
marginLeft: 75
})
Insert cell
Insert cell
Insert cell
AZA_MLE_Jul2018.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Plot.plot({
style: "overflow: visible;",
marks: [
Plot.dot(mleflags, {x: "Male", y: "Female", stroke: "TaxonClass", strokeOpacity: 0.2, title: "SpeciesCommonName"}),
Plot.linearRegressionY(mleflags, {x: "Male", y: "Female", stroke: "TaxonClass", ci: 0.99}),
Plot.text([`Within Taxon Class "Mammalia", Female median life expectancy is higher in 65% of species.`], {x:30, y:15, frameAnchor: "middle", fontSize: 18, lineWidth: 25, textAnchor: "start", lineHeight: 1.5, clip: false, fill: "maroon"}),
Plot.text([`Within Taxon Class "Aves (birds)", Male median life expectancy is higher in 68% of species.`], {x:30, y:9, frameAnchor: "middle", fontSize: 18, lineWidth: 25, textAnchor: "start", lineHeight: 1.5, clip: false, fill: "#1c2e4a"}),
Plot.text([`Zoo Animal\nLifespans`], {x:5, y:35, frameAnchor: "middle", fontSize: 70, lineWidth: 25, textAnchor: "start", lineHeight: 1.2, clip: false, fill: "gray", opacity: 0.3}),
Plot.axisY({ tickSize: 0, fontSize: 15, label: "Female Median Life Expectancy", anchor: "left", labelAnchor: "center"}),
Plot.axisX({ tickSize: 0, fontSize: 15, label: "Male Median Life Expectancy", anchor: "bottom", labelAnchor: "center"}),
Plot.image(mleflags, {x: 8, y: 23.5, width: 100,
src: "https://th.bing.com/th?q=Sloth+Drawing&w=120&h=120&c=1&rs=1&qlt=90&cb=1&dpr=1.3&pid=InlineBlock&mkt=en-US&cc=US&setlang=en&adlt=moderate&t=1&mw=247"
})
],
color: {
type: "categorical",
range: ["#1c2e4a", "maroon" ],
legend: true,
style: {
fontSize: "20px"
}
},
height: 500,
width: 1000,
marginBottom: 50,
marginLeft: 75,
insetBottom: 10,
insetLeft: 10
})
Insert cell
Insert cell
olympic_history.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
olympicmedals
Select count(*) as n, Year, Team, Medal, Sex, REPLACE(CAST(Year as varchar(10)), '.0', '') as yearchar
from olympicmedals
Where Year not in (1994,1998,2002,2006,2010,2014) and Year >= 1980
group by Year, Team, Medal, CAST(Year as varchar(10)), Sex
order by Year, Team, Medal, yearchar
Insert cell
Insert cell
Plot.plot({
style: "overflow: visible;",
insetBottom: 20,
facet: {
data: selectedteam,
x: "Medal",
y: "Sex"
},
marks: [
Plot.ruleY([0]),
Plot.barY(selectedteam, {x: "Year", y: "n", fill: "Medal", title: "Medal", opacity: 0.7, size: .2}),
Plot.text(selectedteam, {x: "Year", y: -4, text: "yearchar", fontSize: 10}),
Plot.text(selectedteam, {x: "Year", y: d => (d.n+2), text: "n", fontSize: 15, textAnchor: "middle",dx: 3, fill: "gray"}),
Plot.axisX({ tickSize: 0, fontSize: 0, label: ""}),
Plot.axisY({ tickSize: 0, fontSize: 0}),
],
color: {
type: "categorical",
range: ["#CD7F32", "#FFD700", "silver"],
domain: ["Bronze","Gold", "Silver" ],
legend: true,
style: {
fontSize: "20px"
}
},
height: 600,
width: 1200,
marginBottom: 50,
marginLeft: 75
})
Insert cell
Insert cell
Insert cell
Endangeredspecies_edited.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
endangeredspecies
Select *
from endangeredspecies
where rank = 1
Insert cell
Plot.plot({
style: "overflow: visible;",
marks: [
Plot.boxX(endangeredspecies, {y: "name", x: "value", sort: {y: "x"}, opacity: 0.2, fill: "#008080", stroke: "gray"}),
Plot.dotX(endangeredspecies, {y: "name", x: "value", sort: {y: "x"}, opacity: 0.5, fill: "#008080", stroke: "gray", r:1, title: "Country"}),
Plot.dotX(endangeredspecies_top, {y: "name", x: "value", sort: {y: "x"}, opacity: 1, fill: "maroon", stroke: "gray", r:5, title: "Country"}),
Plot.text(endangeredspecies_top, {y: "name", x: d => (d.value+2), sort: {y: "x"}, opacity: 0.7, fill: "maroon", text: "Country", textAnchor: "start", fontSize: 15}),
Plot.text([`Distribution of threatened species as percentage of known species and countries with the highest percentage of endangered species within each category.`],
{x:108, frameAnchor: "top", fontSize: 30, lineWidth: 10, textAnchor: "end", lineHeight: 1.5, clip: false, fill: "gray", opacity: 0.5}),
Plot.axisY({ tickSize: 0, fontSize: 15, label: ""}),
Plot.axisX({ tickSize: 0, fontSize: 20, label: ""}),
],
height: 700,
width: 1100,
marginBottom: 50,
marginLeft: 120,
insetBottom: 10,
insetLeft: 20
})
Insert cell
Insert cell
LgbtqYouthFosterCareProtections.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
lgbtqprot
Select Protection, ProtectionCategory, StateShortName, Region
From lgbtqprot
order by Level
Insert cell
Plot.plot({
facet: {
data: lqbtqprotarr,
x: "Region",
marginLeft: 10
},
marks: [
Plot.cell(
lqbtqprotarr,
Plot.stackX({
y: (_, i) => i % 5,
fill: "ProtectionCategory",
title: "Protection",
opacity: 0.7
})
),
Plot.text(
lqbtqprotarr,
Plot.stackX({
y: (_, i) => i % 5,
text: "StateShortName",
fill: "white",
fontSize: 20
})
),
Plot.axisY({ tickSize: 0, fontSize: 0 }),
],
x: { axis: null },
y: { axis: null },
color: {
type: "categorical",
range: ["darkred", "darkgreen", "navyblue" ],
legend: true,
style: {
fontSize: "15px"
}
},
style: {
fontSize: "15px"
},
height: 400,
width: 1000,
marginBottom: 50,
marginLeft: 75
})
Insert cell
Insert cell
Insert cell
chicago_restaurants_safety_passfail.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
chicago_restaurants
select perc, percclean, year, Results
from chicago_restaurants
where Results = 'Fail'
Insert cell
chicago_restaurants
select perc, percclean, year, Results
from chicago_restaurants
where year = 2018
Insert cell
Plot.plot({
style: "overflow: visible;",
marks: [
Plot.barY(chicago_restaurants, {x: "year", y: "perc", z: "Results", fill: "Results", opacity: 0.3}),
Plot.barY(year2018, {x: "year", y: "perc", z: "Results", fill: "Results"}),
Plot.ruleY([0]),
Plot.text(chicago_restaurants, {x: "year", y: 102, text: "yearchar", fontSize: 15}),
Plot.text(failperc, {x: "year", y: d => (d.perc+1.5), text: "percclean", fontSize: 17, fill: "maroon"}),
Plot.axisY({ tickSize: 0 }),,
Plot.axisX({ tickSize: 0, fontSize: 0 }),
],
color: {
type: "categorical",
range: ["rgba(0,128,128,0.5)", "darkred"],
domain: ["Pass","Fail" ],
legend: true
},
height: 600,
width: 800,
marginBottom: 50,
marginLeft: 75
})
Insert cell

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.
Learn more