How best to enter a small table of data?

Community Help
1

Sometimes it’s easiest to enter a small table of data directly into a cell rather than downloading it from the source. What’s the best approach for this? I have been using “new Map” to create a JavaScript map from an array of arrays and “get” to look up an entry, but for tables with more than two columns, this seems unwieldy.

In particular, the JavaScript error messages are not very good when I make typos; I find myself guessing where the syntax error might be.

2

I would consider using CSV format, but the best method probably depends on context / use case.

Try searching among existing notebooks https://observablehq.com/search?query=csv https://observablehq.com/search?query=table etc.

3

You could use an array of objects:

data = [
  { firstName: 'Jane', lastName: 'Doe', age: 33 },
  { firstName: 'John', lastName: 'Doe', age: 37 },
]
4

Maybe consider this “application” approach:

5

Hey Brian,

This is admittedly a guess, but to add to what other folks have already contributed to this thread - especially because you mention an error message, what you might be running into is how to represent JavaScript objects.

What you might be running into is how objects need to be parenthesized if they’re by themselves. Introduction to Code is a good primer on this topic: the gist is that, because Observable has blocks, like

a = { return 1; }

Objects need to be disambiguated by having parentheses, like:

a = ({ value: 1 })

Which differs from typical JavaScript, which might look like const a = { value: 1 }`.

6

Yep, thanks! (I did eventually figure that out.)

7

Aha. I wouldn’t have guessed that in particular was the issue.

Both:

a = ({ foo: 1, bar: 2 })

and

b = {
  return { foo: 1, bar: 2 };
}

will work. The latter can be nice if you want to run some other code to generate your object.

I wonder if there’s any way to make better error messages to help newcomers through this particular hurdle. SyntaxError: Unexpected token with a little red caret under the second : is indeed a bit hard to interpret if you don’t know what’s happening.

8

Ideally there would be UI for quick copy-and-paste of tabular data. Perhaps an “insert CSV data” action that automatically converts it to an array of objects with everything properly quoted and escaped?

Or suppose you want to copy a rectangle of data from a spreadsheet? What’s the easiest way to do that?

1 Like
9

A way to help improve that would be to try parsing the object as an expression once that error is hit and if it parses, output a friendlier message suggesting the addition of parens.

10

Does copy/paste work between e.g. google spreadsheet & excel or other desktop software?

I’m not too familiar with what browsers expose in their copy/paste API.

Edit: this new API doesn’t seem too broadly supported https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/read

Here’s Safari’s version, https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/CopyAndPaste.html

1 Like
11

Another option would be some kind of input mode that’s especially friendly for tabular data. (With arrow keys for switching between subcells and so on.) We know this has to be possible since Google Sheets does it.

But I guess CSV is it for now.

12

You can paste in data from Google Sheets into a variable as a string, and process that with d3.tsvParse.

cell 1:

pastedData = `source	target	value
Barry	Elvis	2
Frodo	Elvis	2
Frodo	Sarah	2
Barry	Alice	2
Elvis	Sarah	2
Elvis	Alice	2
Sarah	Alice	4`

cell 2:

dataPastedParsed = d3.tsvParse(pastedData)

Will get you:

dataPastedParsed = Array(7) [
  0: Object {source: "Barry", target: "Elvis", value: "2"}
  1: Object {source: "Frodo", target: "Elvis", value: "2"}
  2: Object {source: "Frodo", target: "Sarah", value: "2"}
  3: Object {source: "Barry", target: "Alice", value: "2"}
  4: Object {source: "Elvis", target: "Sarah", value: "2"}
  5: Object {source: "Elvis", target: "Alice", value: "2"}
  6: Object {source: "Sarah", target: "Alice", value: "4"}
  columns: Array(3) ["source", "target", "value"]
]

I use it in this notebook.

3 Likes
13

I was able to shamelessly use http://tabulator.info/ in a notebook https://observablehq.com/@bcardiff/relative-placement

For small tables it works, but there are some flickering every know and then.

It would be good to have memory/store of data input so when the cell containing the table is recalculated some data can be kept.

Feel free to use it as inspiration if it helps.