Public
Edited
Nov 21, 2023
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof maxRowsForMatrix = slider({
min: 1,
max: data.length,
value: data.length>200 ? 200 : data.length,
step: 1,
description: "How many rows to show in the matrix"
})
Insert cell
viewof maxAttribsForMatrix = slider({
min: 1,
max: quantitativeAttributes.length,
value: quantitativeAttributes.length > 6 ? 6 : quantitativeAttributes.length,
step: 1,
description: "How many attributes to include in the matrix"
})
Insert cell
Insert cell
Insert cell
Insert cell
viewof c_attrib = select({
title: "color_attrib",
options: selectedAttributes,
value: selectedAttributes[2]
})
Insert cell
viewof c_type = select({
title: "color_type",
options: ["quantitative", "ordinal", "nominal"],
value: typeof(data[0][c_attrib]) === typeof(0) ? "quantitative": "nominal"
})
Insert cell
Insert cell
viewof selectedAttributes = checkbox({
title: "Attributes",
description: "What attributes to use",
options: attributes.map(a => ({value:a, label:a})),
submit: attributes.length>10 ? true :false ,
value: attributes,
form: html`<form id="john"></form>`
})

Insert cell
viewof noneButton = {
const button = html`<button>None</button>`;
d3.select(button)
.on("click", () => {
console.log("click");
d3.select(viewof selectedAttributes).selectAll("input").property("checked", false);
(viewof selectedAttributes).dispatchEvent(new Event('change'));
});
return button;
}
Insert cell
viewof allButton = {
const button = html`<button>All</button>`;
d3.select(button)
.on("click", () => {
console.log("click");
d3.select(viewof selectedAttributes).selectAll("input").property("checked", true);
(viewof selectedAttributes).dispatchEvent(new Event('change'));
});
return button;
}
Insert cell
Insert cell
Insert cell
Insert cell
viewof delimiter = select({
title: "Delimiter",
options:[
",",
";",
{value:"\t", label:"Tab"}],
value:","
})
Insert cell
viewof myFile = html`<input type="file"/ accept="text/csv;text/json">`
Insert cell
Files.text(myFile).then(data => {
try {
mutable data = JSON.parse(data);
} catch (e) {
mutable data = d3.dsvFormat(delimiter).parse(data, d3.autoType);
}
})
Insert cell
viewof save = DOM.download(
new Blob([d3.csvFormat(selected)], {type: "text/csv"}),
"export.csv",
`Export ${selected.length} selected rows`

)
Insert cell
isNumerical = (attr) => typeof(data[0][attr]) === typeof(0)
Insert cell
Insert cell
Insert cell
vegaEmbed = require("vega-embed@4")
Insert cell
Insert cell
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