What are some ways to streamline this D3 script?

Question

What are some ways to streamline this D3 script?

My CSV data displays pass rates by organisation for different years:

org,org_cat,2004_passed,2004_total,2005_passed,2005_total,2006_passed,2006_total
GSK,industry,35,100,45,100,55,100

I am using D3 and aiming to create a dictionary of organisations structured as follows:

data = {
 'GSK': {
     'org_cat': 'industry',
     'data': [
        { 'year': 2004, 'passed': 35, 'total': 100 },
        { 'year': 2005, 'passed': 45, 'total': 100 },
        { 'year': 2006, 'passed': 55, 'total': 100 }
     ]
  ]
}

The process seems clear except for the messy code handling the year columns:

var data = {};
allData.forEach(function(d) {
  data[d.org] = {
    'category': d.org_cat,
    'data': []
  };
  for (var k in d) {
    var temp = {};
    for (var k in d) {
      if (patt.test(k)) {
        var res = k.split("_");
        if (res[0] in temp) {
          temp[res[0]][res[1]] = +d[k];
        } else {
          temp[res[0]] = {};
          temp[res[0]][res[1]] = +d[k];
        }
      }
    }
    var tempArr = [];
    for (var y in temp) {
      var tempDict = {};
      tempDict.year = y;
      tempDict.passed = temp[y].passed;
      tempDict.total = temp[y].total;
      tempArr.push(tempDict);
    }
    // TODO: sort by year in case the keys got shuffled
    data[d.org].data = tempArr;
  }
});

Is there a simpler way to clean up this complex code?

We can assume each row represents a unique organisation.

javascript d3.js

Answer 1

Answer №1

There's no need for D3 in this scenario, as your code doesn't utilize it either. Below is an approach I would take, which might not be the most straightforward method, but it could still benefit you:

Check out the Jsfiddle example here: https://jsfiddle.net/thatOneGuy/dnvheznk/1/

In my implementation, I converted the data to JSON for JSFiddle usage. However, since you are already familiar with looping through CSV, simply update line 14 as follows:

for (var i = 0; i < data.length; i++) { //loop through data array (this allows scalability for larger arrays)

You can modify it like this:

allData.forEach(function(d, i) { //make sure to add 'i' for indexing

The fully commented code with converted JSON data is provided below:

var data = [{ //data set converted to JSON for easier use
  "org": "GSK",
  "org_cat": "industry",
  "2004_passed": 35,
  "2004_total": 100,
  "2005_passed": 45,
  "2005_total": 100,
  "2006_passed": 55,
  "2006_total": 100
}];

var newData = {}; //new data container

for (var i = 0; i < data.length; i++) { //loop through data array (this is so you can use this on a bigger sized array)
  var thisObj = {}; //create empty object
  thisObj.org_cat = data[i].org_cat; //set org_cat
  thisObj.data = []; //initialize data array to populate later

  for (var key in data[i]) { //iterate through data[i]
    if (key != 'org' && key != 'org_cat') { //ensure the key is neither 'org' nor 'org_cat'
      var thisData = {}; //initialize data object
      var thisYear = key.toString().substring(0, 4); //extract year using substring

      thisData.year = thisYear; //assign year
      thisData.passed = data[i][thisYear + '_passed']; //assign passed value for this year
      thisData.total = data[i][thisYear + '_total']; //assign total value for this year

      thisObj.data.push(thisData); //add current data object to the data array
    }
  }

  var uniqueDates = []; //store unique items from the data array
  for (var j = 0; j < thisObj.data.length; j++) { //iterate over the data array created earlier
    if (uniqueDates.indexOf(thisObj.data[j].year) < 0) { //if the current year is not included in the unique array
      uniqueDates.push(thisObj.data[j].year); //add it
    } else {
      thisObj.data.splice(j--, 1); //remove duplicate data
    }
  }

  newData[data[i].org] = thisObj; //associate the data of the current organization with the object created above
}

console.log('newData', newData) //output new data

Answer 2

There's no need for D3 in this scenario, as your code doesn't utilize it either. Below is an approach I would take, which might not be the most straightforward method, but it could still benefit you:

Check out the Jsfiddle example here: https://jsfiddle.net/thatOneGuy/dnvheznk/1/

In my implementation, I converted the data to JSON for JSFiddle usage. However, since you are already familiar with looping through CSV, simply update line 14 as follows:

for (var i = 0; i < data.length; i++) { //loop through data array (this allows scalability for larger arrays)

You can modify it like this:

allData.forEach(function(d, i) { //make sure to add 'i' for indexing

The fully commented code with converted JSON data is provided below:

var data = [{ //data set converted to JSON for easier use
  "org": "GSK",
  "org_cat": "industry",
  "2004_passed": 35,
  "2004_total": 100,
  "2005_passed": 45,
  "2005_total": 100,
  "2006_passed": 55,
  "2006_total": 100
}];

var newData = {}; //new data container

for (var i = 0; i < data.length; i++) { //loop through data array (this is so you can use this on a bigger sized array)
  var thisObj = {}; //create empty object
  thisObj.org_cat = data[i].org_cat; //set org_cat
  thisObj.data = []; //initialize data array to populate later

  for (var key in data[i]) { //iterate through data[i]
    if (key != 'org' && key != 'org_cat') { //ensure the key is neither 'org' nor 'org_cat'
      var thisData = {}; //initialize data object
      var thisYear = key.toString().substring(0, 4); //extract year using substring

      thisData.year = thisYear; //assign year
      thisData.passed = data[i][thisYear + '_passed']; //assign passed value for this year
      thisData.total = data[i][thisYear + '_total']; //assign total value for this year

      thisObj.data.push(thisData); //add current data object to the data array
    }
  }

  var uniqueDates = []; //store unique items from the data array
  for (var j = 0; j < thisObj.data.length; j++) { //iterate over the data array created earlier
    if (uniqueDates.indexOf(thisObj.data[j].year) < 0) { //if the current year is not included in the unique array
      uniqueDates.push(thisObj.data[j].year); //add it
    } else {
      thisObj.data.splice(j--, 1); //remove duplicate data
    }
  }

  newData[data[i].org] = thisObj; //associate the data of the current organization with the object created above
}

console.log('newData', newData) //output new data

What are some ways to streamline this D3 script?

Answer №1

Similar questions

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Associating user input information with an AngularJS object

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

Is it permissible to access an iframe directly by its name?

What is the best way to implement a multi-row form in Vue.js?

Components from Bower are currently not available

Tips for dynamically adding and removing keys from a JSON object

Sending an object from Rails to Javascript

A particular character is displayed exclusively in a text box using either jQuery or JavaScript

Node.js can provide a reusable email framework that can be used across

What is the correct method to choose an element in jQuery based on the function's id parameter

Explore one of the elements within a tuple

Navigating through multiple pages with React Native stack navigation

Basic game of tic tac toe using JavaScript and jQuery

I am in the process of creating several checkboxes and am looking to incorporate some added functionality

How can you integrate Dygraph into your React project alongside redux?

Perform an operation in JQuery after a different operation has been completed

Troubleshooting Key Press Issues with Bootstrap 5 Dropdown and Collapse Feature

Unable to show the input's value

The filter is displaying incorrect categories