updating a d3js line graph in real-time using JSON information

Trying to wrap my head around dynamically updating a line graph with new data, shifting the graph to the left and adding fresh data from the right - you following me? Want it to behave just like the examples on

I'm fairly new to d3 (javascript) and looking to incorporate external JSON data.

[
{"Values": ["1.59"], "Datetime": "2016-12-10 14:29:22.007"},
 {...}
{"Values": ["1.91"], "Datetime": "2016-12-10 14:29:23.230"},
 {...}
{"Values": ["0.52"], "Datetime": "2016-12-10 14:29:23.238"}
]

The examples I've come across mostly focus on generated data or replacing one file with another.

Is there a way to tackle this issue by working with just one json datafile and utilizing array methods?

Thanks in advance for any guidance!

d3.json("https://api.myjson.com/bins/1814gv", function (error, data) {
if (error) throw error;
// format the data
data.forEach(function (d) {
    d.Datetime = parseTime(d.Datetime);
    d.Values = +d.Values;

});
...

Check out the complete code example on jsfiddle

Answer №1

Welcome to Stack Overflow! It seems like your question could use some more specific details, especially when it comes to understanding the basics of D3 and data binding.

One common update pattern can be found in this example. When elements are added, updated, or removed from an array, the related bound elements in the SVG will reflect those changes.

In D3, the array index is typically used to determine where new data should be displayed. For instance, adding new data at the end of a line graph involves adding it to the end of the array. Is this what you mean by transitioning to the right?

If by "transition" you're referring to a visual change between states, there's an example in the code snippet you provided. The tooltip shifts from opacity 0 to 1 when hovering over a point.

It's generally helpful to mark an answer as correct if it solves your issue, or simply upvote responses that were useful. Without more specific details, it might be challenging for someone to give a precise answer due to the broad nature of your question.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an Error: The JSON response body is malformed in a NextJS application using the fetch

Running my NextJS app locally along with a Flask api, I confirmed that the Flask is returning proper json data through Postman. You can see the results from the get request below: { "results": [ [ { "d ...

WordPress is failing to reference the standard jQuery file

I am currently attempting to include the jQuery DataTable JS file in my plugin to showcase database query results using DataTable. The JS file is stored locally on the server. Information about versions: WordPress: v4.0.1 jQuery: v1.11.1 DataTable: v1.10 ...

I want to hide jqvmap when viewing on mobile devices

I'm currently working on my website at . I have a template that I'm using as a guide, but I want to make the map disappear on mobile view and replace it with a dropdown list. Can anyone suggest what code I should use for this? Appreciate any hel ...

How can I pass a DOM element as a prop in Vue 3?

As someone who is brand new to Vue, I'm exploring the possibilities. Although it's not something I typically do, I believe achieving a similar outcome in React + JSX (untested) could look like this: render() { const el = <p>Blah <a hre ...

Create a dynamic process that automatically generates a variety of div elements by using attributes from JSON data

Is there a way to organize the fixtures from this data into separate divs based on the matchday attribute? I've tried using Underscore's groupBy function but I'm unsure how to dynamically distribute the data into individual divs for each re ...

Consolidation of files for Client-Code-Generation with Swagger-Codegen: What is the best way to merge all files into

Just recently started using Swagger and NodeJS, I successfully integrated Swagger into my NodeExpress application and generated typescript-client-code with Swagger-Codegen (specifically Typescript-Angular). However, the issue I am facing is that the gener ...

Struggling to convert a JSON response into an object model using TypeScript in Angular?

I'm encountering a problem when trying to convert a JSON response into an object. All the properties of my object are being treated as strings, is that normal? Below is my AJAX request: public fetchSingle = (keys: any[]): Observable<Medal> =&g ...

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Attempting to streamline my action shorthand that interacts with AsyncActionCreators. A function has been crafted to accept a React dispatch: Dispatch<T> parameter: const fetchProfileAction = actionCreator.async<void, Profile, any>('FETC ...

Disable the stack label in a specific column of a stacked column chart using Highcharts

Looking at this stacked column graph in the fiddle link, you'll notice that one column is in grey color to indicate that it is disabled. I am trying to figure out how to hide the total from the top of the column that is grey or belongs to the 'Pe ...

Using Angular, implementing conditional statements within a for loop

I am currently working on a project where I have an array being looped inside a tag, using the target="_blank" attribute. The issue is that one of the elements in the array should not have this target="_blank" attribute. What would be the best course of ...

How can a list of objects in a JPA entity with a many-to-one relation to a data entity be sorted based on the result of a method call from the data entity?

In my JPA entity User, there is a OneToMany relation to a UserStats entity. I made changes to the code to use UserStats instead of storing victoryRatio directly in the User entity. Now, calculateVictoryRatio() method is implemented in the UserDetails entit ...

Using spring web flow for efficient data transfer with ajax

After working with Spring MVC for some time, I have now ventured into using Spring Web Flow to easily create applications. My current dilemma is: I have a JSP page with textboxes that need to be filled out by the user. I want to transfer this user data to ...

Ways to update the value within an object in an array stored in a BehaviorSubject?

My initial data is: const menuItems = [{id: 1, active: false}, {id: 2, active: false}] public menuSubject$ = new BehaviorSubject<MenuItem[]>(menuItems); public menu$ = this.menuSubject$.asObservable(); I am attempting to update the element with ...

How to prevent uncaught errors when checking for undefined in if statements and dealing with undefined items

It appears that there are not many oboe tags being used on SO, but any assistance with this general JavaScript question regarding handling uncaught errors for undefined would be greatly appreciated!~ I am currently utilizing Oboe.js to stream data to a we ...

Iterate through the JSON response and send it back to Jquery

I'm almost done with my first jQuery autocomplete script and just need some assistance in understanding how to make the found elements clickable as links. Here is a snippet of my JavaScript code: $(document).ready(function() { var attr = $(&apos ...

Is there a way to terminate an ongoing axios request?

I have been encountering a memory leak issue whenever my browser is redirected away from this component. To resolve this, I tried to cancel it using the cancel token, but unfortunately, it doesn't seem to be working as expected. I am puzzled as to why ...

Steps for allowing the cells in a Data-Table column to be edited

Is it possible to have editable cells in a column of a Data Table with the support of the plugin? ...

Retrieving a targeted JSON element and adding it to a fresh object

Hello everyone, I have an object that resembles the following structure: [ { "app": 1, "scalable": true, "zoomable": true, "cropBoxResizable": true }, { "app" ...

Using data fetched from PHP in HTML via jQuery post: A step-by-step guide

I have created a function in jQuery that uses $.post to send data to a PHP file. The query in the PHP file is working fine and returning the data back successfully. JavaScript code: function send_agenda_data(cidade_data){ var data = {'cidade_dat ...

Having trouble getting the jQuery/JS redirect button to function properly

I'm fairly new to working with jQuery. My current challenge involves unsetting a cookie and then navigating to the next page. There are numerous resources discussing this topic online, but what seemed like a simple task has turned into a two-hour hea ...