Incorporating JSON data into an array using d3

Question

Incorporating JSON data into an array using d3

I'm currently working on mapping JSON data to an array variable in d3.

Below is the JSON I am using:

[
{
    "Impressions": "273909",
    "Clicks": "648",
    "CPM": 4.6388278388278,
    "Cost": 1266.4,
    "CPC": 1.9543209876543,
    "Campaign": "Campaign 1"
},
{
    "Impressions": "974408",
    "Clicks": "14571",
    "CPM": 4.0175975359343,
    "Cost": 3913.14,
    "CPC": 0.26855672225654,
    "Campaign": "Campaign 2"
},
{
    "Impressions": "76751",
    "Clicks": "5022",
    "CPM": 8.4675,
    "Cost": 643.53,
    "CPC": 0.1281421744325,
    "Campaign": "Campaign 3"
},

Here is a snippet of my code used to load the JSON dataset:

d3.json("DS003a_Adwords_AdPerformance_modified.json", function(error, data) {

var topData = data.sort(function(a, b){
    return d3.descending(+a.cost, +b.cost);
}).slice(0,10);

topData.forEach(function (d) {
   d.CampaignName = d.Campaign;
   d.cost = d.Cost;
});

var cost = d3.nest()
            .key(function(d) {return d.Cost;})
            .entries(data);  //fail

var p = d3.select("body").selectAll("p")
  .data(topData)
  .enter()
  .append("p")
  .text(function(d,i){
    return (i+1) + ". " + d.CampaignName + " cost = " + cost[i];
  });

The goal is to store the values of "Cost" in an array variable named var cost. However, upon running the code, the result does not match expectations:

https://i.stack.imgur.com/0OMEO.png

Any suggestions on what steps I should take next?

Your assistance is highly appreciated!

javascript arrays json d3.js data-visualization

Answer 1

Answer №1

When working with the nest function, it's important to note that you cannot directly create an array of values. The typical output formats are either a large object:

a large object

{ 
 key1: value1, 
 key2: value2,
 ...
}

or an array of small objects

[ 
 { key: key1, values: value1 },
 { key: key2, values: value2 }, 
 ...
]

If neither of these formats meets your needs, consider utilizing d3.map. This function allows you to map data based on a specific attribute like cost:

var cost = d3.map(data, function(d) {
   return d.cost;
});

It's important to keep in mind that using d3.map creates a separate copy of your data, which may need to be updated if the original array changes. To avoid potential errors and unnecessary complexity, it's often best practice to work directly with the original data whenever possible.

Answer 2

When working with the nest function, it's important to note that you cannot directly create an array of values. The typical output formats are either a large object:

a large object

{ 
 key1: value1, 
 key2: value2,
 ...
}

or an array of small objects

[ 
 { key: key1, values: value1 },
 { key: key2, values: value2 }, 
 ...
]

If neither of these formats meets your needs, consider utilizing d3.map. This function allows you to map data based on a specific attribute like cost:

var cost = d3.map(data, function(d) {
   return d.cost;
});

It's important to keep in mind that using d3.map creates a separate copy of your data, which may need to be updated if the original array changes. To avoid potential errors and unnecessary complexity, it's often best practice to work directly with the original data whenever possible.

Incorporating JSON data into an array using d3

Answer №1

Similar questions

Error Encountered - Node.js application experiencing issues in passport login functionality

An unexpected runtime error occurred due to a SyntaxError: the JSON input abruptly ended during the authentication process with the next-auth module

Creating an array object in JavaScript is a straightforward process that involves using the array

Discovering the quantity of identical elements within a JavaScript array

Tips for resolving an issue with mongoose Model.create becoming unresponsive indefinitely

How can I create a static navigation bar and sidebar using Bootstrap 4?

Choose items from a nested array

Error: JSON parsing failed due to an unexpected token 'S' at position 17

Make sure to trigger a callback function once the radio button or checkbox is selected using jQuery, JavaScript, or Angular

Include a search button within the search box of the Custom Search Engine

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Accessing a precise div element in a webpage

How to stop the HTTP Basic Auth popup with AngularJS Interceptors

Guide user to different screen in React Navigation depending on context state

Promise-based React Redux Login: An error occurred during login process

I've encountered some issues with importing pagination from modules after installing SwiperJs

Retrieve specific nested array values in Handlebars based on an index's value

Emerald: Fresh alert for numerous attributes

A comparison between Buffer.byteLength and file size

What causes the ng-bind directive to fail when used with arrays?