Hello,
New to Observable (and to js in general). Apologies if I’ve missed this somewhere. I’ve successfully pulled in data and I can verify that I can see it in a table, but I cannot seem to visualize it. I’ve copied some examples and tried looking at documentation for the functions they suggest to see if I can figure out what I’m doing wrong, but I seem to be at a dead end. I don’t get any error, just a blank plot. Any advice is very much appreciated!
You can see in myFileTable.columns that there are spaces in the csv headers, resulting in the column names being " A_fr" and " qA".
Plot.dot(myFileTable, {x: " A_fr", y: " qA"}).plot() shows something.
+1 to Fil; here’s a suggestion: Comparing Sample Data Viz from HIVE to Sample Data Viz from HIVE / Observable
(It won’t work until you merge it because of your CORS settings.)
I also changed this cell a bit:
myFileTable = d3Fetch.csv(
"https://hive.aws.biochemistry.gwu.edu/help/mqc.fileTable.csv",
{typed: true}
)
I think you’re mixing two styles here:
If you have a CSV file attachment in your notebook, you can automatically convert strings to numbers (when appropriate) by passing {typed: true}, as in:
data = FileAttachment("data.csv").csv({typed: true});
If you’re using d3-fetch to load a CSV from a URL, you can pass d3.autoType as the second argument to d3.csv to do the same thing:
data = d3.csv(url, d3.autoType)
This achieves basically the same thing, but file attachments use {typed: true}, and d3.csv uses d3.autoType. (Like so many things about the relationship between D3 and Observable, this is a little confusing and easy to mix up!)
So I changed your cell to
myFileTable = d3Fetch.csv(
"https://hive.aws.biochemistry.gwu.edu/help/mqc.fileTable.csv",
d3.autoType
)
@Fil Oof, good catch. Thank you! Looks like that tool outputs spaces in its csv.
@tophtucker Thank you very much, really appreciate the explanation. Just eyeballing the data once it’s called in observable (not sure how different data types are represented or how to call the equivalent of python type() on data), I couldn’t tell if it was stringified or if it was a number, but I saw quotes around stuff I knew was strings and not around those values, so I assumed they were safe to work with.
not sure how different data types are represented or how to call the equivalent of python type() on data
You can use typeof in JavaScript; e.g., in your notebook, in a new cell, you could do
typeof myFileTable[0][" A_fr"]
which returns “number” (now that it’s parsed), or
typeof myFileTable[0]["FileName"]
which returns “string”.
I couldn’t tell if it was stringified or if it was a number, but I saw quotes around stuff I knew was strings and not around those values, so I assumed they were safe to work with.
Yeah, that seems like it’d be good intuition to me! Where were you looking at the numbers?
Your intuition oughta be true when looking at what we call the Inspector — the nested, collapsible, monospaced, syntax-highlighted view of an object. There, strings have quotes around them, and numbers don’t.
But in the table, strings don’t have quotes around them. Though there are subtler cues you can look for, with practice; numbers are right-aligned, and strings are left-aligned.
If I may add something, there should be no need to require d3-fetch on top of the built-in d3 symbol—you could replace d3Fetch.csv in the “import data” line by d3.csv.
I’m having a blast with it – but everything suddenly disappeared! I embedded four of the plots in a webpage and everything was working just fine, but then stopped loading the content. When I went to check on the notebook, most of it seems to have disappeared, and I can’t figure out why. When I look at the history, I don’t see the previous versions of the plots either. Have you seen something like this before?
Sample Data Viz from HIVE / neurogenomics / Observable (observablehq.com)
People that are not notebook authors (like us external viewers) cannot see the history of your notebook, but I can confirm that I see at least 10 charts and one table view.
Thank you @aaronkyle – just discovered that others in our group are also able to see it (as well as the page where it’s embedded), which is odd because I can’t see it in either place or on other browsers, whether logged in or not. In any case, it looks like this is just something on my end to troubleshoot. Thank you very much for taking a look.
I see the charts too (lookin’ good!!). Odd that you can’t; especially odd that you can’t even in different browsers! (When something is broken for just one person, especially in Chrome, my first suggestion is usually to open it in an incognito window where no browser extensions are running.)
Could you open the browser’s developer console (Cmd-Opt-I in Chrome on Mac) and show us any errors you see there?
Thank you!
And thank you for trying to help me troubleshoot, really appreciate it. I think it’s resolved now, although I have no idea how.
I restarted my computer and was still having the issue, so I got on a webex with someone from our group to see the embedded version as they saw it, but the plot was a little mangled (as though a squished copy of the plot duplicated to the right).
I just restarted my computer again, and everything seems to be OK now. Both the notebook and the test page for embedding (https://hive2.biochemistry.gwu.edu/help/test.html) look like they’re displaying the plots again.
Didn’t try Chrome (though they are chromium based). Tried Edge, Brave, and Firefox. No errors in console, but I did get a warning: “Unrecognized feature: ‘vr’” at line 187.
