Adding double quotes to arrays in D3.js after using the .map method

Question

Adding double quotes to arrays in D3.js after using the .map method

Here is the code snippet I am working with:

d3.csv("static/data/river.csv", function(data) {
        var latlongs = data.map(function(d) { return [d.Lat,d.Lng]; })
        var lineArray1 = latlongs;
        console.log(lineArray1);

When I view the output lineArray1, it appears as [Array(2), Array(2), Array(2)...]. However, upon closer inspection, the individual Array(2) elements look like:

["-35.48642101", "144.8891555"]  
["-35.48695061", "144.8893026"]  
["-35.48704283", "144.889315"]

I am looking for a way to remove the double quotes at the start. I attempted lineArray1.map(Number) but this resulted in an array of NaNs. The desired output format is:

[-35.48642101, 144.8891555]  
[-35.48695061, 144.8893026]  
[-35.48704283, 144.889315]

Any suggestions would be greatly appreciated!

javascript arrays d3.js

Answer 1

Answer №1

It appears that the variables d.Lat and d.Lng are of string type. To convert them into numbers, you can use the Number function like this:

var latlongs = data.map(function(d) { return [Number(d.Lat), Number(d.Lng)]; });

Alternatively, to avoid repeating the Number function, you can nest another .map inside like so:

var latlongs = data.map(function(d) { return [d.Lat, d.Lng].map(Number); });

For a more modern JavaScript approach, you can use destructuring like this:

const latlongs = data.map(({ Lat, Lng }) => [Lat, Lng].map(Number));

It's important to note that your attempt with lineArray1.map(Number) did not work because lineArray1 contains arrays of numbers, and applying Number directly to an array will not yield the desired outcome.

Answer 2

It appears that the variables d.Lat and d.Lng are of string type. To convert them into numbers, you can use the Number function like this:

var latlongs = data.map(function(d) { return [Number(d.Lat), Number(d.Lng)]; });

Alternatively, to avoid repeating the Number function, you can nest another .map inside like so:

var latlongs = data.map(function(d) { return [d.Lat, d.Lng].map(Number); });

For a more modern JavaScript approach, you can use destructuring like this:

const latlongs = data.map(({ Lat, Lng }) => [Lat, Lng].map(Number));

It's important to note that your attempt with lineArray1.map(Number) did not work because lineArray1 contains arrays of numbers, and applying Number directly to an array will not yield the desired outcome.

Adding double quotes to arrays in D3.js after using the .map method

Answer №1

Similar questions

What is the best way to find the longest element with the same class name using jQuery?

There seems to be a JSON syntax error on the website for tracking Covid-

Creating responsive arrow heads using D3: A step-by-step guide

Stop the WebGL Three.js container from capturing scroll events

An error with jQuery occurred in the client's post response, resulting in a 400 POST HTTP/1.1 error

Guide to emphasizing text with hover effects and excluding whitespace (javascript)

The content is not visible following the quotation mark

Countdown with precision! This timer will begin at the one-hour mark

Steps for referencing a custom JavaScript file instead of the default one:

Split total based on checkboxes toggled with JavaScript

Using vue-resource to intercept an ajax error and catching the "Uncaught (in promise)" exception

Could you clarify that for me?

An error has occurred in the Shadow Dom due to the inability to access the property 'style' of an

Transferring data between two HTML files through the POST method

Include a function call within a ternary operator in JSX code

Accessing dynamic elements in Internet Explorer 7 and 8 using jQuery

Creating HTML or PHP pages using jQuery

When the enter key is pressed on a child modal dialog, it triggers the enter action on the parent modal dialog in IE11 and

Learn the process of dynamically updating the source of an HTML5 video

Converting a function to an ES6 class-based style