The avatar for @deepsha
Deepsha
Public
30 Day chart challenge
Edited
Sep 26, 2023
2 forks
9 stars
8
30 Day chart challenge
30 day chart challenge - Part 2
30 day chart challenge - Part 1
30 day chart challenge - Part 330 Day Chart Challenge Part 430 Day Chart Challenge Part 5
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

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