Observable-Community

or in one line, wrap the await statement:

`const data = (await pizzeriaDB.sql`...`).map(fnDoSomething)`

Hey Matthew :wave: I just forked your notebook and send you a suggestion!

In essence, your notebook just needed a Map (or lookup) that given a human-readable column name → answers with the corresponding column in the dataset. This Map is then used to bind the currently selected column to the plot

Here’s the suggested notebook, let me know if there’s anything unclear

<https://observablehq.com/d/48917e3b471462ac>

Oh - <@U049QMP0CTH> was faster :heart_eyes: :100:  here is also my fork <https://observablehq.com/d/fa197300b3c3bdf8|https://observablehq.com/d/fa197300b3c3bdf8>

Thank you both so much for the much needed help!  It is astonishing how fantastic, smart, and helpful (and FAST!) you are.  I appreciate the follow up and the help.  Cheers!  M@

I think I actually do have a follow up question:  Are the methods of binding the selected column to the plot fairly standard/universal?  As in, should I always expect to change the x &amp; y axis to point to the `cur_selected_column` if that is the intent of the chart?  Thank you again!

image.png

They are fairly standard (imho), but you can write them much shorter if you like:

this way, you’d only need the cells systems_data_csv, cur_sel_column, and the plot cell

Are you coming from another programming language or environment? Maybe there are some  concepts that are more familiar then!

Unfortunately, no.  I am a meteorologist who has always just loved charts and visualizations like weather charts.  And while I deal with mountains of data, I never learned to code.  So JavaScript/D3/Plot/Observable is my first go round with anything like this.

And it is just a hobby that I love but am struggling with.  But I see myself getting better and better each day, so I suppose progress is progress even when it is slow.

If you have any learning tips or tricks I would love to hear them.  At this point I am just doing everything via trial by error so the abstraction that Observable does with the code can be, well, challenging to say the least.  Either way, thank you again for the help and explanation.  You are a great teacher.

Sounds great! Observable is the perfect place for exploring and learning these kinds of things :blush: I had a similar interest in learning how to code (especially to create websites) coming from a science background without any CS skills. People on this platform are super helpful and always helped me when I ran into issues

Yes I would :100: confirm what Christoph said - this is a great place , Plattform and community to explore, please do feel welcome here and don’t hesitate to ask!

Here are some recent cool notebooks as reference
<https://observablehq.com/@observablehq/a-taste-of-observable>

<https://observablehq.com/@observablehq/learn-javascript-introduction>

<https://observablehq.com/@observablehq/descriptive-statistics-translations>

<https://observablehq.com/@observablehq/data-wrangling-translations>

And since it’s Easter :hatching_chick:  I also have a special notebook with over 100 categorized Plot examples you can start off with :wink:

<https://observablehq.com/@ee2dev/a-easter-egg-collection-of-plot-examples|https://observablehq.com/@ee2dev/a-easter-egg-collection-of-plot-examples>

Wow!  Thank you <@U04HH1P8J7M>!  The only thing I have come across has been the Cheatsheets.  There are so many resources it can be hard to know which ones are the right ones to look at but you hit the nail on the head.  These are perfect for me!  Thanks for the Easter gift!  Much appreciated!  Cheers to you! -M@

Hi <@U04HH1P8J7M> &amp; <@U049QMP0CTH>.  I have been working with the same data that you both helped me with and I had thought I figured everything out so I found a cool Observable Notebook and put that same data into it.  Things were going pretty good (at least to my newbie eyes) but then the dropdown thing reared its head.  I guess this notebook might be pretty advanced for my knowledge but I am curious where or how I apply your advice from a few days ago and try to call the y axis based on the drop down view?

I tried both of your methods with no luck.  And please don't worry about doing any work to give me the "solution" I am happy to just be pointed in the right direction.  Thanks again so much!
<https://observablehq.com/d/938309440aa0e754>
<https://observablehq.com/d/40508605811b52d4>

Hi <@U04NDMQ0MGR>, I can’t access those notebooks, could it be that they are still in private mode?

My apologies.  I did forget to put them into public mode.  They should be accessible now.  Thanks again!

