# Data loads but doesn't visualize

**URL:** <https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565>\
**Category:** Help\
**Created:** [May 16, 2022, 8:58pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565 "2022-05-16T20:58:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![neurogenomics](https://avatars.discourse-cdn.com/v4/letter/n/46a35a/32.png) [@neurogenomics](https://talk.observablehq.com/u/neurogenomics)\
**Post date:** [May 16, 2022, 8:58pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/1 "2022-05-16T20:58:48Z")

</div>

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!

[https://observablehq.com/@neurogenomics/sample-data-viz-from-hive](https://observablehq.com/@neurogenomics/sample-data-viz-from-hive)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [May 16, 2022, 9:16pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/2 "2022-05-16T21:16:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [May 16, 2022, 9:22pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/3 "2022-05-16T21:22:31Z")

</div>

+1 to Fil; here’s a suggestion: [Comparing Sample Data Viz from HIVE to Sample Data Viz from HIVE / Observable](https://observablehq.com/compare/d18e5f456e8e9e70...789f71370f1e5eb8)

(It won’t work until you merge it because of your CORS settings.)

I also changed this cell a bit:

```nohighlight
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](https://observablehq.com/@observablehq/file-attachments) in your notebook,** you can automatically convert strings to numbers (when appropriate) by passing {typed: true}, as in:

```nohighlight
data = FileAttachment("data.csv").csv({typed: true});

```

**If you’re using [d3-fetch](https://github.com/d3/d3-fetch#csv) to load a CSV from a URL,** you can pass d3.autoType as the second argument to d3.csv to do the same thing:

```nohighlight
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

```nohighlight
myFileTable = d3Fetch.csv(
  "https://hive.aws.biochemistry.gwu.edu/help/mqc.fileTable.csv", 
  d3.autoType
)

```

---

<div class="post-metadata">

**Author:** ![neurogenomics](https://avatars.discourse-cdn.com/v4/letter/n/46a35a/32.png) [@neurogenomics](https://talk.observablehq.com/u/neurogenomics)\
**Post date:** [May 17, 2022, 12:04am UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/4 "2022-05-17T00:04:43Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [May 17, 2022, 3:20am UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/5 "2022-05-17T03:20:55Z")

</div>

> 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

```js
typeof myFileTable[0][" A_fr"]

```

which returns “number” (now that it’s parsed), or

```js
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.

 ![24DCE311-0508-4D62-A8C0-2C84B2F7E970-953-0002D9BE4BFCE5D6](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/87adef5a2cf81ecbd58931395260ff49c1bac751.jpeg)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [May 17, 2022, 5:06am UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/6 "2022-05-17T05:06:53Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![neurogenomics](https://avatars.discourse-cdn.com/v4/letter/n/46a35a/32.png) [@neurogenomics](https://talk.observablehq.com/u/neurogenomics)\
**Post date:** [May 18, 2022, 2:10am UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/7 "2022-05-18T02:10:10Z")

</div>

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)](https://observablehq.com/@neurogenomics/sample-data-viz-from-hive)

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [May 18, 2022, 2:13am UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/8 "2022-05-18T02:13:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![neurogenomics](https://avatars.discourse-cdn.com/v4/letter/n/46a35a/32.png) [@neurogenomics](https://talk.observablehq.com/u/neurogenomics)\
**Post date:** [May 18, 2022, 1:14pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/9 "2022-05-18T13:14:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [May 18, 2022, 5:44pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/10 "2022-05-18T17:44:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![neurogenomics](https://avatars.discourse-cdn.com/v4/letter/n/46a35a/32.png) [@neurogenomics](https://talk.observablehq.com/u/neurogenomics)\
**Post date:** [May 18, 2022, 6:12pm UTC](https://talk.observablehq.com/t/data-loads-but-doesnt-visualize/6565/11 "2022-05-18T18:12:53Z")

</div>

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](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.
