Updating data in d3.js does not reflect changes made to the file

I am facing an issue with loading and visualizing CSV files in my web application. I have 5 CSV files named 1.csv, 2.csv, up to 5.csv. The files contain data that changes regularly. However, when I select a file from the dropdown list for visualization, it seems like the data gets cached. Even if I delete the file or make changes to it, the visualization continues showing the initial data loaded. I have tried refreshing the page but the problem persists.

selector.on("change", function(d){
    var selectedKey = keys[this.selectedIndex];
    d3.csv(selectedKey +".csv", function(data){
console.log(selectedKey +".txt");
    //var format = d3.time.format("%m/%d/%Y %H:%M:%S");
    var format = d3.time.format("%Y/%m/%d %H:%M:%S");
    data.forEach(function (e){
            e.dist = +e.dist;
            e.speed = +e.speed;
            e.lat=+e.lat;
            e.lon=+e.lon;               
            e.dd=format.parse(e.time);
            //console.log(e.dd);
    });
    dataset=data;
    var ndx = crossfilter(data);
    dimx = ndx.dimension(function(d) {return d.bearing});
    g = dimx.group(function(v){return v;});
    var output = g.top(Infinity);

}

    });

I need help identifying the root cause of this issue. Even after selecting a different file, such as 2.csv, the chart initially displays correctly. However, any subsequent changes made to 2.csv do not reflect in the visualization. Deleting 2.csv from the directory also does not update the visualization. This behavior persists even after refreshing the page and reselecting the file.

Answer №1

Retrieve data from a CSV file based on the selected key concatenated with '.csv' and a random number, then process it in the function.

This solution will address the issue.

Answer №2

I have been on a quest for an answer to this question. My csv data is being presented in a table using d3. The issue is that the csv file gets updated regularly, but the old data remains visible until I manually refresh the page. I am hopeful that by using

d3.csv(selectedKey +".csv"+'?' + Math.floor(Math.random() * 1000), function(data){}
it will solve my problem. Although, my approach would look something like
d3.csv( "csvfile.csv"+'?' + Math.floor(Math.random() * 1000).then( function(data){})

Answer №3

One possible solution could involve browser caching problems. Attempt to clear the cache or access the link using an incognito window.

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

Changing the context of Selenium using node's wd package

I'm having trouble finding documentation for Java clients, but I did come across the implementation for Node's wd client. However, I can't seem to locate where exactly it is in the module's external API. I'm not even sure what the ...

Adjust the size of horizontal <li> elements dynamically to keep them in a single row

I've been trying to set up a 'gallery' section on one of my pages, with three elements featured. However, I'm running into an issue where resizing the window or viewing on a smaller screen could cause overlaps or force a second row with ...

Ways to embed one block of javascript code within another block of javascript code

Can you help me with inserting the following code into a specific part of my JavaScript code? The issue I am facing is that the code contains all JavaScript, and when I directly add it, the gallery crashes. <div id='gallerysharebar'> & ...

Tips for identifying Autoplay failure in WaveSurfer.js

While I've been using the javascript media promise to identify when autoplay has failed according to this guide: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes, I'm curious about how to detect an autoplay failure in Wav ...

Utilizing Node.js and Mongoose, effortlessly update data in Mongo DB regardless of the existence of the collection

How can I update a field that may or may not exist? I attempted the following code: db.foo.update( { site: '"wisdom'}, { $set: {'club': 'fc barcelona'}}, (upsert=true) ) ...

Tips for validating a session on a React client following a successful authentication via an Express session

After setting up an express REST API backend and React Front End, the front end app redirects users to the signin page using OAuth. The express server then creates a session ID after successful authentication, which can be seen as a browser cookie connect. ...

Learn how to make a mesh in Three Js React refract its environment while keeping the background hidden from the camera

I've been grappling with this challenge for quite some time now, so any assistance would be highly valued! My aim is to create the illusion of an image being confined within a mesh structure. My initial idea was to utilize a mesh with defined thickne ...

.bootstrapMaterialDatePicker does not work within Codeigniter version 3

I am experiencing an issue with my form that has two date fields stored as varchar <div class="row clearfix"> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label"> <label for="ar ...

There was a problem retrieving the product information from the API

I have been struggling to pinpoint the exact issue at hand. The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM. Within my script, I am attempting to retrieve product data in ord ...

What are the steps to customize the $http interface in AngularJS?

Within my application, I am making an $http call with the following code: $http({ url: '/abc' method: "PUT", ignoreLoadingBar: true }) This $http call includes a custom par ...

Accessing my data on my personal server through firestore entails an extra step in the request process

If I were to set up Cloud Firestore on my personal server, wouldn't that create a "two-way trip" for accessing my data? What I find concerning is the fact that the client-side has to send a request to my server first, and then my server must reach ou ...

Presentation for a div's background image with the use of jQuery

My header contains a large div with text contents and boxes, along with a background image. Now I want to create a slideshow for this div's background. Does anyone know how to make a slideshow for a div's background image? I've searched ex ...

modify input type in Reactjs based on boolean state dynamically

I am currently working on implementing a checkbox feature that allows users to toggle between viewing their password or keeping it hidden. I decided to use Material UI React for the user interface elements. The checkbox is set up and functioning properly. ...

Exploring the capabilities of require() in nodeJS

I'm wondering about the inner workings of the require() function in a nodeJS application. What exactly does require() return? Let's say I want to utilize two third-party packages: lodash and request. After installing these packages, my code mig ...

An issue has been encountered in NodeJS with a route that begins with a percent sign causing an error

I have a NodeJS server set up with the following backend configuration: app.use(express.static(__dirname)) app.get('/', function(req, res){ res.send('main page here') }); app.get('/*', function(req, res){ res.send(&apos ...

Generate a Year attribute value using the information from the year field in a JSON document

Currently, I am exploring the functionalities showcased in this example: I am interested in adapting the following code snippet to work with my JSON file, which lacks a specific date data type field but includes a 'Year' value: // Transform Yea ...

It is impossible to resolve Npm vulnerabilities

My journey with learning React began when I decided to create my first app using the command: 'npx create-react-app my-app' However, upon building the app, I encountered a warning in the terminal: 22 vulnerabilities (9 moderate, 13 high) In ...

Having issues with the link page in react-router-dom?

Currently, I am utilizing the react-router-dom library to manage routers. However, I have encountered an issue where linking to another page does not change the page, but instead adds the new page right after the previous one as shown in the image below. W ...

When you click, apply the hidden class to all the div elements

Is there a way to apply the .hide class to all .slide divs whenever the .option button is clicked? If so, how can I modify my JavaScript code so that all .slide divs receive the .hide class (if they don't already have it) upon clicking the .option bu ...

Using node.js to stub an asynchronous function from a module that is required by a different module using proxy

Module being tested: 'use strict'; const config = require('config'); const q = require('q'); class RedisAccess { static getValue(key) { let deferred = q.defer(); if (config.redis.disableInteraction) ...