Unable to import a text file using a semicolon as delimiter in d3

I'm just starting to learn JavaScript and the D3 library. I recently explored the "d3-fetch" module (available at https://github.com/d3/d3-fetch) and the d3.dsv command API (find it here: https://github.com/d3/d3-dsv). However, I am struggling to understand how to use a custom delimiter, like a semicolon, in the dsv parser. Specifically, I need to parse an entire file rather than just a string input.

Below is the code I thought would work, but unfortunately doesn't. I would appreciate any guidance on why this isn't functioning as expected:

<body>
    <script type="text/javascript">
        var scsv = d3.dsvFormat(";");

        d3.text("$lab/raw.csv").then(function(raw) {
            scsv.parse(raw).then(function(d) {
                    console.log(d);
            });
        });
    </script>
</body>

Answer №1

According to the official documentation:

// You need to specify the actual URL in place of `doc`
var doc = 'data:text/plain;base64,' + btoa('cat;dog\n1;0');

d3.dsv(";", doc).then(function(data) {
  console.log(data);
});
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>

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

Is it possible to establish a delay for requestAnimationFrame()?

My webpage has a very long layout with text in one column and a floating element in another. I want the floating element to follow the scroll of the window and return to its original offset once scrolling stops. The current code I have is: var ticking = ...

Create a boolean flag in Java using JavaScript

Hey there, I'm working on a project where I need to detect the user's browser in JavaScript. For Safari browsers, I have to download an audio file, while for every other browser I need to play the audio. Currently, my code can correctly identify ...

Using Vue.js to connect v-html to a custom CSS stylesheet

I am currently working with HTML generated by a function on an external server and I am able to preview this within a tag. Additionally, I can retrieve the CSS information in a similar manner. <template> <div v-html="html"></div ...

I am looking to retrieve products based on category alone, category and model together, or simply obtain all products in one go. At the moment, I am utilizing three distinct endpoints

I have 3 endpoints on my backend that fetch products based on certain criteria. I'm considering whether to refactor the logic and combine them into a single endpoint/function. Currently, my routes are structured as follows: router.get('/products& ...

What is the best way to create three distinct fractions in JavaScript that cannot be simplified?

I have a specific requirement to create 3 fractions with the following conditions: The denominator remains constant The numerator must be unique and fall within the range of 1 to three times the denominator The fraction should not be reducible (e.g., 2/6 ...

Accessing a variable outside of the function call in AngularJS is not possible

After starting to tackle AngularJS, I've encountered an issue that's been plaguing me. It seems like I'm unable to access the data returned by $http.get() outside of the method call. Here's a look at the code snippet: (function(){ ...

w3schools example showcasing the power of AJAX

How can I run this example on my local machine? http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_httprequest_js (page no longer available) I want to access the XML file hosted on w3schools without moving it to my machine. Can I run the HTML and J ...

Can someone explain what exactly is [object Object]?

Why is the data value from the database showing as [object Object] instead of the actual data? var dataObj = $(this).closest('form').serialize(); $.ajax({ type: "POST", url: url, data: dataObj, cache: false, ...

Reading an XML file to locate items nested within the same bracket

Within my JavaScript function, I am utilizing the following code to extract data from an XML file: var title = $(this).children('Title').text(); This snippet of code successfully retrieves the content under the <Title> tags: <Title> ...

Develop a Modal Form using Bootstrap (HTML)

I followed a tutorial on creating a modal form with Bootstrap, you can find it here: http://www.youtube.com/watch?v=HCEbp07hfLw I replicated the steps shown in the video, but when I try to open the page in my browser, nothing appears. I have added the Bo ...

unable to log out firebase user

Currently, I am attempting to sign out the user who is already signed in within my Angular app. Here is my client service code: export class AuthClientService { public register(email: string, password: string): Observable<Object> { retu ...

angucomplete-alto automatically fills in data based on another input

Having two autocomplete select boxes with a unique feature has been quite interesting. The first input accepts a code that is related to a label, autofilling the second input with the corresponding object once the code is selected in the first input. Howev ...

Trouble with formatting a HTML form

I have been working on dynamically creating HTML forms using a function called makeInput(). However, I am facing an issue where the text input boxes are appearing next to each other when I click the "Add Course" button, instead of one per line. Below is ...

Disregard the significance of radio buttons - iCheck

I have been attempting to retrieve values from radio buttons (using iCheck), but I am consistently only getting the value from the first radio button, while ignoring the rest. Despite following what seems to be correct code theory, the output is not as exp ...

Determining the installation duration of the React Native screen

Several questions have been asked about this topic, but none of them seem to have a definitive answer. What I am looking to do is calculate the time it takes to navigate to a screen. The timer will start here: navigation.navigate("SomePage") Essentially, ...

What are some effective design principles for creating REST APIs in expressjs?

To streamline my code organization, I made the decision to create a methods folder. Within this folder, I store individual JavaScript files for each URL endpoint (such as website.com/billings). //expressJS configuration... const billings = require('. ...

What's preventing the mobx @computed value from being used?

Issue: The computed value is not updating accordingly when the observable it is referencing goes through a change. import {observable,computed,action} from 'mobx'; export default class anObject { // THESE WRITTEN CHARACTERISTICS ARE COMPUL ...

Having difficulty creating the probot.github app due to an error: The removal of the programmatic API in npm version 8.0.0 causing failure

Currently, I am facing an issue while attempting to set up the probot.github app using the command npx create-probot-app my-first-app which can be found at: . My system is running on the latest node version v19.3.0 with npm version 9.2.0. However, upon exe ...

The lookAt method in THREE.js is not functioning properly when called after the rendering process

The code snippet below seems to be causing some issues. It requires jquery and three.js to function properly. The problematic lines are as follows: // change the view so looking at the top of the airplane views[1].camera.position.set( 0,5,0 ); views[1].ca ...

When React-select is toggled, it displays the keyboard

While using react-select ^1.2.1, I have come across a strange issue. Whenever I toggle the drop-down in mobile view, the keyboard pops up unexpectedly as shown in this screenshot https://i.stack.imgur.com/mkZDZ.png The component code is as follows: rende ...