Published
Edited
Feb 2, 2022
1 star
animals = (await FileAttachment("animals.csv").csv()).map(d => ({
...d,
length_cm: +d.length_cm, // coerce as number
mass_kg: +d.mass_kg, // ditto
speed_mph: +d.speed_kph * 0.62137 // convert speed to mph
}))
marine = animals.filter(d => d.habitat == "Water")
Plot.plot({
marks: [
Plot.barX(marine, {x: "speed_mph", y: "name"})
]
})
// Type your code here
Plot.plot({
marginLeft: 100, // increase the margin
marks: [
Plot.barX(marine, {x: "speed_mph", y: "name"})
]
})
// Type your code here
Plot.plot({
marginLeft: 100,
y: {
domain: marine
.sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))
.map(d => d.name)
},
marks: [
Plot.barX(marine, {x: "speed_mph", y: "name"})
]
})
// Type your code here
Plot.plot({
marginLeft: 100,
y: {
domain: marine
.sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))
.map(d => d.name)
},
marks: [
Plot.barX(marine, {x: "speed_mph", y: "name"}),
Plot.text(marine, {
x: "speed_mph",
y: "name",
text: d => (d.speed_mph).toFixed(0), // supply the text
fill: "#FFFFFF", // change to white
dx: -10 // position the text
})
]
})
// Type your code here
Plot.plot({
marginLeft: 100,
x: {
ticks: 0, // remove x-axis labels
tickSize: 0, // drop x-axis ticks
label: "Speed (mph)" // rename x-axis title
},
y: {
domain: marine
.sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))
.map(d => d.name),
tickSize: 0, // drop y-axis ticks
label: null // remove y-axis title
},
marks: [
Plot.barX(marine, {x: "speed_mph", y: "name"}),
Plot.text(marine, {
x: "speed_mph",
y: "name",
text: d => (d.speed_mph).toFixed(0),
fill: "#FFFFFF",
dx: -10
}),
Plot.ruleX([0]) // add a line through the x-axis
],
caption: 'Source: speedofanimals.com' // add a source
})
// Type your code here
Plot.plot({
marginLeft: 120, // adjust margins
x: {
ticks: 0,
tickSize: 0,
label: "Speed (mph)"
},
y: {
domain: marine
.sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))
.map(d => d.name),
tickSize: 0,
label: null
},
marks: [
Plot.barX(marine, {
x: "speed_mph",
y: "name",
fill: "#CD0C4B" // add fill
}),
Plot.text(marine, {
x: "speed_mph",
y: "name",
text: d => (d.speed_mph).toFixed(0),
fill: "#FFFFFF",
dx: -10
}),
Plot.ruleX([0])
],
caption: 'Source: speedofanimals.com',
style: { fontSize: "12px" } // increase text size
})
// Type your code here
{
// filter by habitat or choose another metric
// const selected = animals.filter(d => d.habitat == "Land")
const plot = Plot.plot({
marks: [
// choose your mark
]
})
return plot
}
{
const lorries = (await FileAttachment("lorries.csv").csv()).map(d => ({
...d,
Date: new Date(d.Date),
Value: +d.Value
}))
const plot = Plot.plot({
height: 360,
width: 580,
y: {
domain: [0,120],
grid: true,
tickSize: 0,
label: "Thousands"
},
color: {
domain: ["Under 35", "36-45", "46-55", "56-65", "66+"],
range: ["#206095", "#27A0CC", "#003C57", "#118C7B", "#A8BD3A"]
},
marks: [
Plot.line(lorries, {x: "Date", y: "Value", z: "Age", stroke: "Age", strokeWidth: 3}),
Plot.dot(lorries, {x: "Date", y: "Value", z: "Age", fill: "Age"}),
Plot.text(lorries, Plot.selectLast({x: "Date", y: "Value", z: "Age", text: "Age", textAnchor: "start", dx: 5, dy: 3, fill: "Age", fontSize: 14}))
],
style: {fontSize: "12px", fontFamily: "'Open Sans', sans-serif", overflow: "visible"}
})
return plot
}
deaths = (await FileAttachment("excess-deaths.csv").csv()).map(d => ({
...d,
Date: new Date(d.Date),
Value: +d.Value
}))
panel1 = deaths.filter(d => d.Setting == "Care home" || d.Setting == "Hospital")
panel2 = deaths.filter(d => d.Setting == "Home" || d.Setting == "Other")
html`${[
Plot.plot({
height: 200,
width: 570,
marginTop: 40,
marginRight: 40,
marginLeft: 50,
x: {
ticks: 0,
tickSize: 0,
label: null
},
y: {
domain: [-2000, 6000],
ticks: 6,
grid: true,
tickSize: 0,
label: null
},
facet: {
data: panel1,
x: "Setting",
label: null
},
fx: {
domain: ["Hospital", "Care home"]
},
marks: [
Plot.ruleX(panel1, {
x: "Date",
y: "Value",
stroke: "#206095",
strokeWidth: 2.5
})
],
style: {fontSize: "12px", fontFamily: "'Open Sans', sans-serif"}
}),
htl.html`<p>`,
Plot.plot({
height: 200,
width: 570,
marginRight: 40,
marginLeft: 50,
marginBottom: 40,
x: {
ticks: [new Date("2020 03 13"), new Date("2020 08 21"), new Date("2021 01 29"), new Date("2021 07 09")],
tickFormat: "%d %b %y",
label: "Week ending"
},
y: {
domain: [-2000, 6000],
ticks: 6,
grid: true,
tickSize: 0,
label: null
},
facet: {
data: panel2,
x: "Setting",
label: null
},
marks: [
Plot.ruleX(panel2, {
x: "Date",
y: "Value",
stroke: "#206095",
strokeWidth: 2.5
})
],
style: {fontSize: "12px", fontFamily: "'Open Sans', sans-serif"}
})
]}`
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.
