Published
Edited
Feb 10, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
antibioticsDf = d3.json("https://cdn.jsdelivr.net/npm/vega-datasets@1.31.1/data/burtin.json")
Insert cell
Inputs.table(antibioticsDf)
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {
// scales go into here
},
marks: [
Plot.dotX(antibioticsDf, {
x: "Neomycin",
fill: "salmon"
})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
type: "sqrt",
ticks: 20,
grid: true,
domain:[0, 40] // we added the domain
},
marks: [
Plot.dotX(antibioticsDf, {
x: "Neomycin",
fill: "salmon"
})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
type: "log",
base: 10, // the default is base 10
ticks: 10,
grid: true
},
marks: [
Plot.dotX(antibioticsDf, {
x: "Neomycin",
fill: "salmon"
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {
type: "log",
base: 10, // the default is base 10
grid: true,
axis: "top",
reverse: true,
},
marks: [
Plot.dotX(antibioticsDf, {
x: "Neomycin",
fill: "salmon"
})
]
})
Insert cell
Insert cell
Plot.plot({
caption: "Neomycin MIC (μg/ml, reverse log scale)",
x: {
type: "log",
base: 10, // the default is base 10
grid: true,
axis: "top",
reverse: true,
},
marks: [
Plot.dotX(antibioticsDf, {
x: "Neomycin",
fill: "salmon"
})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
type: "log",
grid: true,
sort: true,
reverse: true,
},
y: {
type: "log",
grid: true,
sort: true,
reverse: true
},
marks: [
Plot.dot(antibioticsDf, {
x: "Neomycin",
y: "Streptomycin",
fill: "steelblue"
})
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dotX(antibioticsDf, {
x: "Neomycin",
fill: "steelblue"
})
],
x: {
grid: true,
type: "log",
tickRotate: -45,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 5,
labelAnchor: "left",
labelOffset: 0,
nice: true,
label: "Neomycin"
}
})
Insert cell
Insert cell
Plot.plot({
caption: "Relationship between Neomycin and Streptomycin",
x: {
type: "log",
grid: true,
sort: true,
reverse: true,
ticks: 10,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "right",
labelOffset: 0,
nice: true,
label: "Neomycin"
},
y: {
type: "log",
grid: true,
sort: true,
reverse: true,
ticks: 10,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "top",
labelOffset: 0,
nice: true,
label: "Streptomycin"
},
marks: [
Plot.dot(antibioticsDf, {
x: "Neomycin",
y: "Streptomycin",
fill: "steelblue"
})
]
})
Insert cell
Insert cell
Plot.plot({
caption: "Relationship between Neomycin and Streptomycin",
width: width,
height: 400,
x: {
domain: [0.001, 1e2], // What does 1e2 mean?
type: "log",
grid: true,
sort: true,
reverse: true,
ticks: 10,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "right",
labelOffset: 0,
nice: true,
label: "Neomycin"
},
y: {
domain: [0.001, 1e3],
type: "log",
grid: true,
sort: true,
reverse: true,
ticks: 10,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "top",
labelOffset: 0,
nice: true,
label: "Streptomycin"
},
marks: [
Plot.dot(antibioticsDf, {
x: "Neomycin",
y: "Streptomycin",
fill: "steelblue"
})
]
})
Insert cell
Insert cell
Insert cell
tipsDf = FileAttachment("tips.csv").csv({
typed: true
})
Insert cell
Inputs.table(tipsDf)
Insert cell
Plot.plot({
x: {
type: "point",
domain: "Sun Mon Tues Wed Thur Fri Sat".split(" "), // ["Sun", "Mon", ...]
grid: true
},

marks: [
Plot.dotX(tipsDf, {
y: "total_bill",
x: "day",
fill: "salmon",
fillOpacity: 0.5
})
]
})
Insert cell
Insert cell
viewof paddingValue = Inputs.range([0, 1], {value: 0.1, step: 0.01, label: "Padding"})
Insert cell
viewof alignValue = Inputs.range([0, 1], {value: 0.5, step: 0.5, label: "Amount"})
Insert cell
Plot.plot({
x: {
type: "point",
domain: "Sun Mon Tues Wed Thur Fri Sat".split(" "),
grid: true,
padding: paddingValue,
align: alignValue
},

marks: [
Plot.dotX(tipsDf, {
y: "total_bill",
x: "day",
fill: "salmon",
fillOpacity: 0.5
})
]
})
Insert cell
Insert cell
Insert cell
data = [
{episode: "A", season: 1, rating: "1"},
{episode: "B", season: 1, rating: "3"},
{episode: "A", season: 2, rating: "2"},
{episode: "B", season: 2, rating: "1"}
]
Insert cell
Insert cell
Plot.plot({
height: 300,
width: 300,
padding: 0.05,
grid: true,
x: {
axis: "top",
label: "Episode"
},
y: {
label: "Season"
},
color: {
scheme: "greens"
},
marks: [
Plot.cell(data, {
x: "episode",
y: "season",
fill: "rating",
// rx: 20 // uncomment for circles
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
scheme: schemeq
},
marks: [
Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})
]
})
Insert cell
Insert cell
Plot.plot({
color: {
type: "linear",
range: ["steelblue", "green"]
},
marks: [
Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
type: "diverging"
},
marks: [
Plot.cell([-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5], {x: d => d, fill: d => d})
]
})
Insert cell
Insert cell
Insert cell
Inputs.table(tempDf)
Insert cell
Plot.plot({
grid: true,
color: {
type: "diverging",
scheme: "BuRd"
},
marks: [
Plot.ruleY([0]),
Plot.dot(tempDf, {
x: d => new Date(0, 0, d["Year"] / 10), // Explain conversion of date due to data
// x: "Year",
y: "Value",
stroke: "Value"
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
type: "categorical",
scheme: schemec
},
marks: [
Plot.cell([..."ABCDEFGHIJ"], {x: d => d, fill: d => d})
// ["A", "B", ...]
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marginBottom: 80, // extra space for the label
caption: "Relationship between Penicillin and Streptomycin according to Bacteria Genus",
width: width,
height: 300,

// Here we are faceting by the "Genus" column, which splits the data into four different
// rows (x) that are: Salmonella, Staphyloccoccus, Streptococcus, and other.
facet: {
data: antibioticsDf,
x: "Genus"
},
color: {
legend: true
},
marks: [
Plot.frame(),
Plot.dot(antibioticsDf, {
x: "Neomycin",
y: "Penicillin",
fill: "Gram_Staining"
})
],

// Emphasize the difference between the scale vs channel
// What do each of the options do?
x: {
domain: [0.0001, 1e2],
type: "log",
grid: true,
sort: true,
reverse: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "center",
labelOffset: 40,
nice: true, // rounding the numbers to make it nicer; comment this out and see what happens
axis: "bottom",
// label: "Neomycin"
},
// Same as above
y: {
domain: [0.0001, 1e4],
type: "log",
grid: true,
sort: true,
reverse: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "center",
labelOffset: 40,
nice: true,
axis: "left",
// What's the difference between axis and label? Try changing this.
// label: "Penicillin"
}
})
Insert cell
Insert cell
Plot.plot({
caption: "Relationship between Penicillin and Streptomycin according to Bacteria Genus",
width: width,
height: 300,
facet: {
data: tipsDf,
x: "sex",
y: "smoker"
},
marks: [
Plot.frame(),
Plot.dot(tipsDf, {
x: "day",
y: "total_bill",
fill: "steelblue",
fillOpacity: 0.3
})
],
x: {
grid: true,
sort: true,
reverse: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "right",
labelOffset: 0,
nice: true,
},
y: {
grid: true,
sort: true,
reverse: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "top",
labelOffset: 0,
nice: true,
}
})
Insert cell
Insert cell
Plot.plot({
caption: "Total Bill Payment, Day, Sex, and Smoker Status",
width: width,
height: 300,

// Here we are faceting by both the x- and y-axis, i.e., row and column.
facet: {
data: tipsDf,
x: "sex",
y: "smoker",
marginRight: 80 // try changing this value
},
marks: [
Plot.frame(),
Plot.dot(tipsDf, {
x: "day",
y: "total_bill",
fill: "steelblue",
fillOpacity: 0.3
})
],
x: {
grid: true,
sort: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "right",
labelOffset: 0,
nice: true,
},
y: {
grid: true,
sort: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "top",
labelOffset: 0,
nice: true,
}
})
Insert cell
Insert cell
Plot.plot({
width: width,
height: 300,
facet: {
data: tipsDf,
x: "sex",
y: "smoker",
marginRight: 80 // try changing this value
},
marks: [
Plot.frame(),
Plot.dot(tipsDf, {
x: "day",
y: "total_bill",
fill: "steelblue",
fillOpacity: 0.3,
facet: "include" // change this to demonstrate
}),
Plot.dot(tipsDf, {
x: "day",
y: "tip",
fill: "salmon",
fillOpacity: 0.3
})
],
x: {
grid: true,
sort: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "right",
labelOffset: 0,
nice: true,
},
y: {
grid: true,
sort: true,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "top",
labelOffset: 0,
nice: true,
}
})
Insert cell
Insert cell
Insert cell
penguinsDf = FileAttachment("penguins.csv").csv({typed: true})
Insert cell
Inputs.table(penguinsDf)
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