Observable-Community

image.png

<#C03SH3F8J4C|> Chart built using CanvasJs and causing blurrness issue at the time of zooming

Can this chart be built using D3, if yes how do we break down and build the complete chart. should we use a normal html table and use d3 to draw the lines or you prefer us to use complete d3 to build the whole chart

Not built in, but there's an issue in which someone also shared a workaround: <https://github.com/observablehq/plot/issues/1590>

Plot does produce an SVG image that can then be used by D3 for some interactions.

Here is an example of Zooming an SVG.
<https://observablehq.com/@d3/zoom>

&gt; dynamic org charts
What do you have in mind? Can you share an example of a dynamic org chart?

D3 is pretty low level and does not have ready-made components for entire charts.

Probably the best path forward is to
• Get clear on your requirements for a dynamic org chart (visual layout, detailed feature list, what is meant by "dynamic")
• Search around for D3 examples come close to your requirements
• Migrate parts from those examples into your app

Hi Neeraj. Are you trying to use the database proxy from a notebook, or from some other environment? I don't think we've documented how to generate those tokens, so it would be tricky to use them without Observable (though it is possible)

If you're using it from a notebook, you shouldn't use fetch, you should instead add it as a database in your workspace settings.

i have embedded the notebook in gatsby appliction. so i am not able to use database connection as i am embedding it as a node package.

Yes. You can access the query parameters of the URL with `location.search` and the URL hash with `location.hash`. Here is an example: <https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters|https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters>

<https://observable-community.slack.com/archives/C03SEMPUF6F/p1699435037812049|One thread> is enough. Please don't post your question to multiple channels.

so,can you tell me the answer?thank u:slightly_smiling_face:

debugging from  a picture is not easy no matter how beautiful or  handsome you gender is.

Shouldn't it be quadrantAttractionForce()
not
quadrantAttractionForce
because it's a function?

This might also help.
<https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho>

:wave::skin-tone-4: Hi everyone! We have many new members that recently joined and we wanted to reshare this!

:tada: *Welcome to Observable Community Slack*

We’re excited to see you here. The Observable Community Slack is the place to connect with other Observable users, ask questions, and showcase your work.

:bulb:*How to get started*
• Update your Slack profile: Help others connect with you by <https://slack.com/help/articles/204092246-Edit-your-profile|updating your Slack profile> with your . Add your Observable Profile URL and more.
• Introduce yourself: Let others know who you are, and how you’re using Observable or what projects you’re working on, andalong with something fun about yourself. The *<https://observable-community.slack.com/archives/C03STDM935X|#introduce-yourself>* channel is a great place to start and showcase your work!
• Check out the Code of Conduct: The Observable community is a safe and inclusive space. Please read our <https://observablehq.com/@observablehq/code-of-conduct|Community Code of Conduct>.
 *Channel Directory*
