viewof csv = CSVText({value: sampleCSV})
csv
viewof tsv = TSVText({value: sampleCSV})
tsv
viewof json = JSONText({value: sampleJSON})
json
viewof list = ListText({value: [-10000, 2750, 4250, 3250, 2750]})
list
viewof a = JSONText({value: ["First", "Second", "Third"]})
viewof b = bind(ListText(), viewof a)
a
ParsedText = ({value = "", parser = d => d, formatter = d => d} = {}) => {
const textarea = html`<textarea style=${style} oninput=${oninput}>`;
const node = html`<form onsubmit=${onsubmit}>
${textarea}
<button type=submit>Submit</button>
</form>`;
function oninput(e) {
e.stopPropagation();
}
function onsubmit(e) {
set(node, textarea.value);
e.preventDefault();
}
// Update the display whenever the value changes
Object.defineProperty(node, "value", {
get() {
return parser(value);
},
set(v) {
if (typeof v === "object") v = formatter(v);
textarea.value = value = v;
}
});
// Set the initial value
node.value = value;
return node;
}
DSVText = ({value, row = d3.autoType, delimiter = ",", headers = true} = {}) => {
const dsv = d3.dsvFormat(delimiter);
const parser = headers ? d => dsv.parse(d, row) : d => dsv.parseRows(d, row);
const formatter = headers ? dsv.format : dsv.formatRows;
return ParsedText({value, parser, formatter});
}
CSVText = options => DSVText({...options, delimiter: ","})
TSVText = options => DSVText({...options, delimiter: "\t"})
ListText = options => ParsedText({
...options,
parser: d => d3.autoType(d.split("\n")),
formatter: d => d.map(autoFormat).join("\n")
})
JSONText = options => ParsedText({
...options,
parser: JSON.parse,
formatter: d => JSON.stringify(d, null, 2)
})
style = ({
display: "block",
marginBottom: "3px",
width: "240px",
height: "120px",
fontFamily: "var(--sans-serif)",
whiteSpace: "nowrap"
})
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input"));
}
autoFormat = d => d instanceof Date ? dateFormat(d) : String(d)
dateFormat = d3.utcFormat("%Y-%m-%d")
sampleCSV = FileAttachment("sample@1.csv").csv({typed: true})
sampleJSON = FileAttachment("sample.json").json()
d3 = require("d3@6")
import {bind, html} from "@observablehq/inputs"
import {toc} from "@mbostock/toc"
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.
