# Accessing attributes from a d3 viz in Observable

**URL:** <https://talk.observablehq.com/t/accessing-attributes-from-a-d3-viz-in-observable/4782>\
**Category:** Help\
**Created:** [March 15, 2021, 12:09am UTC](https://talk.observablehq.com/t/accessing-attributes-from-a-d3-viz-in-observable/4782 "2021-03-15T00:09:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jackdbastian](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jackdbastian/32/4673_2.png) [@jackdbastian](https://talk.observablehq.com/u/jackdbastian)\
**Post date:** [March 15, 2021, 12:09am UTC](https://talk.observablehq.com/t/accessing-attributes-from-a-d3-viz-in-observable/4782/1 "2021-03-15T00:09:50Z")

</div>

I am interested in continually accessing the attributes of dynamic svg elements (such as a `rect`) in a d3 visualization created in Observable.

Outside of observable this would be as simple as using `document.getElementById().getAttribute();` and a `setInterval` from the rendered d3 visualization. But d3 visualizations in Observable return an `svg.node()`. I am new to JS and couldn’t figure out how to parse through the node to get the attributes i was interested in.

To elaborate more on my use case. I am interested in using the position of d3 svg elements (e.g. points on a graph) to dynamically control the frequency of an oscillator in Tone.js. Specifcally I am interested in tracking the position of points as they move through a `transition()` in d3 and feeding that constantly changing number into the frequency value of an oscillator.

Thank you for your help.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [March 15, 2021, 5:27am UTC](https://talk.observablehq.com/t/accessing-attributes-from-a-d3-viz-in-observable/4782/2 "2021-03-15T05:27:22Z")

</div>

> [@jackdbastian](#):
>
> .getAttribute();

In D3 you select the item you want to read the attribute on and then instead of parsing a value to the attribute you pass nothing and that returns that attributes value.

```js
let cx0 = d3.select('#c0').attr('cx')

```

> **[Drag (SVG) with pozition monitoring.](https://observablehq.com/@hellonearthis/drag-svg-with-pozition-monitoring)**
>
> Each circle’s datum is an object with x and y properties. The circle is raised to the foreground at the start of a drag, and a temporary stroke is applied during drag for visual feedback. thanks to: ...

---

<div class="post-metadata">

**Author:** ![jackdbastian](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jackdbastian/32/4673_2.png) [@jackdbastian](https://talk.observablehq.com/u/jackdbastian)\
**Post date:** [March 15, 2021, 4:07pm UTC](https://talk.observablehq.com/t/accessing-attributes-from-a-d3-viz-in-observable/4782/4 "2021-03-15T16:07:06Z")

</div>

Awesome thank you so much! This is exactly what i was looking for. Your notebook is very helpful as well.