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

Updating the chosen option using jQuery

Tips on serving a static file from a location other than the public or view directories following middleware in Express JS

Tips for fixing the "Uncaught TypeError: Cannot access property 'get' of undefined" error in Vue.JS 2

The rule "react/jsx-sort-props" does not have a valid configuration

Is it possible to utilize the node package ssh2 within a web browser environment?

What is the best way to recover past messages from a channel?

Persistent vertical menu dropdown that remains expanded on sub menu pages

The array is present both before and after the res.json() call, however it appears empty in the response

Charts created using Google VisualizationORThe visual representations

What is the best way to display three unique maps simultaneously on separate views?

Generate a new tree structure using the identifiers of list items within an unorganized list

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

Display a substitute image if there is no internet connection available to load the Google Map Canvas

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

Using Jquery to target an element within the same DOM element and apply changes

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

In TypeScript, it can be challenging to determine the equality between a value and an enum

"Patience is key when waiting for an AJAX response within a jQuery loop

The appearance of an unforeseen * symbol caused a

After integrating Redux into React, the map(item) function is unable to send "item" as props to a JSX component