Alright, just made a new suggestion. Don’t think I understood the concept, but at least it shows how you can tie the input to the plot again :slightly_smiling_face: <https://observablehq.com/d/651770f25bc448db>

Thanks <@U049QMP0CTH>!  I think I accidentally "got it" using <@U04HH1P8J7M>'s method.  I've been going back and forth between the two just trying to get something to work!  Which, now that I have that the color scheme and color scale is off (of course) but if you wanted to see what I was attempting to to <https://observablehq.com/d/0bc0f4c360640658|this notebook has it.>

Again, thank you so much for all the help!  On to working out the color issues now!  Cheers!

M@

That’s great :slightly_smiling_face: Good luck with the color, let us know if you need any help!

In the search box, try searching for `XBB.1.5`  and you will see when typing the period, the focus is lost. <https://observablehq.com/@ciscorucinski/playground-sars-cov-2-phylogenetic-tree>

I think this happens because it is embedded in the same cell as the `searchterms` table. The `searchterms` table source changes when you enter in the search box, and since the source changes, the entire cell re-renders, including the search box.

If the search is in a different cell from the searchterms viewof, it works fine

Beside placing `Inputs.search` into a its own cell (which is what I was doing before), is there anyway to keep everything together in one cell? My end goal is to have `Inputs.table` span the whole height of these controls and be on the side

Yes, but you can't use Observable's reactivity. If a cell's inputs change, it will rerun from scratch and create new DOM elements. If you control updates explicitly through something like an update method you could use <https://www.npmjs.com/package/nanomorph|https://www.npmjs.com/package/nanomorph> to update the DOM without losing state

This may be helpful <https://observablehq.com/@mbostock/hello-nanomorph|https://observablehq.com/@mbostock/hello-nanomorph>

I will look into this option more. Thanks

This notebook has a helper that lets you achieve what you want while preserving Observable's reactivity: <https://observablehq.com/@mootari/dashboard-with-inputs>

I implemented the dashboard using my existing html structure and it works great!

Instead of returning nothing and getting an `undefined` output, I tried to return the control and this caused the loss of focus issue again. Returning anything not related to `search` seems to work fine, though.
```{
  display("searchbox", viewof search, invalidation);
  return search;
}```
Same loss of focus with everything in one cell. I was curious if this would work, so I tried it.
```{
  display("searchbox", viewof search, invalidation);
  display("search-presets", viewof choice, invalidation);
  display("chart-modifier", viewof modifier, invalidation);
  display("search-table", viewof searchterm, invalidation);
}```
Do you have any insight into why this might cause similar loss of focus issues? I guess I can kind of wrap my head around why returning a control might cause issues, but this usage I can't think anything. It seems to display everything right. Maybe this is just bad API usage and just not intended to be used like this.

When you return "search", you reference (and depend on) the viewof cell's .value generator. Any change to the value will invalidate the cell. Check out the examples in the dashboard notebook, and note how Generators.input() is used there.

You might also be interested in this viewof introduction: <https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us>

Good catch, thanks Matt! I’ll update it in the notebook.

OK it should be updated (and I added the comma to all of the examples, too). Really appreciate your close eye &amp; sending this along so I could fix it!

The anti-SQL-injection rules of the SQL cell don't allow you to inject code (like column names) like this, only values (like your limit example)

You could select both columns, and the apply the choice in downstream JS cells.

you could also use the more low level interface that doesn't include those anti-injection rules. You'd make a JS cell that looks something like this:
```pickedRows = pizzeriaDB.query(`select ${pickColumn} from stores limit 10`)```

Interesting. A use-case I had was wanting to define some column/columns to group by and get their value counts. So this would word for defining a single column to count up the results.
```pizzeriaDB.query(`select ${pickColumn}, count(*) as count from stores group by ${pickColumn}`)```

Looks like <https://observablehq.com/d/d17a35ca3769c5b5#cell-120|this> is doing what I wanted: specify columns, get back the counts of them grouped up.

you could then add a data table to get a nice visual of the output like the SQL cell gives:

Hi Tonya - I’m happy to take a look. Can you share the notebook?

<https://observablehq.com/d/2b38352ab79ecae3>

I’m trying to generate a new array/table with data about pizza types by percentage. I assume I need to filter pizzaorders based on category or name contains, and then sum all orders by state.

