# Coloring Custom Tree Graph nodes based on Datapoint's String Date

**URL:** <https://talk.observablehq.com/t/coloring-custom-tree-graph-nodes-based-on-datapoints-string-date/7667>\
**Category:** Help\
**Created:** [February 27, 2023, 4:12pm UTC](https://talk.observablehq.com/t/coloring-custom-tree-graph-nodes-based-on-datapoints-string-date/7667 "2023-02-27T16:12:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ciscorucinski](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ciscorucinski/32/4305_2.png) [@ciscorucinski](https://talk.observablehq.com/u/ciscorucinski)\
**Post date:** [February 27, 2023, 4:12pm UTC](https://talk.observablehq.com/t/coloring-custom-tree-graph-nodes-based-on-datapoints-string-date/7667/1 "2023-02-27T16:12:05Z")

</div>

I am trying to implement a custom tree visualization using [Tree, Tidy / D3 | Observable](https://observablehq.com/@d3/tree) `Tree` source as a base. I am having trouble implementing colors based on dates. Most new documentation used the new `Plot` API’s color schemes, which I don’t believe I can use as-is, or can I?

I am trying to fill in the circle nodes to be colored based on dates. So I thought I would try out `d3.scaleTime()`. I have scaled it down as much as possible to just get the colors to display, but I am unable to do even that.

My understanding is that the`d3.scaleTime()` will return a function. I am calling that `fill_color` for now. I am setting the domain to be from `2021-11-24` until today, and I am mapping that to a range that I hope will interprolate between `green` and `red`. I am taking that `fill_color` function and passing it a parsed `Date` from that datapoint’s date reference.

This results in the fill being black.

In the future, I want to map week numbers to colors (maybe using a diverging color scheme). See what that looks like I do want to create another visualization that only modifies the most recent week number datapoint node’s circle, radius, and text attributes. But I can’t even get this simple example working yet.

Calling Code

```auto
Tree(lineages, { label: (d) => d.lineage.pango, width: 1000 })

```

Snippet of `Tree(...)`

```auto
const node = svg
    .append("g")
    .selectAll("a")
    .data(root.descendants())
    .join("a")
    .attr("xlink:href", link == null ? null : (d) => link(d.data, d))
    .attr("target", link == null ? null : linkTarget)
    .attr("transform", (d) => `translate(${d.y},${d.x})`);

  let fill_color = d3
    .scaleTime()
    .domain([Date.parse("2021-11-24"), Date.now()])
    .range(["green", "red"]);

  node
    .append("circle")
    .attr(
      "fill",
      fill_color((d) => Date.parse(d.lineage.designation_date))
    )
    .attr("r", r);

```

My data is set up as followed. Children objects are the same format

```auto
lineages = Object {
  children: Array(5) [Object, Object, Object, Object, Object]
  height: 0
  id: "B.1.1.529"
  lineage: Object {
    designation_date: "2021-11-24"
    pango: "B.1.1.529"
    partial: "BA"
    unaliased: "B.1.1.529"
  }
  parent_ids: null
  parents: Array(0) []
}

```

> **[SARS-CoV-2 Sample hierarchy](https://observablehq.com/d/85cd4d2f0870e786)**
>
> D3 The above stratified data does seem to correctly create the child-parent relationship that is needed; however, the below graph doesn't show the same relationship at all. Using the custom \`Tree\` implementation below, my stratified data creates the...

---

<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:** [February 27, 2023, 4:49pm UTC](https://talk.observablehq.com/t/coloring-custom-tree-graph-nodes-based-on-datapoints-string-date/7667/2 "2023-02-27T16:49:55Z")

</div>

> [@ciscorucinski](#):
>
> `fill_color((d) => Date.parse(d.lineage.designation_date))`

This syntax isn’t quite right; you are passing your scale function a function, rather than the data value you intend to scale. Also, the node data `d` here represents a node in the hierarchy; if you want to access your input data, it’s doing to be `d.data`. See [_node_.data](https://github.com/d3/d3-hierarchy/blob/main/README.md#hierarchy).

So, try this:

```js
  node.append("circle").attr("fill", (d) => fill_color(Date.parse(d.data.lineage.designation_date))).attr("r", r);

```

If you want to use a [named color scheme](https://github.com/d3/d3-scale-chromatic) in D3, you can use a sequential scale:

```js
  let fill_color = d3
    .scaleSequential()
    .domain([Date.parse("2021-11-24"), Date.now()])
    .interpolator(d3.interpolateTurbo);

```

---

<div class="post-metadata">

**Author:** ![ciscorucinski](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ciscorucinski/32/4305_2.png) [@ciscorucinski](https://talk.observablehq.com/u/ciscorucinski)\
**Post date:** [February 27, 2023, 5:24pm UTC](https://talk.observablehq.com/t/coloring-custom-tree-graph-nodes-based-on-datapoints-string-date/7667/3 "2023-02-27T17:24:28Z")

</div>

Glad that I was at least somewhat on the right path. Thanks for explaining the fill\_color mistake. Now I have something that I can build off of