Exploring the world of two-dimensional arrays in D3 programming

Question

Exploring the world of two-dimensional arrays in D3 programming

I am interested in visualizing data obtained from the census data API, specifically from the ACS survey.

The data is not in a typical JSON format, but rather as a two-dimensional array. It appears like this:

[
[
    “POPULATION”,
    “DATE”,
    “ANOTHERTHING”
],
[
    “ALABAMA”,
    “2000”,
    “MORESTUFF”
],
[
    “ALASKA”,
    “2000”,
    “OTHERSTUFF”
],
…
]

I have limited experience working with JSON data like this, which resembles more of a CSV structure with keys on the first line and values following in subsequent lines.

Does anyone know how to parse and manipulate this kind of data in D3, without needing to convert it beforehand (such as using a tool like https://gist.github.com/sarfarazansari/7e8ae05168b80b36016eb1c561a82f73)? I prefer to directly utilize the data from the API.

Any assistance or advice on this matter would be highly appreciated.

javascript arrays json d3.js

Answer 1

Answer №1

Before anything else: avoid using smart quotes (“) in JSON (or any code for that matter). It seems like the issue with your JSON is due to using a text editor like MS Word. Also, there's no such thing as "non-standard JSON" since there isn't a standardized format to begin with. Your JSON is simply an array of arrays, nothing out of the ordinary.

That said, you can work with this data structure to create your charts. But if you're new to this, it might be best to follow the common way of organizing data in D3 codes – using an array of objects.

You can easily convert your array of arrays into an array of objects for easier handling:

Assuming your array is named data, let's first extract the headers:

var keys = data.shift();

This will not only create a headers array but also remove the first inner array from the data.

Next, iterate over each inner array to create objects with the necessary key/value pairs:

var newData = data.map(function(d) {
  var obj = {};
  d.forEach(function(e, i) {
    obj[keys[i]] = e;
  });
  return obj;
});

There are more concise ways to achieve this, but the above method is clearer and more educational.

Here's a sample demo using the shared data:

var data = [
  [
    "POPULATION",
    "DATE",
    "ANOTHERTHING"
  ],
  [
    "ALABAMA",
    "2000",
    "MORESTUFF"
  ],
  [
    "ALASKA",
    "2000",
    "OTHERSTUFF"
  ]
];

var keys = data.shift();

var newData = data.map(function(d) {
  var obj = {};
  d.forEach(function(e, i) {
    obj[keys[i]] = e;
  });
  return obj;
});

console.log(newData)

<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 2

Before anything else: avoid using smart quotes (“) in JSON (or any code for that matter). It seems like the issue with your JSON is due to using a text editor like MS Word. Also, there's no such thing as "non-standard JSON" since there isn't a standardized format to begin with. Your JSON is simply an array of arrays, nothing out of the ordinary.

That said, you can work with this data structure to create your charts. But if you're new to this, it might be best to follow the common way of organizing data in D3 codes – using an array of objects.

You can easily convert your array of arrays into an array of objects for easier handling:

Assuming your array is named data, let's first extract the headers:

var keys = data.shift();

This will not only create a headers array but also remove the first inner array from the data.

Next, iterate over each inner array to create objects with the necessary key/value pairs:

var newData = data.map(function(d) {
  var obj = {};
  d.forEach(function(e, i) {
    obj[keys[i]] = e;
  });
  return obj;
});

There are more concise ways to achieve this, but the above method is clearer and more educational.

Here's a sample demo using the shared data:

var data = [
  [
    "POPULATION",
    "DATE",
    "ANOTHERTHING"
  ],
  [
    "ALABAMA",
    "2000",
    "MORESTUFF"
  ],
  [
    "ALASKA",
    "2000",
    "OTHERSTUFF"
  ]
];

var keys = data.shift();

var newData = data.map(function(d) {
  var obj = {};
  d.forEach(function(e, i) {
    obj[keys[i]] = e;
  });
  return obj;
});

console.log(newData)

<script src="https://d3js.org/d3.v5.min.js"></script>

Exploring the world of two-dimensional arrays in D3 programming

Answer №1

Similar questions

Issue with Multiple File Upload Functionality in Dropzone.js + Laravel (Only allowing one file to be uploaded)

Is it possible to call a JavaScript file located inside a Maven dependency's jar?

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Create a roster of numbers that are multiples using a systematic approach

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

Is it possible to invoke an AngularJs service by clicking a button?

What is the correct way to parse a JSON array of arrays using the Jackson JSON parser?

Is there a way to invoke a JavaScript function specifically for a given link?

The CustomValidator ClientValidationFunction will only activate on the second or subsequent submission if CheckBoxList is checked

Troubleshooting: Issue with append function not functioning properly after click event in Angular

What is the best way to implement a date range filter in AngularJS for a specific year or month?

"Key challenges arise when attempting to execute the node app.js script through the terminal due to various middleware compatibility

Does ECMAScript differentiate between uppercase and lowercase letters?

Using Firefox to cache Ajax calls after navigating back in the browsing history

Link up each query with every php echo

Using Python Selenium to create a login page with Javascript

Spin the object around the z-axis, with the point serving as the center of rotation

What is the process for verifying JSON format validation?

What is the method for inserting data into an array of objects in JavaScript?

Efficient Array Comparing Speed