• ️ *<https://observable-community.slack.com/archives/C04811Q675Z|#announcements>*: Community-wide announcements and notifications from the Observable team.
• ️ *<https://observable-community.slack.com/archives/C049FPHH2QL|#app-development>*: Building apps with Observable? Connect with other app developers in this channel.
• ️ *<https://observable-community.slack.com/archives/C03SH3F8J4C|#community>*: Connect with  the Observable community by sharing your work and asking questions.
• ️ *<https://observable-community.slack.com/archives/C05BA8345B8|#d3>*: For all questions or discussions about D3.
• ️ *<https://observable-community.slack.com/archives/C049RUSHGRF|#dashboards>*: Are you creating dashboards with Observable? Use this channel to share your tips and ask for feedback.
• ️ *<https://observable-community.slack.com/archives/C04QQHA8QCQ|#data-visualization-course>*: For participants in the Data Visualization Fundamentals Course.
• ️ *<https://observable-community.slack.com/archives/C048YPJ5T9D|#developers>*: A place for developers to discuss best practices and tips
• ️ *<https://observable-community.slack.com/archives/C049DDYMDCJ|#edu>*: Share education experiences and tips with those using Observable for teaching and academic research.
• ️ *<https://observable-community.slack.com/archives/C03SBQZVA2Z|#events>*: A channel to share industry-related events that the community may like to join.
• ️ *<https://observable-community.slack.com/archives/C03SEMPUF6F|#help>*: Feeling stuck? Feel free to ask the community for help.
• ️ *<https://observable-community.slack.com/archives/C048RUYEHK2|#insight-attendees>*: Connect with attendees and speakers from Observable Insight.
• ️ *<https://observable-community.slack.com/archives/C03STDM935X|#introduce-yourself>*: Say hi to the Observable community and let others know what you’re working on.
• ️ *<https://observable-community.slack.com/archives/C0514TBV4H1|#learning-javascript>:* For participants in the Introduction to Data Wrangling and analysis in JavaScript Course.
• ️ *<https://observable-community.slack.com/archives/C056KPGAKFH|#introduction-to-sql>* For participants enrolled in the Introduction to SQL course.
• ️ *<https://observable-community.slack.com/archives/C05R32H7FT4|#introduction-to-d3>*: For participants enrolled in the Introduction to D3 course
• ️ *<https://observable-community.slack.com/archives/C03SBMB2Y5B|#lets-begin>*: The getting started destination for the Observable Slack Community.
• ️ *<https://observable-community.slack.com/archives/C0482KA4SM9|#random>*: Share ideas or other topics the community may enjoy.
• ️ *<https://observable-community.slack.com/archives/C03SEMQRW1H|#resources>*: Resources and updates to  help the community get started with Observable.
• ️ *<https://observable-community.slack.com/archives/C048B7CBMFX|#show-and-tell>*: A destination to show what you created on Observable and the story behind it!
• 
 *Observable Resources*
• ️ <https://observablehq.com/tutorials|Tutorials>: Getting started with Observable? You’ve come to the right place.
• ️ <https://observablehq.com/@observablehq/documentation|Documentation>: Documentation to learn how to get things done, think with data, reveal insights from your data, collaborate with others, and use visualizations to present those insights to others.
• ️ <https://observablehq.com/@observablehq/learn-javascript-introduction?collection=@observablehq/tutorial|Learn Just Enough JavaScript: Introduction>
• ️ <https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/getting-started|A taste of Observable>
• ️ <https://observablehq.com/guide/first-steps|Profile quick guides>
• ️ <https://observablehq.com/customer-stories|Customer stories> - Read Examples of how customers are using Observable.
• ️<https://observablehq.com/teams|Teams>: Learn more about Observable Teams
• ️ <https://talk.observablehq.com/|Forum> The official Observable forum.
*Get in touch*
If you have a question or idea for a new Slack channel, feel free to ping <@U03SEM2TAFM>

If you need technical support, please email <mailto:support@observablehq.com|support@observablehq.com>.

:speaking_head_in_silhouette: A list of some Observable team members in the community Slack.
We are always here to help.

• <@U03SEM2TAFM> - Social Media Manager
• <@U048E2BJL9Z> - Engineer
• <@U04831YNHSN> - VP of Sales
• <@U04832DMXPV> - Head of Customer Success
• <@U048YB4AXU0> - User Success
• <@U0484N0KZ0D> Observable - Data Visualization Developer
• <@U048EJNREUB> Horst - Data Scientist Advocate
• <@U04878C4B6E> - Data Visualization Developer at Observable
• <@U048X1JDDHN> - Plotter/Developer

Algum brasileiro posso me ajudar me dando uma orientação na area ? E tirando dúvidas simples.

Não hesite em colocar as suas questões aqui.

Happy Wednesday, folks! I'm a Tableau Social Ambassador, among other things, and it feels like there's a critical mass of dataviz people developing on Bluesky! Their "who you may know" recommender needs a new model or something, so in the meantime I am maintaining a Google Sheet with data practitioners' Bluesky, Mastodon, and Threads handles/URLs. Please add your details! <https://docs.google.com/spreadsheets/d/165PQKGiSKHfWF7SqC4qBv50Sa7HGmPOav5KL0VtIpQ0/edit?usp=sharing>

Hi Mike, yes I'm super interested! I am also from Canada and I recently started a newsletter myself on similar topics: <https://chartingprogress.substack.com/|Charting Progress>. I would definitely like to talk!

