Y Axis not setting up properly

JavaScript
1

Tell us what’s happening:

I have created a bar chart (with some example data, not real data) i.e. const dataset = [
[243.1 , 123.23],
[300.1 , 287.12],
[450.1 , 350.22],
[660.3 , 454.1],
[866.2 , 568.2]
]

Everything seems to be fine except for the face that the bar’s are inverted

image
image661×620 1.75 KB

And when i try to correct them only one bar gets corrected and all the others seems to be just show a bit of the part upside and everything else goes down like this:

image
image689×666 2.21 KB

I can’t seem to find the correct value of ‘y’ attribute of the rectangle(i.e. bar) .

Can anyone suggest something here?

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">United States GDP</title>
</head>
<body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>
        const dataset = [ 
             [243.1 , 123.23],
             [300.1 , 287.12],
             [450.1 , 350.22],
             [660.3 , 454.1],
             [866.2 , 568.2]
             ]

// Set the Height of the SVG
             const w = 500;
             const h = 1000;
             const padding = 30;

            //  Return the maximum value of the dataset variable
            // range is the range of the xAxis like 0 - 400 or 0 - 500, whatever the case maybe
            // xAxis is the horizontal line
             const xScale = d3.scaleLinear()
             .domain([0,d3.max(dataset, (d) => d[0])])
             .range([padding, w - padding])

            //  yAxis is the vertical line
            // Get the Maximum varibale from the first index of dataset
            const yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, (d) => d[1])])
            .range([h - padding, padding])

            const svg = d3.select("body")
                                    .append("svg")
                                    .attr("width", w)
                                    .attr("height", h)

           svg.selectAll("rect")
                 .data(dataset)
                 .enter()
                 .append("rect")
                 .attr("x", (d,i) => 30 * i)
                 .attr("y", 20 * 36)
                 .attr("width", 25)
                 .attr("height", (d, i) => {
                     return d[0]  ;
                 })
                 .attr("fill", "navy")
                 .attr("class", "bar")
                 .append("title")
                 .text((d) =>"$" +  d + " Millions")


            const xAxis = d3.axisBottom(xScale);
            const yAxis = d3.axisLeft(yScale);

            // SVG is the mother of all elements in D3
            // X Axis of the chart
            svg.append("g")
                 .attr("transform", "translate(0, " + (h - padding) + ")")
                 .call(xAxis)
            
            // Y Axis of the Chart
            svg.append("g")
                 .attr("transform", "translate(" + (padding) + ",0)")
                 .call(yAxis)

    </script>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

Probably you haven’t understood the tutorial. I have noticed the following:

  1. You have a scale for the y-axis but you don’t have a scale for the height of the bars.
  2. Take note with svg the x-axis and the y-axis are at the top and right margins respectively. That means the bars would be upside down. To make it the right way up, set the value of y attribute by subtracting the height of the bars from the height of the svg.

It would be better if you had a pen for that code on codepen.

3

Hey @nibble. Your suggestion is good but you can notice the height of my svg is 2000 and the individual values are:

const dataset = [
[243.1 , 123.23],

         [300.1 , 287.12],

         [450.1 , 350.22],

         [660.3 , 454.1],

         [866.2 , 568.2]

]

So, even if i put the logic

y = height of the bar - height of the svg;
y = 568.2 - 2000

It would result in a negative value and if there is a negative value then the bar goes up to a position where it does not shows.

Seconly if i interchange the values like:

y = height of the svg - height of the bar
y = 2000 - 568.2

and calculate every value according to this then the bar show something like this:

image
image1358×680 2.53 KB

The height of all bar is equal somehow. This is the logic thath i have applied:

.attr("height", (d, i) => {
                     return h - d[1]
                 })

to the rectangle i.e. bar.

Still stuck at the problem. Any other suggestions.

4

You haven misunderstood my first observation. I never said height of the bar - height of the svg but instead height of the svg - height of the bar . Look at observation 2 in my first post. I would expect something like:

.attr("height", (d, i) => {
                     return  h - heightScale(d[1]); 
                 })

NOTE:

  1. The concept i am suggesting has not been covered in the FCC tutorials on d3.js but you can’t do without it in most cases when plotting bar charts.
    Check out This beginner tutorial it explains what you are grappling with.
  2. I suggest you have your project on an online editor like codepen.io for you to be helped easily.
  3. I have illustrated what i am talking about here on codepen. Compare with your code and see the difference.
5