I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
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"
})
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"
})
viewof c_attrib = select({
title: "color_attrib",
options: selectedAttributes,
value: selectedAttributes[2]
})
viewof c_type = select({
title: "color_type",
options: ["quantitative", "ordinal", "nominal"],
value: typeof(data[0][c_attrib]) === typeof(0) ? "quantitative": "nominal"
})
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>`
})
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;
}
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;
}
viewof delimiter = select({
title: "Delimiter",
options:[
",",
";",
{value:"\t", label:"Tab"}],
value:","
})
viewof myFile = html`<input type="file"/ accept="text/csv;text/json">`
Files.text(myFile).then(data => {
try {
mutable data = JSON.parse(data);
} catch (e) {
mutable data = d3.dsvFormat(delimiter).parse(data, d3.autoType);
}
})
viewof save = DOM.download(
new Blob([d3.csvFormat(selected)], {type: "text/csv"}),
"export.csv",
`Export ${selected.length} selected rows`
)
isNumerical = (attr) => typeof(data[0][attr]) === typeof(0)
vegaEmbed = require("vega-embed@4")
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.