:sparkles: Happy Friday everyone!

End your week by helping us enhance Observable by taking our quick survey.

As a token of appreciation, you'll be entered into a drawing to win a *$200 Amazon gift card!* :gift:

:point_down:
<https://docs.google.com/forms/d/e/1FAIpQLSecXi3DEcc82F8BArVGIAUXEtH_pXvy4nl6lnE8KzlIMMZYHw/viewform>

Thank you! Hope everyone has a great weekend!

Hey <@U068JAP855Y>, I’m not sure about Observable providing such infrastructure, but your question reminded me of <@U04HEJ4D3RA>s SaaS-Notebook <https://observablehq.com/@tomlarkworthy/saas-tutorial?collection=@tomlarkworthy/apps> as well as other work Tom has done.  Could that notebook be of interest for you?

there are a million of ways to secure pushing stuff from observable to elsewhere as it is executing Javascript. There are a million ways to pull from observable too, as the (public) endpoints are unauthorised. However, pushing and pulling executable code can be problematic if your users are external

For the specifics of charts, one nice thing about vega is the encoding is just JSON, so you can remove remote code execution from the equation by using vega to draw charts. We are in the same boat at work. I love Plot but the extra expressivity can be a problem in shared environments, so we settled on moving around vega chart JSON blobs, which by construction are not vulnerable to remote code execution attacks.

Its mentioned here, vega-lite has its own expression language. <https://observablehq.com/@observablehq/plot-vega-lite> Plot uses Javascript.

Thanks everyone for your thoughtful replies!

Hi guys. I'm sharing my notebook where I try to replicate a google finance chart within Observable plot. <https://observablehq.com/d/6eb190775d47fe25>. I hope this can be useful for anyone who is learning observable. Any feedback is appreciated to keep improving in my journey on learning observable plot and D3.js (specially on the tooltip piece!)

