Basic question on design

Community Help
1

I’m fairly new to coding and wondering if there is a good path to walk through in terms of a zero to live code deployment.

For example, In looking at the Radial Dendrogram: https://beta.observablehq.com/@mbostock/d3-radial-dendrogram I can see the raw code that is driving the underlying ‘nodes’ but I can’t easily discern what sort of data would fit and would not.

Further, the raw https://raw.githubusercontent.com/observablehq/datasets/master/flare/index.js even when run through something like Prettier doesn’t feel mathematical so much as contrived. I don’t mean that to seem that I’m ragging on the raw file, rather than ‘I just don’t quite get it’.

Can someone point me in the right direction in terms of being able to intuit this more natively? I’d like to get a grasp of how each type of visual can display content, and also how to quickly mock up the content for that (in the example of the flare here, it seems hard to mock up the data as it is carefully designated under the parent/child tree).

Apologies for being a noob at all this, and grateful for any pointers!

2

The data is specified as a nested object, where each nested object has a name property which is a string, and a children property which is an array of similar nested objects. Try editing the data cell and replacing it with a hierarchical object like this:

data = ({
  name: "root",
  children: [
    {name: "child 1"},
    {
      name: "child 2",
      children: [
        {name: "grandchild 2-1"},
        {name: "grandchild 2-2"},
        {name: "grandchild 2-3"}
      ]
    },
    {name: "child 3"}
  ]
})

Now you have a tree like this (with a non-radial tree layout for clarity):

36%20PM
Screen Shot 2018-10-23 at 4.21.36 PM.png748×104 4.2 KB

If you don’t want to use this hierarchical format, you can use d3.stratify to convert your data into the appropriate format. That would look like this:

data = d3.stratify()([
  {id: "Eve",   parentId: ""},
  {id: "Cain",  parentId: "Eve"},
  {id: "Seth",  parentId: "Eve"},
  {id: "Enos",  parentId: "Seth"},
  {id: "Noam",  parentId: "Seth"},
  {id: "Abel",  parentId: "Eve"},
  {id: "Awan",  parentId: "Eve"},
  {id: "Enoch", parentId: "Awan"},
  {id: "Azura", parentId: "Eve"}
])

But you’ll have to change the other code slightly to refer to the data.id property rather than the data.name property (since d3.stratify uses the former).

2 Likes
3

Not going to lie, I’m moved that you’d take the time to walk me through that. Thank you.

1 Like