Published
Edited
May 31, 2022
1 star
Insert cell
Insert cell
Plot.plot({
grid: true,
inset: 10,
width: width*1.5,
height: width*0.5,
marginLeft: 40,
marginBottom:50,
y:{
label:' Nitrates in Million Tons',
transform: d => d / 1000000
},
x:{
tickRotate:90,
ticks: 20
},
facet: {
data: NO3,
x: "animal",
label:null,
},
fx:{
padding:0.04,
tickFormat: emoji
},
marks: [
Plot.frame(),
Plot.text(NO3,{x: "year", y: "no3",title: d => `${d.no3} tons`,text: d => '💩'})
],
style: {
backgroundColor: "F4D06F",
color: "#000",
fontFamily: "system-ui",
fontSize: 14,
},
caption:"New Zealand Nitrate levels from stock between 1990 and 2017"
})
Insert cell
function emoji(animal) {
return {
"Beef cattle": "🥩",
"Dairy cattle": "🐮",
"Sheep": "🐏",
"Deer": "🦌"
}[animal];
}
Insert cell
no3data = FileAttachment("no3.json").json()
Insert cell
NO3 = _.compact(no3data.map(d=> {
if(d.no3_kg_per_yr > 0) return {year:new Date(d.year),animal:d.animal,no3:d.no3_kg_per_yr}
})
)
Insert cell
animal_key = _.invert(_.uniq(no3data.map(d=> d.animal)))
Insert cell
viewof table = Inputs.table(NO3, {})
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