I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Apr 23
2 forks
Importers
10 stars
viewof data = dataInput({
value: [{ name: "Your Initial Data" }],
delimiter: ",", // Optional
format: "auto", // Optional, one of MongoExport, JSON, CSV, CSVNoAutoType
label: "Load a data file"
})
data
function dataInput({
value = [],
initialValue = undefined,
accept = "",
delimiter = ",",
format = "auto",
label
} = {}) {
if (initialValue !== undefined && value.length === 0) {
value = initialValue;
}
const processFile = (data) => {
if (format === "auto") {
try {
return loadJSON(data, delimiter);
} catch {
console.log("Failed with json");
}
try {
return loadMongoExport(data);
} catch {
console.log("Failed with MongoExport");
}
try {
return loadCSVAutoType(data, delimiter);
} catch {
console.log("Failed with CSV AutoType");
}
try {
return loadCSV(data);
} catch {
console.log("Failed with CSV");
}
return value;
} else {
switch (format.toUpperCase()) {
case "JSON":
try {
return loadJSON(data, delimiter);
} catch {
console.log("Failed with json");
return initialValue;
}
case "MONGOEXPORT":
try {
return loadMongoExport(data);
} catch {
console.log("Failed with MongoExport");
return value;
}
case "CSV":
try {
return loadCSVAutoType(data, delimiter);
} catch {
console.log("Failed with CSV AutoType");
return value;
}
case "CSVNOAUTO":
try {
return loadCSV(data);
} catch {
console.log("Failed with CSV");
return value;
}
}
}
};
const fileInput = htl.html`<input type="file" accept="${accept}">`;
let holder;
if (label) {
fileInput.style.display = "none";
const labelButton = htl.html`<button>${label}
</button>`;
holder = htl.html`<label>
${labelButton}
${fileInput}
</label>`;
labelButton.addEventListener("click", (evt) => {
evt.preventDefault();
fileInput.click();
});
} else {
holder = htl.html`${fileInput}`;
}
const form = htl.html`<form>
${holder}
<form>`;
async function parseFile() {
widget.setValue(
await Files.text(
fileInput.multiple ? fileInput.files : fileInput.files[0]
).then(processFile)
);
}
const widget = ReactiveWidget(form, { value });
fileInput.addEventListener("change", async (evt) => {
evt.preventDefault();
parseFile();
});
return form;
}
ReactiveWidget = require("reactive-widget-helper")
loadMongoExport = (data) => {
console.log("Trying Mongo export");
const res = [];
for (let row of data.split("\n")){
if(row === "") { continue; }
try{
row = JSON.parse(row);
res.push(row);
} catch(e3){
break;
}
}
if (res.length>0) {
return res;
} else {
throw "Error parsing MongoExport";
}
}
loadJSON = (data) => {
console.log("Trying JSON");
return JSON.parse(data);
}
loadCSVAutoType = (data, delimiter) => {
console.log("Trying CSV autotype");
return d3.dsvFormat(delimiter).parse(data, d3.autoType);
}
loadCSV = (data, delimiter) => {
console.log("Trying CSV");
return d3.dsvFormat(delimiter).parse(data);
}
d3 = require("d3")
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.
