# Adding material to an imported plot

**URL:** <https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378>\
**Category:** Help\
**Created:** [May 28, 2020, 7:24pm UTC](https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378 "2020-05-28T19:24:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremy9959](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jeremy9959/32/3059_2.png) [@jeremy9959](https://talk.observablehq.com/u/jeremy9959)\
**Post date:** [May 28, 2020, 7:24pm UTC](https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378/1 "2020-05-28T19:24:46Z")

</div>

Suppose I import an interesting visualization:

```auto
import {chart} from "@d3/histogram"

```

Now I want to add additional stuff to the chart. Like, for example, I want  
to mess up the beautiful histogram with a big circle. I can do the following:

```auto
d3.select(chart).selectAll('circle').data([({x:100,y:100,r:100})]).enter().append('circle').attr('cx',d=>d.x).attr('cy',d=>d.y).attr('r',d=>d.r).attr('fill','blue')

```

and this will stick a big blue circle on the histogram. However, if I edit the cell and change the color ‘blue’ to ‘green’, the circle on the histogram doesn’t change color.

I understand that this has to do with the computational flow – the displayed graph doesn’t know that it depends on the cell that sets the circle’s color – but I can’t figure out what the _right_ way to do this is!

Thanks for any tips.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [May 28, 2020, 8:48pm UTC](https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378/2 "2020-05-28T20:48:32Z")

</div>

use _selection_.join?

> **[Untitled / Fil / Observable](https://observablehq.com/d/4f13081f24bc9a22)**
>
> The magic notebook for visualization.

---

<div class="post-metadata">

**Author:** ![jeremy9959](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jeremy9959/32/3059_2.png) [@jeremy9959](https://talk.observablehq.com/u/jeremy9959)\
**Post date:** [May 28, 2020, 8:57pm UTC](https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378/3 "2020-05-28T20:57:14Z")

</div>

That works! I will read up on _selection_.join – Thanks!

---

<div class="post-metadata">

**Author:** ![jeremy9959](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jeremy9959/32/3059_2.png) [@jeremy9959](https://talk.observablehq.com/u/jeremy9959)\
**Post date:** [May 28, 2020, 9:05pm UTC](https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378/4 "2020-05-28T21:05:27Z")

</div>

I think I understand now – the `.enter().append()` construction  
added a new circle on its first run through. But after that, `.enter()` doesn’t have anything in it because there’s already a circle there; so the subsequent calls don’t do anything. With join, the circle already there gets removed (as part of .exit()) and the new circle gets appended.

Is this the idea?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [May 29, 2020, 7:12am UTC](https://talk.observablehq.com/t/adding-material-to-an-imported-plot/3378/5 "2020-05-29T07:12:09Z")

</div>

yes that’s it exactly!