Faculty Member |
Exploring interactive visual teaching tools in Industrial Engineering classes
athletes = FileAttachment("athletes.csv").csv({typed: true})
Inputs.table(athletes)
dotplot.legend("color")
dotplot = Plot.dot(athletes, {x: "weight", y: "height", stroke: "sex", grid: true}).plot()
Plot.plot({
grid: true,
marks: [ Plot.dot(athletes, {x: "weight", y: "height", stroke: "sex"}) ]
})
/*
dotplot = Plot.dot({data:athletes, x: "weight", y: "height", stroke: "sex", grid: true}).plot()
dotplot = Plot.dot(athletes, {x: "weight", y: "height", stroke: "sex", grid: true}).plot()
marks: [ Plot.dot(athletes, {x: "weight", y: "height", stroke: "sex"}), Plot.ruleY([0]) ]
facet: {
data: athletes,
y: "weight",
x: "height",
stroke: "sex"
},
*/
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.rect(athletes, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", fill: "sex"})).plot()
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})).plot()
Plot.plot({
grid: true,
facet: {
data: athletes,
y: "sex"
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})),
Plot.ruleY([0])
]
})
function previews(notebooks, options) {
return htl.html`<div style="display: grid; grid-gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(160px, 5fr));">${notebooks.map(notebook => preview(notebook, options))}</div>`;
}
function preview({path, title, author, thumbnail}, {target = "_blank"} = {}) {
return htl.html`<a href=${`/${path}`} target=${target} title="${title}${author ? `by ${author}`: ""}" style="display: inline-flex; flex-direction: column; align-items: start; font: 400 .75rem var(--sans-serif); color: #1b1e23; width: 100%;" onmouseover=${event => event.currentTarget.firstElementChild.style.borderColor = "#1b1e23"} onmouseout=${event => event.currentTarget.firstElementChild.style.borderColor = "#e8e8e8"}>
<div style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 100%; padding-top: 62.5%; background-size: cover; background-image: url(https://static.observableusercontent.com/thumbnail/${encodeURI(thumbnail)}.jpg);"></div>
<div style="width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">${title}</div>
</a>`;
}
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.