If this helps, I use `parseFloat` here to infer the numeric value of the string like `50%`

<https://observablehq.com/d/89bd796b97a7ce3a#cell-155>

I then want to create percentages of each, say, category, by state, so they add up to 100%. I was trying to do this with the extended bar charts.

But then I got distracted because they were just so pretty!

I thought a pie chart would be simple to do, but turns out it’s *not*.

I’m looking now at the recent share from <@U04T73BDB2M> on data wrangling translations.

Something like this <https://observablehq.com/d/0eaf806c44806c17#totalSales>
Would give a breakdown of % by category

I also wonder if some of the existing Plot options might work here (rather than additional wrangling)? Here’s an example where all within Plot, the proportions of male, female and NA penguins (by species) are visualized using `proportion-facet` in Plot: <https://observablehq.com/@observablehq/plot-group#cell-272>

<https://observablehq.com/d/0eaf806c44806c17#cell-663>

<@U048EJNREUB> and<@U04A5QDE68P> — thanks!! I’ll dig around here and see what I can find! THANK YOU!

One unrelated question: Do you know what the auto sizing in this chart is showing? It’s an unexpected finding, but I don’t know what it means…! <https://observablehq.com/d/2b38352ab79ecae3#cell-300>

In the specialty category, the size of the dot for NV is larger--and the size of the dot for CA in vegetarian is MUCH larger. What is “auto” showing? I cannot replicate it by choosing any of the other options…

But why is the specialty dot larger? If the proportion of specialty pizza consumption is the same across states?

Here’s what one site says: “If you don’t specify a quantitative scale’s *domain*, it is the extent (minimum and maximum) of associated channel values, except for the _r_ (radius) scale where it goes from zero to the maximum.”

I feel like that might be relevant, but I’m not sure.

A common way of doing this is to create an HTML cell and then use an embedded expression `${…}` in conjunction with array.map, where each element in the array is an HTML element (such as an SVG element created by Plot).

For example, to preview various map projections:
```&lt;div style="display: grid; grid-gap: 0.875rem; grid-template-columns: repeat(auto-fill, minmax(160px, 5fr)); padding-bottom: 1px;"&gt;
  ${["orthographic", "equirectangular", "stereographic", "mercator", "equal-earth"].map((projection) =&gt; Plot.plot({
    projection,
    width: 320,
    height: 200,
    marks: [
      Plot.frame(),
      Plot.geo(land, {fill: "currentColor"})
    ]
  }))}
&lt;/div&gt;```
Notebook: <https://observablehq.com/d/a2aa0d75d19f6c0d>

The opacity is uniform, but you have multiple dots with duplicate values overlaying each other.

Thank you so much <@U048X1JDDHN>. I finally made some progress here: <https://observablehq.com/d/cbf6047da8d9fe17>. Have a good weekend!

I think you meant <@U048E2BJL9Z> :slightly_smiling_face:

Ah that’s embarrassing :joy: . Thank y’all!!!!!! 

No worries, Fil doesn't receive nearly enough praise for all he does. :wink:

a suggestion:
```    Plot.barY(search4, Plot.groupZ({y: "proportion-facet"}, {y: "orders", title: "name", fill: "name"})),
    Plot.text(search4,Plot.stackY( Plot.groupZ({y: "proportion-facet", text: "first"}, {y: "orders", text: "name", z: "name"}))),```
(quick explainer: the texts were under the bars, and text doesn't stack by default)

<@U048X1JDDHN> yes, that worked! Thank you!!

Screenshot from 2023-04-12 22-01-46.png

Screenshot from 2023-04-12 22-07-08.png

OK, I have simplified the example at <https://observablehq.com/d/8cdf5c4006b221da#cell-2252> (bottom of notebook).

Is it possible to merge (1) and (2) below? Both manipulate the tree's node colors for each data point. Is this even possible?

(1) Here nodeFill uses a d3 scale to determine what color the node is filled.
```Tree(find("XBB.1"), {
  width: width,
  label: (d) =&gt; d.data.lineage.pango,
  nodeRadius: 8, // Only for display purposes
  nodeFill: (d) =&gt; divergingScale(weeksSince(d.data.lineage.designation_date))
})```
And here is the related code for the simplified diverging scale...
```divergingScale = d3
  .scaleDiverging()
  .domain([1, 3, 72]) // weeks
  .range(["#D52322", "lightgray", "lightgray"])```
This will color the nodes red that have a designation_date that is at most 3 weeks old. Those nodes older will be colored light gray.  See attachment (and 2nd to last tree in link)

(2) Here nodeFill uses a predicate (`array.includes(...)`) to determine what color the node is filled; either black or light gray. See attachment (and last tree in link)
```Tree(find("XBB.1"), {
  width: width,
  label: (d) =&gt; d.data.lineage.pango,
  nodeRadius: 8, // Only for display purposes
  nodeFill: (d) =&gt; available_nextclade_lineages.includes(d.data.lineage.pango) ? "black" : "lightgray"
})```
Note: `Tree` is located at <https://observablehq.com/@ciscorucinski/hierarchical-tree#Tree>

So it does seem possible to do something like this

```  nodeFill: (d) =&gt;
    available_nextclade_lineages.includes(d.data.lineage.pango)
      ? "black"
      : divergingScale(weeksSince(d.data.lineage.designation_date))```
Now that I know there is a possibility, I can experiment around. This has the predicate ultimately determining what will happen when there are "collisions"

Does `Plot.auto` do some magical date reduction? I've been trying to replicate this plot (<https://observablehq.com/d/f7ada32b202677de#cell-262>) using Plot.dot with no luck. It looks like it is grouping by weeks.

Here's my failing attempt: <https://observablehq.com/d/f7ada32b202677de#cell-254>

<@U04V1V97L1H> seems to be `x: { interval: d3.timeWeekday }`

ie, if you change the options to .plot: `.plot({ color: { legend: true }, width: 2000, x: { interval: d3.timeWeekday }})` there is no difference

Could I incorporate that into the `Plot.plot` with `Plot.dot` syntax like I had above?

I think I got it: `x: d =&gt; d3.timeWeek(d["orderDate"])`

Screenshot 2023-04-11 at 3.56.45 PM.png

There's not really a javascript equivalent to those functions implemented by default, but you could write your own functions in a notebook and call them where you'd like.

If you're curious about documentation on the default libs Observable makes available, there's good info here: <https://observablehq.com/@observablehq/stdlib>

As far as autocomplete goes, there's partial support for the browser built-ins, but no support for autocompleting code you've written. It does look like it's something in the works according to this blog post: <https://observablehq.com/blog/bringing-the-typescript-language-server-to-observable>

<@U04T73BDB2M> just a note on 2. - Lodash /  `_` is part of the Observablehq <https://observablehq.com/@observablehq/stdlib|stdlib>  - I find myself looking at <https://lodash.com/docs> probably the most of any JS related resource for functions _that I just know exists but what's it called!_ 

After that I find myself looking at <https://uwdata.github.io/arquero/api/> (`aq`), or if push comes to shove <https://ramdajs.com/docs/> or <http://simple-statistics.github.io/docs/> (with an explicit import because both these libraries aren't in the stdlib)

Thanks <@U04CSMWDWJC> and <@U04A329C5FY>, that's helpful!

There's a near identical usage here that works as I would expect <https://observablehq.com/d/7ef728a12d540472#cell-186>

`ordersByDateStateType` is a shorter list with less data per row, but I wouldn't think that would affect how `facet` works

In order for Facet to work, the data needs to be the same as was passed to the plot marks. Since you are filtering the data, it isn't the same anymore. Instead you can pass a `fy` channel to the mark
```{
  x: (d) =&gt; new Date(d.orderDate),
  y: "orders",
  stroke: "pizzaType",
  fy: "state"
}```

you are passing `facet` an object (which is correct). That object can have channels, like x or y, and it also needs a `data` key. Like this:
```facet: {
  data: ordersByDateStateType,
  y: "state"
},```


Oh :face_palm: just realized need to use `data` as prop name in facet yeah

i think your original approach would have worked, though `fy` is still a nice trick

Kapture 2023-04-11 at 20.50.38.gif

Notebook cell <https://observablehq.com/d/7ef728a12d540472#cell-293>

ah, needed the data sorted by `pizzaType`

Lesson 4 showed how to do this with e.g., `Plot.groupX` and `Plot.groupY`

Adding `unique: true` might work here to make each unique category show up just once in the dropdown (e.g. `{label: "Select one", unique: true}` )

That totally worked! Thank you so much, <@U048EJNREUB> !

"cell 203" is just a placeholder. You should be able to just click there and start typing

ahhh! Michael, thank you. silly me was repeatedly hitting the "Delete" button hoping to first remove cell 203. didnt realize you could just start typing to rename! :laughing:

When_a_Notebook_gets____out_of_hand___

<https://observable-community.slack.com/archives/C04811Q675Z/p1681331015079959>

Hey everyone, apologies as we are currently experiencing an outage. Will be sure to keep you all updated once we are back up and running! Thanks!

It increases the running count by one whenever an item has "goal" as its property value for "a".

Great, thank you.

What about the use case? Does this mean _we_ only need to know how many “goal” items exist?

I ask because my mind tells me, if that’s the case, then there should be a better way to do that.

The use case is to track how a count develops over a series of data items, e.g. to graph it or to perform calculations on it.

I see. So is it correct to assume that the result `[0, 0, 1, 1, 1]` is not sufficient in itself?

Oversight. I understand what you meant with your penultimate reply better now.

It may be interesting to understand why this works too. `d3.cumsum` adds numbers up and keeps track of the running total. When you add things that aren't numbers, JS does it's best. `true + false` is equal to 1, and `true + true` is equal to 2. JS implicitly converts things it tries to add to numbers (sometimes...), and when it does that with true and false it gets 1 and 0, respectively

Great. I understand how it works and its potential application better now. Thank you :blush: 

hey tanner! right now that isn’t possible, as filtering and scrubbing only affect the data displayed in the table and not the value of the cell itself (which is what other cells referencing that cell would see)

I was 100% hoping there would be a `cell.currentValue`  on the prototype to access it

My guess is that this wouldn't be hard to add. Is the code for the table open source?

unfortunately the code is not open source :disappointed: that’s an interesting idea though and i can see how it’d be useful! we will definitely consider adding a way to access that value.

I feel like this would just be one more great step towards Observable being used as a deliverable experience to end-users in place of building custom dashboards

this is an amazing idea. You wouldn't have to build any separate inputs

I think the problem is that I’m trying to call elements from the original array, but the path has been grouped and transformed.

&gt;   const path = svg
&gt;     .append(“g”)
&gt;     .attr(“fill”, “none”)
&gt;     //    .attr(“stroke”, color)
&gt;     .attr(“stroke-linecap”, strokeLinecap)
&gt;     .attr(“stroke-linejoin”, strokeLinejoin)
&gt;     .attr(“stroke-width”, strokeWidth)
&gt;     .attr(“stroke-opacity”, strokeOpacity)
&gt;     .selectAll(“path”)
&gt;     *.data(d3.group(I, (i) =&gt; Z[i]))*
&gt;     .join(“path”)
&gt;     .attr(“stroke”, color)
&gt;     .attr(“d”, ([, I]) =&gt; line(I));


Exactly! I hit send too soon, but that's basically what I was saying. So if you access the state name with `d[0]` instead of `d.state` in the color function, it works.

Because the data elements now look like this: `['California', Array(36)]`

Like so, in case that's unclear:
```color: (d) =&gt; (d[0] == "California" ? "red" : "steelblue"),```

Hey <@U0523RC7S83>, one option you’d have is to use wildcard selectors as described here: <https://www.geeksforgeeks.org/wildcard-selectors-and-in-css-for-classes/>

e.g. `[class^="controlPanel"].[class$="__field"]`  to match the  `.controlPanel-hxswlo9d0ui__field` class

Thanks, I looked into this and it seems very plausible. I asked ChatGPT to help create some selectors and I seen you can combine multiple ones together and then seen that was possible via the examples at <https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>. Very cool
```[class|="controlPanel"][class$="__field"] {
  /* styles for elements that start with "controlPanel" and end with "__field" */
}

[class|="controlPanel"][class$="__label"] {
  /* styles for elements that start with "controlPanel" and end with "__label" */
}```