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

The Autocomplete feature in Material-UI is not rendering any output

What is the best way to structure a JSON response in python code?

Adjust the placement of the fixed header waypoint or change its offset

Unsynchronized AJAX POST requests fail to function effectively

Link up each query with every php echo

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

A guide on accessing the first element in an array when performing multiplication within the Interval component in React.js

Tracking the number of form submissions on a PHP website

Is there a way to retrieve just the array element as the output instead of the entire object in MongoDB?

Babylon entities failing to run

Choose a dynamically generated html element without having to click on it

Tips on efficiently compressing JSON data in order to receive it using the bodyParser.json method

Retrieve the data from every dropdown menu

Is it possible to verify if each input is unique using the parsley validator?

What is the best method for extracting information from this data? (extracting data from

The AJAX post request is returning an undefined value

Next.js configuration: Redirecting / to the basePath

Display the full price when no discount is available, but only reveal the discounted price when Vue.js is present

Issue: Infinite loops detected in AJAX functions

Utilizing fluent-ffmpeg in nodejs and express to effortlessly download a video