you could use occlusionY (a transform that is not yet part of plot, but that you can find in <https://observablehq.com/@observablehq/plot-slope-chart|this notebook>)

<@U048X1JDDHN> loving the <https://observablehq.com/@observablehq/plot-cancer-survival-rates|occlusionY> function. Was thinking about if it could be extended to add call-out arrows as below between bubbles and their text labels. I had a look at the code, but it did not seem like this was not possible because the function only works on the text mark and cannot draw arrow marks after d3.forceSimulation is run.

I've been working on an improved version that would work on all marks, and only offset the y2 channels if you have y1 and y2, so it should solve this. See <https://github.com/observablehq/plot/pull/1957>

Group 1.png

The tree data structure assumes you have a unique parent for each node.
So you cannot create a tree with your desired properties. You would have to use a graph.

It is obviously possible to draw the additional links which won't be part of your tree:
E.g.
1. You create a function to create the links 
`function createLinks(root, nodeArray) {`
  `let node1, node2;`
  `let result = [];`
  `for (let pair of nodeArray) {`
    `node1 = root.find((d) => d.data.name === pair[0]);`
    `node2 = root.find((d) => d.data.name === pair[1]);`
    `if (node1 && node2) {`
      `result.push({`
        `source: [node1.x, node1.y],`
        `target: [node2.x, node2.y]`
      `});`
    `}`
  `}`
  `return result;`
`}`

2. You draw the links

  `// add this part to create additional links`
  `const myNewLinks = [["B", "D"]];`
  `const newLinks = svg`
    `.append("g")`
    `.attr("fill", "none")`
    `.attr("stroke", "red")`
    `.attr("stroke-opacity", 0.4)`
    `.attr("stroke-width", 1.5)`
    `.selectAll()`
    `.data(createLinks(root, myNewLinks))`
    `.join("path")`
    `.attr(`
      `"d",`
      `d3`
        `.linkHorizontal()`
        `.source(function (d) {`
          `return [d.source[1], d.source[0]];`
        `})`
        `.target(function (d) {`
          `return [d.target[1], d.target[0]];`
        `})`
    `);`
  `// end additional part`

<https://observablehq.com/d/35bb3b04215ecc37>

Hello there! I was wondering if there has been any rumblings internally about Slack allowing the app for notebook notifications. Thanks!

(see all you data peeps in the new year)

sure; see <https://observablehq.com/plot/marks/raster>

<@U048X1JDDHN> are you talking about using the random-walk interpolator ?

<https://observable-community.slack.com/archives/C048YPJ5T9D/p1704192743485999?thread_ts=1704190140.707409&cid=C048YPJ5T9D|As mentioned before>, please post only _one_ message or thread per question.

You can edit your message to include additional information.

Can someone tell me why my attempt at a ridgeline graph is misaligned? Fiddle is here: <https://jsfiddle.net/Xliff/b0kaq624/1/>.

My graphs seem to be transposed up two rows.

I've been able to fix some of my graph issues, but now it doesn't overlap, it currently looks like this:

:coffee:  *Today at noon EST!*  :coffee:
In 2022 and 2023, we held nearly all of our Virtual Coffee Breaks at 8 AM EST, but this year we’ve added NOON EST for those on the west coast and those who can’t do 8 for whatever reason. Please join us! All are welcome! We’re completely tool agnostic and have dataviz devs using d3, Tableau, Power BI, R, Python, Sisense, Metabase, and more.
<https://womenindataviz.craft.me/1nMRYSPXMRZfHw>

has renamed the channel from "community" to "welcome"

set the channel description: Essential information for folks new to Observable Community Slack

*Welcome to Observable Community Slack!*

We’re excited to see you here. Observable Community Slack is the place to connect with other users, ask questions, share your work, and stay up to date with announcements from the Observable team.

*Getting started*
• *Update your Slack profile:* Help others find and connect with you by <https://slack.com/help/articles/204092246-Edit-your-profile|updating your Slack profile> with your Observable Profile URL, profile picture, and more.
• *Introduce yourself:* Let others know who you are, what you’re working on, and how you’re using (or planning to use) Observable in the <#C03STDM935X|> channel.
• *Here with questions?* A great place to post is the <#C03SEMPUF6F|> channel. For easier tracking, please only post your question in a single place and use threads (not separate posts) in follow-ups.
• *Check out the Code of Conduct:* The Observable community is a safe and inclusive space. Please read our <https://observablehq.com/@observablehq/code-of-conduct|Community Code of Conduct>.
*Channel directory*
• *<#C03SH3F8J4C|>:* Essential information for folks new to Observable Community Slack
• *<#C04811Q675Z|>:* News and product updates from the Observable team
• *<#C03STDM935X|>:* Say “hello” and introduce yourself to the Observable community
• *<#C03SEMPUF6F|>:* Ask questions and get help from the community and Observable team
• *<#C048B7CBMFX|>:* Share your work and how you built it. Also, a great place to post helpful or interesting resources.
• *<#C06KPR8FCE4|>:* Ask questions, have discussions, and share resources related to building data apps, dashboards, and reports with Observable Framework
• *<#C06EZB298NS|>:* Where new users, seasoned experts, and everyone in between can discuss and ask questions about building data visualizations in Observable Plot 
• *<#C05BA8345B8|>:* The official D3 Slack channel. For all discussions and questions about the D3 library for bespoke data visualization.
• *<#C06EZB886J2|>:* Discussions and questions about working in Observable notebooks, collaborating with teammates, and sharing your work at <http://observablehq.com|observablehq.com>
• *<#C03SBQZVA2Z|>:* Share and learn about upcoming events related to Observable, JavaScript, data visualization, and more
• *<#C049DDYMDCJ|>:* A place for educators using Observable in the classroom
• *<#C0482KA4SM9|>:* For anything that doesn’t fit anywhere else
*Resources*
• <https://observablehq.com/documentation/|Observable documentation>
• <https://observablehq.com/framework/|Observable Framework documentation>
• <https://observablehq.com/plot/|Observable Plot documentation>
• <https://d3js.org/|D3 documentation>
• <https://observablehq.com/@observablehq/observable-quick-guides|Quick guides> (interactive guides to help you get started)
• <https://talk.observablehq.com/|Observable Forum>
*Get in touch*
Questions or feedback on our Community Slack? Feel free to message <@U048EJNREUB>. For account issues and technical support, please email <mailto:support@observablehq.com|support@observablehq.com>.

*Welcome to Observable Community Slack!*

We’re excited to see you here. Observable Community Slack is the place to connect with other users, ask questions, share your work, and stay up to date with announcements from the Observable team.

*Getting started*
• *Update your Slack profile:* Help others find and connect with you by <https://slack.com/help/articles/204092246-Edit-your-profile|updating your Slack profile> with your Observable Profile URL, profile picture, and more.
• *Introduce yourself:* Let others know who you are, what you’re working on, and how you’re using (or planning to use) Observable in the <#C03STDM935X|> channel.
• *Here with questions?* A great place to post is the <#C03SEMPUF6F|> channel. For easier tracking, please only post your question in a single place and use threads (not separate posts) in follow-ups.
• *Check out the Code of Conduct:* The Observable community is a safe and inclusive space. Please read our <https://observablehq.com/@observablehq/code-of-conduct|Community Code of Conduct>.
*Channel directory*
• *<#C03SH3F8J4C|>:* Essential information for folks new to Observable Community Slack
• *<#C04811Q675Z|>:* News and product updates from the Observable team
• *<#C03STDM935X|>:* Say “hello” and introduce yourself to the Observable community
• *<#C03SEMPUF6F|>:* Ask questions and get help from the community and Observable team
• *<#C048B7CBMFX|>:* Share your work and how you built it. Also, a great place to post helpful or interesting resources.
• *<#C06KPR8FCE4|>:* Ask questions, have discussions, and share resources related to building data apps, dashboards, and reports with Observable Framework
• *<#C06EZB298NS|>:* Where new users, seasoned experts, and everyone in between can discuss and ask questions about building data visualizations in Observable Plot
• *<#C05BA8345B8|>:* The official D3 Slack channel. For all discussions and questions about the D3 library for bespoke data visualization.
• *<#C06EZB886J2|>:* Discussions and questions about working in Observable notebooks, using Framework, collaborating with teammates, and sharing your work at <http://observablehq.com|observablehq.com>
• *<#C03SBQZVA2Z|>:* Share and learn about upcoming events related to Observable, JavaScript, data visualization, and more
• *<#C049DDYMDCJ|>:* A place for educators using Observable in the classroom
• *<#C0482KA4SM9|>:* For anything that doesn’t fit anywhere else
*Resources*
• <https://observablehq.com/documentation/|Observable documentation>
• <https://observablehq.com/framework/|Observable Framework documentation>
• <https://observablehq.com/plot/|Observable Plot documentation>
• <https://d3js.org/|D3 documentation>
• <https://observablehq.com/@observablehq/observable-quick-guides|Quick guides> (interactive guides to help you get started)
• <https://talk.observablehq.com/|Observable Forum>
*Get in touch*
Questions or feedback on our Community Slack? Feel free to message <@U048EJNREUB>. For account issues and technical support, please email <mailto:support@observablehq.com|support@observablehq.com>.

*Welcome to Observable Community Slack!*

We’re excited to see you here. Observable Community Slack is the place to connect with other users, share your work, and stay up to date with announcements from the Observable team.

*Getting started*
• *Update your Slack profile:* Help others find and connect with you by <https://slack.com/help/articles/204092246-Edit-your-profile|updating your Slack profile> with your Observable Profile URL, profile picture, and more.
• *Introduce yourself:* Let others know who you are, what you’re working on, and how you’re using (or planning to use) Observable in the <#C03STDM935X|> channel.
• *Check out the Code of Conduct:* The Observable community is a safe and inclusive space. Please read our <https://observablehq.com/@observablehq/code-of-conduct|Community Code of Conduct>.
*Channel directory*
• *<#C03SH3F8J4C|>:* Essential information for folks new to Observable Community Slack
• *<#C04811Q675Z|>:* News and product updates from the Observable team
• *<#C03STDM935X|>:* Say “hello” and introduce yourself to the Observable community
• *<#C048B7CBMFX|>:* Share your work and how you built it. Also, a great place to post helpful or interesting resources.
• *<#C03SBQZVA2Z|>:* Share and learn about upcoming events related to Observable, JavaScript, data visualization, and more
• *<#C049DDYMDCJ|>:* A place for educators using Observable in the classroom
• *<#C0482KA4SM9|>:* For anything that doesn’t fit anywhere else
*Here with questions? Try one of our support channels for the following topics:*
• *Observable platform*: The <https://talk.observablehq.com/|community Forum>! There are new categories for <https://talk.observablehq.com/c/notebooks/16|Notebooks> and <https://talk.observablehq.com/c/data-apps/15|Data Apps>, as well as the general <https://talk.observablehq.com/c/help/6|Community Help> category.
• *Observable Framework* <https://github.com/observablehq/framework/discussions|Observable Framework GitHub discussion board>
• *Observable Plot*: <https://github.com/observablehq/plot/discussions|Observable Plot GitHub discussion board>
• *D3*: <https://github.com/d3/d3/discussions|D3 GitHub discussion board>
*Resources*
• <https://observablehq.com/documentation/|Observable documentation>
• <https://observablehq.com/framework/|Observable Framework documentation>
• <https://observablehq.com/plot/|Observable Plot documentation>
• <https://d3js.org/|D3 documentation>
• <https://observablehq.com/@observablehq/observable-quick-guides|Quick guides> (interactive guides to help you get started)
• <https://talk.observablehq.com/|Observable Forum>
*Get in touch*
Questions or feedback on our Community Slack? Feel free to message <@U048EJNREUB>. For account issues, please email <mailto:support@observablehq.com|support@observablehq.com>.

*Welcome to Observable Community Slack!*

We’re excited to see you here. Observable Community Slack is the place to connect with other users, share your work, and stay up to date with announcements from the Observable team.

*Getting started*
• *Update your Slack profile:* Help others find and connect with you by <https://slack.com/help/articles/204092246-Edit-your-profile|updating your Slack profile> with your Observable Profile URL, profile picture, and more.
• *Introduce yourself:* Let others know who you are, what you’re working on, and how you’re using (or planning to use) Observable in the <#C03STDM935X|> channel.
• *Check out the Code of Conduct:* The Observable community is a safe and inclusive space. Please read our <https://observablehq.com/@observablehq/code-of-conduct|Community Code of Conduct>.
*Channel directory*
• *<#C03SH3F8J4C|>:* Essential information for folks new to Observable Community Slack
• *<#C04811Q675Z|>:* News and product updates from the Observable team
• *<#C03STDM935X|>:* Say “hello” and introduce yourself to the Observable community
• *<#C048B7CBMFX|>:* Share your work and how you built it. Also, a great place to post helpful or interesting resources.
• *<#C03SBQZVA2Z|>:* Share and learn about upcoming events related to Observable, JavaScript, data visualization, and more
• *<#C049DDYMDCJ|>:* A place for educators using Observable in the classroom
• *<#C0482KA4SM9|>:* For anything that doesn’t fit anywhere else
*Here with questions? Try one our other support channels for the following topics:*
• *Observable platform*: The <https://talk.observablehq.com/|community Forum>! There are new categories for <https://talk.observablehq.com/c/notebooks/16|Notebooks> and <https://talk.observablehq.com/c/data-apps/15|Data Apps>, as well as the general <https://talk.observablehq.com/c/help/6|Community Help> category.
• *Observable Framework* <https://github.com/observablehq/framework/discussions|Observable Framework GitHub discussion board>
• *Observable Plot*: <https://github.com/observablehq/plot/discussions|Observable Plot GitHub discussion board>
• *D3*: <https://github.com/d3/d3/discussions|D3 GitHub discussion board>
*Resources*
• Learn about <https://observablehq.com/platform/canvases|Observable Canvases>
• <https://observablehq.com/documentation/|Observable documentation>
• <https://observablehq.com/framework/|Observable Framework documentation>
• <https://observablehq.com/plot/|Observable Plot documentation>
• <https://d3js.org/|D3 documentation>
• <https://observablehq.com/@observablehq/observable-quick-guides|Quick guides> (interactive guides to help you get started)
• <https://talk.observablehq.com/|Observable Forum>
*Get in touch*
Questions or feedback on our Community Slack? Feel free to message <@U048EJNREUB>. For account issues, please email <mailto:support@observablehq.com|support@observablehq.com>.