Different approach to prevent too much nesting of functions

Question

I wonder if there is a better way to solve the following issue and prevent the code from getting unreadable beacause of too many nested functions:

I am using d3.js and jquery slider to produce a map of europe which shows the unemploymentrate of each region. The slider is there to switch between the years from 2005 to 2015. On each slider change I want the europe.svg to be recolored.

So far I solved the issue as following:

var color = d3.scaleThreshold()
  .domain([0, 1, 3, 5, 7, 10, 13, 16, 20, 25])
  .range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026", "#808080"]);

d3.queue()
  .defer(d3.json, "data/json/euRegions.json")
  .defer(d3.csv, "data/csv/euUnemploymentRates.csv")
  .await(initializeEUmap);

function initializeEUmap(error, euRegionsJson, euUnemploymentcsv) {
  if (error) throw error;

  euRegionsJson.features.forEach(function(d) {
    for (var i = 0; i <= 334; i += 1) {
      if (d.properties.NUTS_ID == euUnemploymentcsv[i].Flag) {
          for (var j = 2005; j <= 2015; j += 1) {
              d.properties[j] = euUnemploymentcsv[i][j];
          }
      }
    }
  });

  $('#slider').slider().bind('slidechange', function(event, ui) {
    var sliderValue = $('#slider').slider("option", "value");
    svgEurope.selectAll(".euMap").remove();
    svgEurope.selectAll("path")
      .data(euRegionsJson)
      .enter().append("path")
      .attr("cx", function(d, i) {return projection([d.longitude, d.latitude])[0];})
      .attr("cy", function(d, i) {return projection([d.longitude, d.latitude])[1];})
      .data(euRegionsJson.features)
      .enter().append("path")
      .attr("d", geoPath)
      .attr("class", "euMap")
      .attr("fill", function(d) {return color(d.properties[sliderValue]);})
      .style("stroke", "black")
      .style("stroke-width", "0.4px");
});

Is it actually the best practice to wrap everything inside the slidechange function? What would your approach be?

Answer 1

I would refactor the slidechange callback into a function declaration, and unnest it. You also used some variables that aren't provided in your code, but just pass any variables you need into onSlideChange.

    var color = d3.scaleThreshold()
  .domain([0, 1, 3, 5, 7, 10, 13, 16, 20, 25])
  .range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026", "#808080"]);

d3.queue()
  .defer(d3.json, "data/json/euRegions.json")
  .defer(d3.csv, "data/csv/euUnemploymentRates.csv")
  .await(initializeEUmap);

function initializeEUmap(error, euRegionsJson, euUnemploymentcsv) {
  if (error) throw error;

  euRegionsJson.features.forEach(function(d) {
    for (var i = 0; i <= 334; i += 1) {
      if (d.properties.NUTS_ID == euUnemploymentcsv[i].Flag) {
          for (var j = 2005; j <= 2015; j += 1) {
              d.properties[j] = euUnemploymentcsv[i][j];
          }
      }
    }
  });

  $('#slider').slider().bind('slidechange', e => onSlideChange(e,euRegionsJson));

}

function onSlideChange(event, euRegionsJson) {
    var sliderValue = $('#slider').slider("option", "value");
    svgEurope.selectAll(".euMap").remove();
    svgEurope.selectAll("path")
      .data(euRegionsJson)
      .enter().append("path")
      .attr("cx", function(d, i) {return projection([d.longitude, d.latitude])[0];})
      .attr("cy", function(d, i) {return projection([d.longitude, d.latitude])[1];})
      .data(euRegionsJson.features)
      .enter().append("path")
      .attr("d", geoPath)
      .attr("class", "euMap")
      .attr("fill", function(d) {return color(d.properties[sliderValue]);})
      .style("stroke", "black")
      .style("stroke-width", "0.4px");
}