# Basic question on design

**URL:** <https://talk.observablehq.com/t/basic-question-on-design/1352>\
**Category:** Help\
**Created:** [October 23, 2018, 11:01pm UTC](https://talk.observablehq.com/t/basic-question-on-design/1352 "2018-10-23T23:01:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhgit10](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mhgit10/32/1022_2.png) [@mhgit10](https://talk.observablehq.com/u/mhgit10)\
**Post date:** [October 23, 2018, 11:01pm UTC](https://talk.observablehq.com/t/basic-question-on-design/1352/1 "2018-10-23T23:01:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [October 23, 2018, 11:25pm UTC](https://talk.observablehq.com/t/basic-question-on-design/1352/2 "2018-10-23T23:25:59Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/99402737594e0ef8f8c1d25dd10c453f828ad921.png)

If you don’t want to use this hierarchical format, you can use [d3.stratify](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify) to convert your data into the appropriate format. That would look like this:

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

---

<div class="post-metadata">

**Author:** ![mhgit10](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mhgit10/32/1022_2.png) [@mhgit10](https://talk.observablehq.com/u/mhgit10)\
**Post date:** [October 23, 2018, 11:56pm UTC](https://talk.observablehq.com/t/basic-question-on-design/1352/3 "2018-10-23T23:56:05Z")

</div>

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