[Execution error] data.flatMap is not a function

Hi D3 community,
i’m new here, so i don’t know if this is the right place for my question.

I wanted to try out the example “Directed chord diagram” (2011 euro crisis) on my local machine inside of an HTML document.

First i discovered, that the JavaScript functions need a server for loading a file. So i set up a local server. It works fine. I can access my HTML file at localhost and i can also build some empty graphs with D3.

Then i wanted to try out the example of the euro crisis directed chord diagram. (Link)

My browser throws the exception:
“Uncaught TypeError: data.flatMap is not a function”

How can the code work inside of Observable but not outside of it? I have the latest D3 version 7 included with my HTML file.

Do you know why flatMap might not work in my situation?


(I’m working on a german localized system. Hence the german Firefox webdev UI)

Have a nice day :wave:
jellyFish

d3.csv() returns a promise that you need to await: d3-fetch | D3 by Observable

Hi mootari,
i tried this one before. But there it throws the exception:
“Uncaught SyntaxError: await is only valid in async functions, async generators and modules”

I have to say that i’m also new to Javascript. I know HTML, CSS and some PHP. I don’t know what this means. :sweat_smile: What is your take on that error message?

I thought that i just could ignore “await”, because in other programming languages (like Visual Basic and Java) i don’t need such a prefix. I also know the concept of accessability prefixes like public, shared, etc… But this error seems to be of a different origin.

jellyFish

Check out this post on stackoverflow. Try <script type="module"> instead of just <script>

Thanks :ok_hand:
I think this was helpful. I still cannot access the “data” constant in the debugger. At least it executes a bigger portion of the code … until it throws a new error:

“Uncaught ReferenceError: DOM is not defined”
at:
“const textId = DOM.uid(“text”);”

At this point i don’t even know wether it is a JavaScript function or a D3 function.

I referenced the D3.js file in the head of my HTML document. Is it possible that now as a module it cannot access the D3 classes and functions anymore?

Can you help me or should i just open another thread specific to solving the adaptation of this Observable code example? :sweat_smile:

jellyFish

It’s neither. :slight_smile:

Observable notebooks have access to a range of utility functions that are provided by the Observable Standard Library.

The source for DOM.uid() e.g. can be found here.

If you want to use the library directly instead of replacing its helpers with something else, be sure to check out the section “Installing” at the end of the Readme.

I could not compile the std-lib as a library. I’m used to have DLLs and simple import commands. This npm stuff is not for my knowledge level. Also i thought to just reference js files. But there seem to be new concepts of different reference types, which i was not aware of.

But in the end i managed to make it work by copying the single “uid” function and deleting the “export” prefix. Then it could access the function directly inside of the script tag of my HTML file.

This is everything i need to be able to play around with different examples.

Thanks mootari and cobus :handshake: