Observable-Community

One quick idea: Plot returns normal HTML elements. You could use an HTML cell and do something like
```&lt;div style="max-height: 300px; overflow: scroll"&gt;${Plot.plot(...)}&lt;/div&gt;```

Yes, `overflow: scroll` should work, though I’d prefer `overflow: auto`  to avoid a vertical scrollbar. You’ll also need to force the width of the Plot itself to be super wide, perhaps by placing inside another DIV. Here’s an example: <https://observablehq.com/d/eee96bf4dd9ffa95>

I did something along these lines a while back to build a scrollable timeline in pure HTML: <https://observablehq.com/d/e55d55d46672f60d>

Thank you so much Michael and Dr. McClure! 

Screen Shot 2023-03-22 at 5.43.14 PM.png

Weird. I definitely know and expect this with multiple sessions, but haven't yet been haunted myself. :ghost:

We've been getting reports of this lately. We haven't tracked down exactly what's going on yet.

If either of you happen to see it when it starts, can you note exactly when the symptoms start? We have a theory that it correlates to some other internal event.

I’ve at least figured out that, while I can’t collapse the code where the ghost is editing, I can at least copy the code, delete that cell, and then repaste it into a new cell. I am then able to collapse the new cell, though the ghost editor still appears in the upper right.

<@U0484AHPADB> It just happened again. I had just commented out about 10 lines of Javascript code from a large cell.

Good news. That should be the last time. We suspect it is related to server deployments, and we just deployed the fix. Unfortunately it was a bug in the shutdown procedure, so we had to trigger it at least once more.

I think <https://observablehq.com/@observablehq/data-wrangling-translations#cell-1349|this renaming column method> might work for my option a) above (just saw this Data wrangling essentials notebook posted in <#C03SH3F8J4C|community>)!

Still curious about option b) above.

Here’s a bit more information on bracket notation `d["name"]` to access properties (works for property names with spaces, hyphens, start with numbers, etc - things that break with the `d.name` dot notation):  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#accessing_properties>

To add to what Allison said, you need `d["weight (lb)"]` instead of `d.weight (lb)`.

In JavaScript, `d.foo` is shorthand for `d["foo"]`. But you can only use that shorthand when `foo` is a valid JavaScript identifier. `weight (lb)` is not a valid JavaScript identifier because it has a space and parens, so you have to use the long form.

Thanks so much <@U048EJNREUB> and <@U048G7LAQ5A>! I appreciate how your bit of time given to this was way more helpful than the hour or more I spent fumbling with Google searches.

This works:
title: (d) =&gt; `${d.name} \n weight: ${d[“weight (lb)“]}`

Any change creates a new version of a notebook, so you can roll back to any point you want. Just note the version number of the "commit" and you can jump to it via the <https://observablehq.com/@observablehq/history|history pane>.

I often fork notebooks and put a [3] style version indicator in the title so I can jump between the forks more easily (each one is just a specific version snapshot). It’s been discussed before to have an idea of “starred” revisions you can easily jump between but I don’t know if there’s been any thought about it recently 

please publish a notebook! share the love :)

I’ve published a number of notebooks.  My current favorite is on Predictor distributions, statistical power, and effect sizes.  It is a series of notebooks connected with Next links at the bottom of each.  Start at <https://observablehq.com/d/486b09d27f800d1d>

OK, I should have searched notebooks of <@U048X1JDDHN> first.  I now see your list of 3D apps and will see if I can find something there that will meet my needs.  Thanks for your catalog!

Here is a notebook that illustrates my echarts.js to Observable question, showing a 2D success (a funny graph about this winter’s perceptions in Denver) and a 3D failure.  Any suggestions appreciated:  <https://observablehq.com/d/302f18a402a605ac>

You’ve got to load the `gl` library separately and wait for that to finish before generating your image. You can do so by naming the cell that refers to the `gl` library and making your image depend on that value. Here’s an example: <https://observablehq.com/d/cc8677c3a203897d>

Again, wow!  Works like a charm.  I've never been doing something where I needed to wait, but I see why that works here.  And thanks for the other improvements in the code.

I'm suggesting a simpler:
`echarts = require("echarts", "echarts-gl")`

As usual, <@U048X1JDDHN>’s simplification works like a charm. Thanks again

like the bollinger band example here? <https://observablehq.com/@observablehq/plot-window#bollingerBand>

Not quite sure what <@U048A7PJ4PN> is trying to accomplish.  It seems like any solution would involve adding a constant for one windowY and subtracting a constant for another windowY.  Using the bollingerBand seems a principled way of doing that and provides some useful statistical info.  If you add and subtract the same constant, you can get two series, but you could accomplish the same thing just by increasing the strokeWidth.  My quick experiments at <https://observablehq.com/d/1b8cb8fba5a4f6d5>

I was hoping to take the min value and max value within a time window to create a single band. bollinger is similar but not quite what I was going for.

Maybe the multiple reducers example that follows is what I need? <https://observablehq.com/@observablehq/plot-window#bollingerBand>

Maybe try using “max” and “min” as the reducers for two windowY’s.   I just tried that in <https://observablehq.com/d/1b8cb8fba5a4f6d5>

Hello. I am new to D3.js. I am trying to create charts but some elements are too complex for me. I am not sure if it is possible to create using D3.js. Could someone help me?

Screenshot.png

Hi Pavel! You're looking for a way to draw those dotted lines? Do you have a prototype you are working on that you can share? It's easier to offer help and suggestions if we can see your point of departure

I need to draw this data in rectangles and draw to lines with html symbol

If you're working outside Observable and looking for a fast and easy way to add annotations, here's something that may help: <https://d3-annotation.susielu.com/#examples>

To recreate the exact formatting of your example GIF, you'd likely need to mix in some CSS :slightly_smiling_face:

There are also some fun examples on Observable of notebooks with annotations, like this one: <https://observablehq.com/@hydrosquall/d3-annotation-with-d3-line-chart>

<@U0489M6NVGU> thanks for links. I read them

The code you shared is an hml saved view of a pdf template this being generated from your local computer.  The document also contains the SVG used to style the chart.  At the bottom of the HTM page is some custom JS code, which I presume is what you're writing to generate this chart?  The library that you are using is C3.js. There's also D3 and an additional D3 tooltip.

Yes, JS code generates chart. Also variable jsonTips contains json for annotations

Ok, so here's your code sorta "working" in Observable: <https://observablehq.com/d/0486dbde041a066a>

... Since you'll be developing this outside of Observable, I am not sure how far I can help.  I only really know the world inside Observable :slightly_smiling_face:.  For me to start making sense of this, I would begin by working through the components so that I could 'detach' the chart generation from the HTML div (which I guess is not something you wish to do).  Still, for your own purposes of D3.js learning and exploration, you might find it fun to play and prototype using Observable, as it can really speed up your iteration!

With respect to the placement of the annotations, this is beyond my current skill set.  So I hope someone out there joins in the discussion or that you otherwise are excited and figure it out (and please share back if you do!)

Please be aware that in the notebook I just shared, the SVG may not draw into the HTML each time.  For me, it works some of the time :slightly_smiling_face:

<@U0489M6NVGU> I was tried to figute this out last 2 days. But no luck :disappointed:

Keep at it! I am sure you will figure it out. Maybe play in a notebook after looking at those references and share your progress?

Also - this might be a good question to ask in the D3 community Slack: <https://d3js.slack.com/> (updated) There may be more folks there and also that community will be more adept with D3 in particular :heart:

How can I join this community? After clicking I see only error.

Probably I need an invitation to join this channel

You can follow this link to join: <https://join.slack.com/t/d3js/shared_invite/zt-1neihq96a-xkXVPXYOmKg8ou7DL3kr7g|https://join.slack.com/t/d3js/shared_invite/zt-1neihq96a-xkXVPXYOmKg8ou7DL3kr7g>

<https://join.slack.com/t/d3js/shared_invite/zt-1neihq96a-xkXVPXYOmKg8ou7DL3kr7g>

image.png

Thanks for surfacing this, Andres! We don’t currently have a way to format the rows in a Data Table Cell, but if you’d like formatted rows, you could chose to display them using a <https://observablehq.com/@observablehq/input-table|table input>, where you can specify a format, as seen in <https://observablehq.com/@observablehq/input-table#cell-536|this example>.

I’ll pass this along as a feature request to rest of the Data Table Cell team!

I keep pushing for some sort of notebook localization, as using the default "us format" for date parsing us rude! most of worlds population doesnt use that format :rolling_on_the_floor_laughing:

Ah, thanks for clarifying — I think notebook wide localization is a great idea and will surface :+1:

And also :heavy_plus_sign: to not being U.S. centric in our product choices!

And you’re not the only person giving this feedback! <https://github.com/observablehq/feedback/issues/411>

actually, I am. That issue is mine :face_holding_back_tears:

Well now I’ve upvoted it and started a discussion with our engineers — thank you for also formalizing the request in the repo!

i did a year ago! I could add this example in the issue if it helps clarify! thanks

Hey <@U050DK34JQ3>, could you elaborate a little more what you are trying to achieve?
• If you’d like to embed a cell in your application, you can follow this tutorial: <https://observablehq.com/@observablehq/embeds>
• if you’d like to host a notebook entirely on your server, you can follow this guide: <https://observablehq.com/@observablehq/advanced-embeds>
• If you’d like to use Observables Plot visualization library in your application, you can find some example in the readme <https://github.com/observablehq/plot>

Actually I'm creating an application in reactJS, in which I have to show reports in different charts like bar, line, pie etc.

I'm ready to use paid library but is should be easy customizable

You can create notebooks on Observable and then integrate them into your application, following the guides shared by Christoph. However, only the Observable Runtime is open source, and notebooks embedded this way won't show Data tables.

To add to <@U048E2BJL9Z>’s answer, you can adapt almost all examples that you find in an Observable notebook to “standard” JS that you can use in your react app. Here’s a neat demo of how this can look like: <https://observablehq.com/@bumbeishvili/convert-observable-code-to-normal-javascript>

but the way I want to show reports it won't be integrated in that way

Please understand that Observable is a platform, not a library.

that's  was only my query. I want develop on my platform by using library

Well, you can't. :slightly_smiling_face: Our compiler and UI aren't open source.

However, there are a lot of great open source solutions that follow the notebook model. I encourage you to explore those.

Hi Mukesh, and welcome to the community!  Observable allows you to use many libraries that are available on NPM.  Do you have specific parameters for your project that you can share?

<@U0489M6NVGU> answered in this thread: <https://observable-community.slack.com/archives/C03SEMPUF6F/p1679918747115659?thread_ts=1679916441.716729&amp;cid=C03SEMPUF6F>

All data that are read in from CSV are initially interpreted as string values.  How are you r dates formatted in the original CSV?  If they are formatted in the same way as the source data in the notebook, everything should work.  If not you may have to do some tinkering to get the dates working correct.
Can you share your progress and attempts as a notebook?

Sure.  The first notebook shows one where the data randomly works.  The second notebook shows a non-working example of where I updated the same data by adding more data and then proceeded to monkey around with the date format for what seems like hours and hours due to the error I was receiving. 

Any insight would truly be appreciated.  I am falling in love with this stuff and excited to push past the rookie mistakes at some point.  Thanks again!

Works:  <https://observablehq.com/d/b5ddc25588d5ef1a|https://observablehq.com/d/b5ddc25588d5ef1a>

Non-Working:  <https://observablehq.com/d/c583981bf0bd1df4|https://observablehq.com/d/c583981bf0bd1df4>

<@U04NDMQ0MGR> If you parse the date field when you import the csv, it fixes the problem:

```dji = (await FileAttachment("^DJI-3@3.csv").csv({typed: true})).map(d =&gt; {
  const {date, ...row} = d // split date out from the rest of the row
  return {date: new Date(date), ...row} // rebuild with the date parsed as a date
})```

Likewise, if you load the csv into the data table, you can use the data table name as the source for the calendar charts as well - the date is pre-parsed when imported to the table…

Here is a suggestion fix: <https://observablehq.com/compare/c583981bf0bd1df4...cd1a1eb6c4769b2d>

<@U04DB6A0CEQ> Thank you for this.  I appreciate it.

I had actually found <https://stackoverflow.com/questions/5619202/parsing-a-string-to-a-date-in-javascript|this article> yesterday while looking for a solution.  I think I was on the right track but being a noob makes everything take way longer.  Especially when you don't know exactly what the problem is that you are trying to solve.

You seemed to know precisely what to do.  Whereas, I played with the new Date() and getUTCFullYear for at least two days with no luck.  Is that just a time/experience thing or do you have some insight for me to learn from?  I assume just playing around consistently like I am right now and time is going to be the most beneficial.

Thank you again.  Very much.  Cheers!  -M@

Dates are always a bit tricker than I want them to be - it’s not you! In my case I just recognized that the error was from the calendar’s attempt to invoke a date method, but the source data was still a string (as <@U0489M6NVGU> pointed out). Keep playing and keep asking questions - it’s the best way to learn!

getFullYear Error.JPG

Here is the location of the error in the Calendar, for reference.

Here’s a small notebook that can be used to play around: <https://observablehq.com/d/9e77715734f37101>

Update: Found out it works as expected if I use the `db_initial.query()` syntax instead…

This is because the SQL cell uses SQL query parameterization, and the `.query()` version you are using embeds the value in the query string directly. I find it odd that DuckDB doesn't allow parameterization on views like that though...

I see! Thanks for the explanation <@U0484AHPADB>

By the way, you can match an SQL cell's behavior by using
```db_initial.query(...db_initial.queryTag`
select *
from foo
where foo.id in ${myInput}
`)```

the issue is likely because VizabiSharedComponents does `require("mobx")` which ends up 1) importing another version, hence the multiple versions error, 2) the wrong version, since i need v5 and the latest is v6, where mobx.decorate was renamed.

replacing `require('mobx')` in UMD header with `mobx || require('mobx')` or just `mobx` didn't do anything

I'm still trying to piece together exactly what's happening

were you able to figure out a workaround with your latest version? I see around <https://observablehq.com/d/3f9363cf8e3cb899@209|v209> is where you were getting the mobx.decorate error.

<@U050QFQFZJL> thanks for looking at it! we have succeeded in the end by replacing file imports with npm imports, looks like npm imports add peer dependencies as needed in the correct versions

<https://observablehq.com/@vizabi/bubblechart-google-csv>

<https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app|This notebook> provides guidance on how to embed a notebook in a react app :slightly_smiling_face: Does this help?

oh, looks like I've exceeded the monthly quota this time... Probably the ~500mb I uploaded last week; deleting those now... :sweat_smile:

Perhaps this message should suggest deleting old files - I happen to know that's how the quota system works (or did last time I checked) but it's not obvious from this message

This seems to have left some files in a bad state. The notebook shows all files as uploaded successfully, but certain file attachments never load (see spinner):

It seems to know on some level that they're not available, eg. the file name is not clickable here. Maybe it's a holdover from the "local file" state while they were still being uploaded?

Do the states clear when you reload the notebook?

The broken files are still listed in the Files pane?

I’m not sure where they went - it’s possible I deleted the files 

I checked my notebooks and trash and don’t see a notebook with broken files but I may have just removed them 

Understood. Thanks for reporting, we'll try to reproduce the problem. :pray:

Thanks. I should have kept the files around for debugging… (but maybe they fixed themselves)

I was uploading them by selecting multiple files  at once from the file picker. I think I only had one batch of 16 files or so going at a time, but small chance I had two batches uploading at once, in case there’s relevant 

I’ve made some changes to the knob that <@U04HEJ4D3RA> wrote, to allow for two-way data binding.
You can check out the notebook here <https://observablehq.com/d/73ba2241579fa9dd#cell-47>
I’m noticing some oddness when trying to manually enter values in the numeric input that is tied to the range control. Typing 0.7 for example appears to reset the input to 0.

That’s interesting Tom. When you say inputs.input, is that not the text input that the range control emits?

Think of any additional inputs as "remote controls" for your primary input (which should be the only one with a "viewof" prefix).

<https://twitter.com/0xdesigner/status/1642554817590566915?s=46&amp;t=-PWFUJX59vSqyby7TidREg|https://twitter.com/0xdesigner/status/1642554817590566915?s=46&amp;t=-PWFUJX59vSqyby7TidREg>

I’m not sure exactly what that means, but I did try to follow your previous advice to create 3 views. I added a `viewof Inputs.input` and used it as the second argument in the `bind` calls. The behavior appears to be the same.
<https://observablehq.com/d/73ba2241579fa9dd#cell-85>

Typing manual changes to the number input in the range control fail when using a `.` in the value.

Yeah something is broke there. I will look. For these types of issues I use <https://observablehq.com/@tomlarkworthy/ndd|https://observablehq.com/@tomlarkworthy/ndd>

it's the index of the element from the dataset

<@U048X1JDDHN> hmmmmmm ok, thanks

<http://g.recordit.co/hdNncWFTHY.gif>

update (if anyone ever has a similar problem and happens to stumble on this post): Connor came up with an awesome fix. Here's his solution: <https://observablehq.com/d/a22856fa16063264>

<https://observablehq.com/@d3/d3-flatgroup#cell-54|d3.flatRollup> might be a good option

Sure. `require` "simply" returns a promise, so we can use JS's promise tools to work with it. Assuming `unpkg` is returning an error, you can catch it and swap in the other provider
```P5 = require('<https://unpkg.com/p5@1.2.0/lib/p5.js').catch(()> =&gt; require("<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js>"))```

You could probably also set up a `Promise.race()` situation where you try both in parallel, that seems heavy handed though

You are faster and more elegant. I arrived at the same only after lots of code and using two cells (one to define the function and one to call it):

```evalP5 = () =&gt; {
  let message = '';
  try {
    require('<https://unpkg.com/p5@1.2.0/lib/p5.js>');
    message = 'p5.js loaded successfully.';
    return require('<https://unpkg.com/p5@1.2.0/lib/p5.js>')
  } catch (error) {
    console.log('Failed to load p5.js from <http://unpkg.com|unpkg.com>. Trying cdnjs.com...');
    try {
      require('<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js>');
      message = 'p5.js loaded successfully.';
      return require('<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js>')
    } catch (error) {
      console.error('Failed to load p5.js from <http://cdnjs.com|cdnjs.com>:', error);
      message = "nothing's working";
      return message;
    }
  }
}```

Oh, heads up. I notice that in both my example and Brett's original, the versions of p5.js are different (1.2 in the unpkg branch vs 1.6 in the fallback). It would be best to use the same fixed version

Also, I hear that jsdelivr often works better than any of the above: <https://www.jsdelivr.com/>.

You can just drop the host to have it fall back to <http://cdn.observableusercontent.com|cdn.observableusercontent.com>:
```require('p5@1.2.0/lib/p5.js')```

So I could just have catches all the way down.
`P5 = require('<https://unpkg.com/p5@1.6.0/lib/p5.js').catch(()> =&gt; require("<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js>")).catch(() =&gt; require("<https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js>"))`

please don't :slightly_smiling_face: just use jsdelivr or leave the host off

if the hosts off will it try different hosts until if gets a win?

until now i didn't even realize that "digital prepping" can exist :grimacing:

seriously though, you're preparing for a case that will never happen and convoluting your code in the process. just don't use <http://unpkg.com|unpkg.com> which is by far one of the most unreliable services.

&gt; if the hosts off will it try different hosts until if gets a win?
<@U0484B61KPX> sorry, bit late here, i misread your question: no, it will default to <http://cdn.observableusercontent.com|cdn.observableusercontent.com> which uses jsdelivr under the hood

but i can't remember a single instance where jsdelivr went away

<https://statusgator.com/services/jsdelivr>

apparently several times in March? - no, those are just 'warn'

<https://status.jsdelivr.com/> - no incidents :slightly_smiling_face:

<@U0489M6NVGU> those outages in the first link are reported for <http://data.jsdelivr.com|data.jsdelivr.com>

i realized the first link wasn't great and found the actual status report after.  i was curious.

yeah, tbh i wouldn't trust that site (the first one)

I just commented on <https://observablehq.com/@tmcw/p5>  with a request to update the link as this is the main way people access p5 on observable.

Solved: Use `await’ on sql query part.
Thanks, <https://observable-community.slack.com/archives/C03SEMPUF6F/p1680635576967959|Eli>

For further reading: <https://observable-community.slack.com/archives/C03SEMPUF6F/p1680635863821679>

Just put `await` before your call to pizzeriaDB.sql