Complete Novice

Community Help
1

As the title suggests, I am a complete novice to Observable. I have a notebook where in I have imported a CSV file and I suppose what I need to do now, is start displaying that information in a graphical way.

Any pointers? A simple bar graph would suffice.

2

Iā€™m biased, but I would suggest taking a look at Observable Plot (and Observable Inputs). The Plot notebook includes an example of working with CSV data:

3

Man thank you so much for the quick reply. To be clear it is a list of transactions. I suppose I can use it to display amount of time?

4

Hi @rynsp8 , and welcome! I think the long and short is that you can do anything youā€™d like! Plot is a charting library backed by D3.js much of the same ilk as other charting tools you get with, e.g. Python or even Excel. There are other options beside Observable Plot (which is really powerful), and depending on your customary tools we can offer more recommendations. The best way to start an open discussion like this is to share a notebook of your progress and to describe your problem and desired results. In that vein, is there more you can share? This community offers a lot of help!

5

There is more to share, Iā€™m capturing a set of transactions over a few years. The data Iā€™m working with can be found hereā€¦ https://observablehq.com/d/46dbed77f1808a4c

Iā€™m not well-versed in working within the observable community so there may be a more sophisticated way of sharing besides a URL.

6

Hi @rynsp8 - and this is a great way to share! Only thing is that for us to see, you need to publish (terminology for the ā€˜nextā€™ interface) or link share (classic interface) so that we can see and explore. Currently that link appears to be private.

Hereā€™s a notebook that addresses sharing:

And something of an update on sharing:

(which links to):

7

I believe I shared out with you to have a look. I have a few data objects, CryptoSpend, rawData, and fullFile. For some reason, the fullFile isnā€™t fetching, but it was yesterday.

I think for my immediate purposes, rawData is what I need to work with. Essentially, I would like to create a plot difference chart showing the difference of spending between financial quarters going back to 2017 to current.

8

Iā€™ve actually made some progress with what Iā€™m wanting. The last bit is adding some details like a header/title, changing the color of the bars, and adding some text.

Any advice/direction on that would be helpful.

9

that URL is still private, you need to share/publish that notebook.

10

Just published it.

11

It should be published now.

I would like to have the totals just after the end of each bar. And add a gradient fill from black, which would be positive, to red, which is negative

12

Looks like youā€™re almost there! Have you seen the more detailed information on bar charts?

Looks like thereā€™s something quite close to your target.

13

aaronkyle, thanks for the input. I really do appreciate it. Do you have an example of data labels being placed on the outside end of the bar rather than overlapping the bar itself?

14

Hi @rynsp8 - Perhaps I should disclose that I have never made anything using Plot! Iā€™ve been meaning to tryā€¦

From messing around on your notebook, it looks like that parameter is controlled here:

 Plot.text(newData, {x: "Quarter", y: "Total", text: "Total", dy: 10})

I simply increased the dy value from 5 to 10 and it re-positioned the text label.

15

It does, however, due to the positioning of the text, it moves ALL the text up or down at the same time. So, those totals at the bottom will move up into the bar itself, while those on the top will be positioned correctly, and vise versa.

1 Like
16

@rynsp8 One way to do it would be to pass a function to the y property that adjusts the vertical position depending on whether Total is greater than or less than 0. Hereā€™s what that could look like:

Plot.text(newData, {
  x: "Quarter",
  y: d => d.Total > 0 ? d.Total + 50000 : d.Total - 50000,
  text: "Total",
})

Note that the adjustment has to be defined relative to your y-axis scale, not in pixels, hence why Iā€™m adjusting by 50,000 in either direction. I had thought maybe there would be a way to pass a function as dy instead, so you could define the adjustment in pixels, but I seem to get an error when I try doing that. Maybe someone better versed in Plot (@mbostock?) can clarify if thatā€™s expected behavior.

1 Like
17

You can do it as two separate filtered marks:

Plot.text(newData, {filter: d => d.Total >= 0, x: "Quarter", y: "Total", text: "Total", dy: -4}),
Plot.text(newData, {filter: d => d.Total < 0, x: "Quarter", y: "Total", text: "Total", dy: 10}),
2 Likes
18

Learning Observable - YouTube Just wanted to make sure this YouTube playlist is here to stumble upon on this thread for anyone new to the community! Thanks

1 Like