Importing data with D3

I'm currently diving into D3 and facing an issue with some code written in an older version of the library. The data loading process has changed in version 5.7.0, and I'm struggling to make it work for this specific example. Loading data with just one function is clear to me, but handling two functions in this scenario is proving to be a challenge.

Could someone provide guidance on how to update this code to function properly with the latest version of D3? Here's the snippet:

function show() {

'use strict';

// load the data
var loadedData;

d3.csv('./data/businessFiltered.csv').then(
    function(row) {
        switch (row.yearsInBusiness) {
            case "001" : row.yearsInBusinessLabel = "All"; break;
            case "311" : row.yearsInBusinessLabel = "less than 2 years"; break;
            case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
            case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
            case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
            case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
            case "323" : row.yearsInBusinessLabel = "more than 16 years"; break;
        }

        return row;
    },
    function (data) {
        loadedData = data;
        updateCircle();
    }); ...
javascriptd3.js

Answer №1

After reviewing the d3.csv() documentation, it seems that there is an option to specify a callback function using .get():

function displayData() {

'use strict';

// Fetching the data
var fetchedData;

d3.csv('./data/businessFiltered.csv')
    .row(function(row) {
        switch (row.yearsInBusiness) {
            case "001" : row.yearsInBusinessLabel = "All"; break;
            case "311" : row.yearsInBusinessLabel = "less than 2 years"; break;
            case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
            case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
            case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
            case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
            case "323" : row.yearsInBusinessLabel = "more than 16 years"; break;
        }
        return row;
    })
    .get(function(error, data) {
        fetchedData = data;
        updateChart();
    });

Answer №2

After conducting further research and experimentation, I believe I have discovered a solution that is effective in the most recent version of D3 (v5):

function displayData() {

'use strict';

// Fetch the data
var fetchedData;

d3.csv('./data/businessFiltered.csv', function(row) {
        switch (row.yearsInBusiness) {
            case "001" : row.yearsInBusinessLabel = "All"; break;
            case "311" : row.yearsInBusinessLabel = "less than 2 years"; break;
            case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
            case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
            case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
            case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
            case "323" : row.yearsInBusinessLabel = "more than 16 years"; break;
        };
        return row;
    })
    .then(function(data) {
        fetchedData = data;
        updateCircles();
    });

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

Saving a PHP form with multiple entries automatically and storing it in a mysqli database using Ajax

My form includes multiple tabs, each containing various items such as textboxes, radio buttons, and drop-down boxes. I need to save the content either after 15 seconds of idle time or when the user clicks on the submit button. All tab content will be saved ...

javascriptjqueryhtmlajax

Is Nuxt's FingerprintJS Module the Ultimate Server and Client Solution?

I am currently using fingerprintJS in my NuxtJS+Firebase project VuexStore. When I call the function on the client side, I can retrieve the Visitor ID. However, I am encountering issues when trying to use it on the server side, such as in nuxtServerInit. ...

javascriptnode.jsfirebasevue.jsnuxt.js

Invoke jQuery within a nested context once more in the jQuery method sequence

Is it possible to do something like this? jQuery(selector).jQuery(subselector).command(....) Here is the current code snippet: $(' .species') .filter(function () { return !$(this).data('hidden_code_ready'); } .wrapInner('<spa ...

javascriptjqueryjquery-selectors

Is there a way in Reactjs Material UI 5 (MUI5) to unselect only the star that was clicked, without affecting the rest of the stars in the

For instance: I selected the 3rd star on the rating component, but when I click on it again, all the previous stars disappear and it shows 0 stars. How can I make it so that if I click on the 3rd star a second time, only the 3rd star is removed, leaving ...

javascriptreactjsmaterial-ui

In JavaScript, loop through an array of arrays and combine them using the concat

If I have an array like [["a", "b"], ["c", "d"]], is there a way to iterate, reduce, map, or join this array in order to get the desired output of ["ac", "ad", "bc", "bd"]? What if the array is structured as [["a", "b"], ["c", "d"], ["e", "f"]]; how can we ...

javascriptarraystypescript

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...

javascripthtmlarrays

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton

Struggling with implementing React routing in version 4.0

Struggling to route multiple pages using BrowserRouter in Reactv4. Many online guides are outdated and not working with the latest version. Here is my setup: Index.js: import React from 'react'; import ReactDOM from 'react-dom'; impo ...

javascriptreactjsreact-router

Is there a way to trigger this pop-up after reaching a certain percentage of the page while scrolling?

I've been working on a WordPress site that features an "article box" which suggests another article to users after they scroll to a certain point on the page. However, the issue is that this point is not relative but absolute. This means that the box ...

javascriptphpjquerywordpressscroll

Retrieving data sent through an AJAX post request

My current project involves making a POST call from a basic HTML page to a Node.js and Express server that will then save the input values to a MongoDB collection. The issue I am facing is that when passing two POST parameters, namely 'name' and ...

javascriptajaxnode.jsexpress

What are some strategies for increasing efficiency in my drag and drop process?

Update #2 Wow, transition was stuck at .35s. My CSS just wasn't updating properly :( UPDATE: Anyone know if requestAnimationFrame could help with this? I've got a rotating image reel and I want users to be able to swipe left or right to switch ...

javascripthtmlcss

How can these lines be drawn in a simple manner?

I have been using the div tag to create a line, but I'm looking for an easier solution. If you have another method in mind, please share it with me. #line{ background-color:black; height:1px; width:50px; margin-top:50px; margin-left:50px; f ...

javascripthtmlcss

The `process` variable is not recognized in a Vue/TypeScript component

I've encountered an issue trying to use .env variables in my Vue app. When I ran npm install process, the only syntax that didn't result in an error when importing was: import * as process from 'process'; Prior to this, I received the ...

javascripttypescriptvue.jsenvironment-variables

Building an LED display with three.js

I have a project where I am creating a board with multiple RGB LEDs mounted on it, as shown in the image. https://i.sstatic.net/WtOm4.png To create the LEDs, I used the following code: this.light = new THREE.PointLight(color, intensity, distance, decay) ...

javascriptthree.jswebglled

Change a text file into JSON by using key-value pairs or headers along with CSV in Python, JavaScript, or PHP

I have a text file with the following format. I would like to convert it to CSV with headers like in https://i.sstatic.net/WjwC7.png or as JSON key-value pairs. Any guidance would be greatly appreciated. ...

javascriptpythonphpnode.js

Tips for Adding Items to an Infinite Loop

Could you please review This Demo and advise me on how to continuously load items into the ul list in an endless manner? Currently, I have this code set up to display the list but I want it to keep adding new items to the end every time. var item = $(". ...

javascriptjquery

NodeJS File Upload: A Step-by-Step Guide

I need assistance with uploading an image using nodejs. I am able to successfully send the file to node, but I am unsure how to handle the "req" object. Client <html> <body> <input id="uploadInput" type="file"/> < ...

javascripthtmlajaxnode.js

capturing the value of a button during the onChange event

I'm currently trying to retrieve the button value within an onChange event. My goal is to then bind this value to state, but unfortunately, I am receiving an empty value. <button onChange={this.handleCategoryName} onClick={this.goToNextPage}> ...

javascriptreactjsstatebind

Is it considered poor design to pass a function two levels deep? Are there other possible alternatives to achieve the same outcome?

I am currently working on a scenario involving componentA, which also contains another componentB with buttons that need to update the scene. My initial thought was to pass a function from the scene to componentB through componentA, but since I am new to ...

javascriptreactjs

I am struggling to successfully upload a video in Laravel

In this section, the Ajax functionality is used to add a video URL to the database. The values for the Video title and description are successfully being saved in the database, but there seems to be an issue with retrieving the URL. <div class="m ...

javascripthtmljqueryajaxlaravel