# Finance Viz
**URL:** https://talk.observablehq.com/t/finance-viz/7519
**Category:** Help
**Created:** [January 13, 2023, 9:02pm UTC](https://talk.observablehq.com/t/finance-viz/7519 "2023-01-13T21:02:32Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@ouonomos](https://talk.observablehq.com/u/ouonomos)
#### Post date: [January 13, 2023, 9:02pm UTC](https://talk.observablehq.com/t/finance-viz/7519/1 "2023-01-13T21:02:32Z")
[https://observablehq.com/d/c79a84211cc4fee4](https://observablehq.com/d/c79a84211cc4fee4)
Hello. I’m trying to use an input to update a chart via the d3 .join mechanism. I believe I have most things correct but I can only make the axes populate and adjust. It seems like the .drawData function is being called, but something about my code won’t append the rectangles.
Like most semi-able d3 users, I’m cannibalizing existing examples, in this case:
[https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable](https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable)
and
>
>
> There are more than three files. show original
Any advice appreciated!
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 14, 2023, 11:57am UTC](https://talk.observablehq.com/t/finance-viz/7519/2 "2023-01-14T11:57:05Z")
Can I ask why you chose to use D3 directly? [Observable’s Plot library](https://observablehq.com/@observablehq/plot) sits on top of D3 and makes it quite a bit easier to create this type of chart.
Using Plot, you’d first normalize your data so that you have one row per date and account:
```javascript
data = vizinput.flatMap(({ event_date, ...accounts }) => {
const date = d3.utcParse("%m/%d/%Y")(event_date);
return Object.entries(accounts).map(
([account, amount]) => ({ date, account, amount })
);
})
```
Then you’d create the chart with
```javascript
Plot.plot({
marks: [
Plot.barY(data2, {x: "date", y: "amount", fill: "account"}),
Plot.ruleY([0])
],
color: { legend: true },
marginBottom: 70,
marginRight: 50,
x: { type: "band", tickRotate: 40 },
color: { legend: true }
})
```
giving you this output:
---
### Author:  [@ouonomos](https://talk.observablehq.com/u/ouonomos)
#### Post date: [January 14, 2023, 1:42pm UTC](https://talk.observablehq.com/t/finance-viz/7519/3 "2023-01-14T13:42:53Z")
Thanks! I guess I didn’t look outside d3 bc I figured additional customizations might get me into the same dead ends I’d encountered with other potential solutions. d3 has a steep learning curve (for me at least) but there’s nothing it can’t do. I’ll look at adopting your above solution with Plot, but, for my education, do you know what I’m doing wrong with my .join error above?
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 14, 2023, 2:10pm UTC](https://talk.observablehq.com/t/finance-viz/7519/4 "2023-01-14T14:10:42Z")
> [@ouonomos](#):
>
> but, for my education, do you know what I’m doing wrong with my .join error above?
A couple of things, I’m afraid. For starters, d3.stack() gives you an entry for each stack, but you attempt to process `series` as if it were a flat array of entries, creating one rect per stack (instead of per value). I recommend to take a another look at the gist that you linked (you can also view it [here](https://observablehq.com/@mootari/blocks-viewer?url=https://gist.github.com/mbostock/1044242)) and pay close attention to the second enter().