Undefined error when array of data is in it's own cell

Community Help
1

Hi everyone!
I am trying to adapt the following example by moving the array named “data” out of the “chart” function and into its own cell. Link to original example: Circle Packing - Text Wrap Example 2 / eric-lee / Observable

I’m getting an undefined error in my chart function and I’m unsure how to resolve it. Link to adapted code: Text Wrap Example Bug / Lauren Kung / Observable

Any leads? Thanks in advance :smiley:

2

data should be an object, but in your code, it is an array. If you replace the outer square brackets with parentheses, then the code will work. In Observable, if you want a cell’s value to be an object literal, then you surround the object in parentheses.

1 Like
3

That’s very helpful, thank you very much! If I’m parsing a raw file into an array with d3.csvParse(), do you know how would I change the resulting array into an object?

4

Could you share the file?

The data gets passed to d3.hierarchy. It expects an object representing the root node with an array of children. The root node represents the big circle and the children are the smaller circles inside the big one. If your file contains the array of children, then you could do something like

data = ({
    name: "flare",
    mycolor: gih,
    stroke: "#727272",
    children: arrayReadFromFile
})
1 Like
5

Here is the file! Untitled / Lorn K / Observable

I was trying to use the circle wrapping example to improve my understanding for my code that I’m working on, but unfortunately I’m still having trouble using the lines and words functions in my own code. Thank you so much!

6

I’ve made some changes to your notebook, which I believe gets closer to what you are looking for.

If you aren’t drawing packed circles, then you don’t need to use d3.hierarchy and you can leave your data as an array.

1 Like
7

Thank you for all of your help! This does resolve many of my issues.

Do you happen to know why the free text notes for the first 3 objects in the moodData array do not appear?

8

Previously, the domain of the x scale was from 2021-03-24T00:00 to 2021-04-02T00:00. But the first object has a date of 2021-04-02T15:37, which is after the end of the domain, so it was put off screen. I’ve now updated the domain to be from 2021-03-24T00:00 to 2021-04-03T00:00. Now they all show up. This removes the need for the queryDates cell.

I’ve also adjusted the margins, which helps some too.

Here’s the updated example.

1 Like
9

Oh that helps so much, thank you!

Do you happen to have any suggestions for creating rectangles or boxes around the text? I attached a photo to describe what I’m referring to.

textWrap
textWrap2451×188 63.3 KB

10

I’ve made some more changes to your notebook to show how this can be done.

The basic idea is to create one <g> element for each object in moodData and set its position. Then add a rectangle and text element to each group.

1 Like