The horizontal bar graph is not aligned properly

Question

The horizontal bar graph is not aligned properly

My project involves creating a dynamic horizontal bar chart to display data from a CSV file. However, I've encountered an issue where an extra space appears without any corresponding data. I specifically want to only show the top 10 values (students) along with their respective keys (counties), but it seems like an additional entry is being included.

Upon closer inspection, it's evident that there is an unwanted space and a small rectangle at the top of the chart. My goal is to eliminate both of these elements for a cleaner presentation.

    // Parsing the Data
    d3.csv("FA18_geographic.csv", function(data) {  

        data.sort(function(a,b) {
          return d3.descending(+a.students, +b.students);
        });


        // Finding the Maximum Student Count by County
        var max = d3.max(data, function(d) { return +d.students;} );

        var map = d3.map(data, function(d){return d.students; });
        pmax = map.get(max);



        // Adding the X axis
        var x = d3.scaleLinear()
        .domain([0, +pmax.students+500])
        .range([ 0, width]);
        svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
          .attr("transform", "translate(-10,0)rotate(-45)")
          .style("text-anchor", "end");


        // Setting up the Y axis
        var count = 0
        var y = d3.scaleBand()
        .range([ 0, height ])
        .domain(
            data.map(function(d) { // Displaying only the top 10 counties
                count = count+1
                if (count<=10){
                return d.county;
             }})
            )
        .padding(.3);
        svg.append("g")
        .call(d3.axisLeft(y));



        // Generating the Bars                      // There might be an issue here???
        svg.selectAll("rect.bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", x(0) )
        .attr("y", function(d) { return y(d.county); })
        .attr("width", function(d) { return x(d.students); })
        .attr("height", y.bandwidth() )
        .attr("fill", "#79200D");

    });

</script>

javascript d3.js

Answer 1

Answer №1

The root of the issue lies within this code snippet:

.domain(data.map(function(d) { //only show top 10 counties
    count = count + 1
    if (count <= 10) {
        return d.county;
    }
}))

The problem is not related to D3, but rather a JavaScript limitation: you cannot skip iterations using Array.prototype.map.

To illustrate this, let's look at a simple example where we attempt to return items only if count is less than 5:

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = -1;

const domain = data.map(function(d) {
  count += 1;
  if (count < 5) {
    return d
  };
});

console.log(domain)

As evident, multiple values are returned as undefined. The single empty tick in the visualization occurs because D3 band scale treats all those values as a singular undefined (band scales require unique domain values).

There are various solutions available. One option is to utilize Array.prototype.reduce:

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = -1;

const domain = data.reduce(function(acc, curr) {
  count += 1;
  if (count < 5) {
    acc.push(curr)
  };
  return acc;
}, []);

console.log(domain)

Alternatively, you can incorporate a filter after the initial map, or use a forEach loop to populate the array.

Lastly, some additional pointers:

A separate count variable is unnecessary since Array.prototype.map provides an index parameter (the second argument), similar to Array.prototype.reduce (the third argument).
Instead of count = count + 1, utilize count += 1 for more concise code;
In JavaScript arrays, indexing starts at zero. To counteract this, initialize count as -1 instead of 0.

Answer 2

The root of the issue lies within this code snippet:

.domain(data.map(function(d) { //only show top 10 counties
    count = count + 1
    if (count <= 10) {
        return d.county;
    }
}))

The problem is not related to D3, but rather a JavaScript limitation: you cannot skip iterations using Array.prototype.map.

To illustrate this, let's look at a simple example where we attempt to return items only if count is less than 5:

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = -1;

const domain = data.map(function(d) {
  count += 1;
  if (count < 5) {
    return d
  };
});

console.log(domain)

As evident, multiple values are returned as undefined. The single empty tick in the visualization occurs because D3 band scale treats all those values as a singular undefined (band scales require unique domain values).

There are various solutions available. One option is to utilize Array.prototype.reduce:

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = -1;

const domain = data.reduce(function(acc, curr) {
  count += 1;
  if (count < 5) {
    acc.push(curr)
  };
  return acc;
}, []);

console.log(domain)

Alternatively, you can incorporate a filter after the initial map, or use a forEach loop to populate the array.

Lastly, some additional pointers:

A separate count variable is unnecessary since Array.prototype.map provides an index parameter (the second argument), similar to Array.prototype.reduce (the third argument).
Instead of count = count + 1, utilize count += 1 for more concise code;
In JavaScript arrays, indexing starts at zero. To counteract this, initialize count as -1 instead of 0.

The horizontal bar graph is not aligned properly

Answer №1

Similar questions

What steps can be taken to resolve an error message?

Modify the hash URL in the browser address bar while implementing smooth scrolling and include the active class

The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

Is there a single code that can transform all standard forms into AJAX forms effortlessly?

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

updating the name of an HTML element with jQuery

Executing functions on Angular scope within Underscore Template

Top spot for locating resolve functions in AngularJS

Refreshing State in ReactJS

Utilize NodeJS to dynamically alter the text outputted on an HTML page

The JQuery parseFloat() function seems to be consistently returning "NAN" whenever it is used with the .text property

Updates to Vue.js data are not being properly reflected in the template

Ways to implement modifications in child component through parent?

Sorting JSON data in EJS based on categories

Tips for accessing JSON data stored as keys within a JavaScript object

How can I change the color of a cube in Three.js?

Steps to open a URL link within a div without navigating away from the current page

Testing D3js functionality within a React component with the help of Jest and Enzyme

Unable to scroll to the top of the page

What is the best way to pass JavaScript object literals from a Node.js server to the frontend browser?