Our definitive course to getting up and running on Observable.

Robert Kosara

Allison Horst

Paul Buffa

Observable

Learning Observable: Introduction

Learning Observable: Notebooks and cells

Learning Observable: Getting data into Observable

Josh Earlenbaugh

Learning Observable: Data visualization with Chart cell

Learning Observable: Observable Plot

Learning Observable: Cell modes, reactive Markdown, and HTML

Learning Observable: Reactive dataflow

Learning Observable: User inputs and interactivity

Learning Observable: JavaScript and Observable

Learning Observable: Importing and remixing cells and notebooks

Getting started with Observable? You’ve come to the right place.

Tutorials

Learning Observable

Is it possible to add the icons inline in Vitepress? Could be nice here...

I believe it is. Do you how I would go about getting ahold of those assets and adding them here to this notebook? Then when we migrate this to Vitepress I should be able to use something like the same code.

Here's the notebook I've used for icons previously, looks like the design team keeps it updated (I usually have to refresh a few times, see note on API limitations): https://observablehq.com/@observablehq/observable-icons

Can you tell me how to use the icon notebook? I selected the chart cell icon (#91) and copied the code at the top, but I am not seeing anything appear in my notebook. Do I need to import something?

Okay I tried adding the chart cell icon to the Product Education Icon Helpers, but I can't seem to get it to grab an icon.

I think it changes from "we" to "your" at some points. Super minor, but may want to update for consistency.

I reworded this but am thinking it might just be easier to say "The second option is to create the Chart cell directly from a Data table cell..."

I will look for areas that I switch from we/our to you/your language and aim to keep it consistent. 

You can make a chart directly from any cell that has data, not just data table cell, from what I am seeing. Like if you just have a cell `myData = cars`, you have the option to create a Data table cell from it or just directly make the chart. That's why I worded is more complicated. Does that make sense?

Not sure if we have defined treatments for data fields (e.g. are they in quotations in our other resources?).

Hmmm... I don't think we do. Maybe it rather falls under UI element 🤷:

Bold font is used for: 
User interface elements including modal titles, features, and buttons (e.g. "Open the *Add cell menu* then search for the scatterplot snippet.")

Italic font is used for: 
...
Variable names, arguments, named cells.

Any instincts on how we should treat data fields?

I think these would be included in variable names, so maybe italicize things like economy (mpg). Although I don't think we have much consistency in our existing docs, unfortunately.

And here I'm probably mixing up language -- I was using "fields" here meaning variable names

I wonder if the second sentence can be more generalized. Like: "A bar chart (or histogram, if the field is continuous) of counts is the default chart produced any time a single field is selected in the chart cell, as indicated by the reducer...."

But I think I will be specific that it is an X or Y variable that does this, because it doesn't happen with just any field from what I can tell.

Yeah sounds good. I think this is an example of where delineating between variables and fields (variables = data columns, fields = chart cell options) can add clarity. Then you could say something like "selecting and X or Y variable..." (totally optional, kind of spitballing)

ignore - seeing your comments below re: consistency

called 'fields' in topmost title, but then channels in subheaders below -- may be worth consistency (I'd suggest using channels, since fields is also used for variables in the data)?

Ignore my comments on field vs variable above :) you've already addressed

just flagging that "field" is sometimes used for the Chart cell options, and also for the data variables, so may be worth using 'dropdown menu' or 'menu option' or something instead?

Technically the cylinder numbers are discrete quantitative variable, so mapping this to a continuous color scale (which the Chart cell is doing) creates that continuous legend & color scale. Might want to consider changing this to map color to a non-numeric variable, or to a different continuous quantitative variable in the data.

-I went through and tried to clean up the consistency of how I am using "field", "variable", and "dropdown". Should be clearer.

-I changed it from cylinders to power (hp).

I don't think italics are used in the rest of the notebook for the Chart cell options, flagging for consistency here

I wonder how much text / space we want to give to interpreting the visualizations, versus just how to do make it in Chart cell. If we're worried about length for these resources, I'd probably cut the interpretation, especially if it'll be clear to most of our ICPs / personas quickly from the chart image.

I changed the color field and tried something a lot shorter.

I am actually having a bit of a hard time seeing the trends here :) might be worth trying a y facet instead?

Okay I changed it around some and you were right, the y facet was better to illustrate something.

I think this works a bit better. Unfortunately the cylinder numbers aren't showing up, so aligning with the text summary is a bit challenging. And doubly unfortunately, this data set just doesn't contain a great variable to facet by, so there's not a clear example I can think of. I think at least this shows the mechanics of what it's doing, so probably fine (but ideally you'd have a nice categorical variable with a few groups to facet by...I think cylinders is the best option here)

Do we want to link to the existing documentation, or is this replacing it? https://observablehq.com/@observablehq/chart-cell

It's not replacing it, but the existing documentation is going to get completely revised.

I will add for now though for completeness.