md`# Syllabus heatmap `
import {select} from '@jashkenas/inputs'
FileAttachment("Disciplinary Perspectives-&&-Course Topics@2.csv").csv()
viewof fileselection = {
const files = new Map([
FileAttachment("Course Level-&&-Course Topics@4.csv"),
FileAttachment("Disciplinary Perspectives-&&-Instructor Name@3.csv"),
FileAttachment("Course Level-&&-Disciplinary Perspectives@4.csv"),
FileAttachment("Instructional Modality-&&-Instructor Name@1.csv"),
FileAttachment("Course Level-&&-Instructional Modality@2.csv"),
FileAttachment("Instructor Name-&&-Instructional Modality@6.csv"),
FileAttachment("Course Level-&&-Instructor Name@2.csv"),
FileAttachment("Instructor Name-&&-Course Topics@8.csv"),
FileAttachment("Disciplinary Perspectives-&&-Course Topics@2.csv"),
FileAttachment("Disciplinary Perspectives-&&-Instructional Modality@3.csv")
].map(f => [f.name, f]));
const form = select({
description: "Select Dataset",
options: Array.from(files.keys()),
value: "Disciplinary Perspectives-&&-Course Topics--03252022.csv"
});
return Object.defineProperty(html`<div>${form}`, 'value', {get() { return files.get(form.value) }});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
vega = require("vega-embed@3")
viewof selection = {
const colorschemas = new Array("blues","reds","oranges","greens","purples","purpleblue","redpurple","yellowgreen");
const form = select({
description: "Select Color Schema",
options: colorschemas,
value: "oranges"
});
return Object.defineProperty(html`<div>${form}`, 'value', {get() { return form.value }});
}
d3 = require('d3')
data = fileselection.csv()
//from https://observablehq.com/@john-guerra/get-column-names-from-csv
keys=Object.keys(data[0])
// from https://www.d3-graph-gallery.com/graph/basic_datamanipulation.html
max = d3.max(data, function(data) { return +data.value; });
colorschema=selection
viewof heatmap = vega({
data: { values: data },
width: 800,
height: 800,
title: fileselection,
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: keys[0], type: 'o'},
y: { field: keys[1], type: 'o'},
color: {
field: 'value',
type: 'q',
scale: { scheme: selection, domain: [0, max] }
},
}
});
clicked = Generators.observe((notify) => {
const clicked = (event, {datum}) => window.open(datum.url);
heatmap.addEventListener("click", clicked);
return () => heatmap.removeEventListener("click", clicked);
})
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.
