User input a value to a graph, which redraws based on their input

Community Help
1

Hi, newbie here. Hope that I am asking my question in the correct way.

I would appreciate advice on if it’s possible to use Observable to capture user input direct into a chart or graph,and capture their value.

In summary, I want to include an interactive chart in my website. The user would either

  1. drag and drop (or select) from a set of input data values onto a chart against a pre-exising baseline,
    Or the user would click within a range on a pre-populated chart to add their value

  2. and then the chart would re-draw according that input.

  3. Then, optionally, it would reveal the chart of everyone else’s answers and point out the delta of this user’s data to the average.

The set of input data values in point 1 can be pre-determined by the website curator or dynamically added by the current or other users, allowing crowd-sourced creation of the data whcih can then be placed against a scale in a graph.

So, this is a bit more advanced that just creating cool charts and graphs from a set of static data, but would take input from the user.

It would need to also work via touch on a mobile device.

2

This is definitely possible, but you will have to write / adapt some javascript code on your own. For example, the d3 and vega javascript libraries for data visualization can be made interactive in many ways and I’ve found that playing around with them on Observable is a good way to learn how to use these libraries.

One way to get started is by finding some example published notebooks on the site that implement some of the functionality you desire and forking and editing them to see how they work. Here’s one nice curated list by @fil. The people on this forum are generally helpful and will be happy to help out with any more specific questions you might have.

3

Thanks for that direction. It’s good to know that my use case is possible.