Getting the order of values so none are hidden if (parseInt(obj[0].actual) &gt; parseInt(obj[0].projected) &amp;&amp; parseInt(obj[0].projected) &gt; parseInt(obj[0].le)) {
    biggesteClass = 'bar';
    biggestVal = obj[0].actual;
    secondClass ='bar2';
    secondVal = obj[0].projected;
    thirdClass ='bar3';
    thirdVal = obj[0].le;
} else if (parseInt(obj[0].actual) &gt; parseInt(obj[0].le) &amp;&amp; parseInt(obj[0].le) &gt; parseInt(obj[0].projected)) {
    biggesteClass = 'bar';
    biggestVal = obj[0].actual;
    secondClass = 'bar3';
    secondVal = obj[0].le;
    thirdClass ='bar2';
    thirdVal = obj[0].projected;
} else if (parseInt(obj[0].projected) &gt; parseInt(obj[0].actual) &amp;&amp; parseInt(obj[0].actual) &gt; parseInt(obj[0].le)) {
    biggesteClass = 'bar2';
    biggestVal = obj[0].projected;
    secondClass ='bar';
    secondVal = obj[0].actual;
    thirdClass ='bar3';
    thirdVal = obj[0].le;
}  else if (parseInt(obj[0].projected) &gt; parseInt(obj[0].le) &amp;&amp; parseInt(obj[0].le) &gt; parseInt(obj[0].actual)) {
    biggesteClass = 'bar2';
    biggestVal = obj[0].projected;
    secondClass ='bar3';
    secondVal = obj[0].le;
    thirdClass ='bar';
    thirdVal = parseInt(obj[0].actual);
} else if (parseInt(obj[0].le) &gt; parseInt(obj[0].actual) &amp;&amp; parseInt(obj[0].actual) &gt; parseInt(obj[0].projected)) {
    biggesteClass = 'bar3';
    biggestVal = obj[0].le;
    secondClass ='bar';
    secondVal = obj[0].actual;
    thirdClass ='bar2';
    thirdVal = obj[0].projected;
} else {
    biggesteClass = 'bar3';
    biggestVal = obj[0].le;
    secondClass ='bar2';
    secondVal = obj[0].projected;
    thirdClass ='bar';
    thirdVal = obj[0].actual;
}


What I am trying to do here is, I am setting the biggest, second, and third value to create an overlapped bar-chart for d3.js.

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("." + biggesteClass)
    .data(obj)
    .enter().append("rect")
        .attr("class", biggesteClass)
        .attr("height", function(d, i) {return (biggestVal * 10)})
        .attr("width","150")
        .attr("x", function(d, i) {return (i * 80) + 25})
        .attr("y", function(d, i) {return 280 - (biggestVal * 10)});    
svg.selectAll("." + secondClass)
    .data(obj)
    .enter().append("rect")
        .attr("class", secondClass)
        .attr("height", function(d, i) {return (secondVal * 10)})
        .attr("width","150")
        .attr("x", function(d, i) {return (i * 80) + 25})
        .attr("y", function(d, i) {return 280 - (secondVal * 10)}); 
svg.selectAll("." + thirdClass)
    .data(obj)
    .enter().append("rect")
        .attr("class", thirdClass)
        .attr("height", function(d, i) {return (thirdVal * 10)})
        .attr("width","150")
        .attr("x", function(d, i) {return (i * 80) + 25})
        .attr("y", function(d, i) {return 280 - (thirdVal * 10)}); 


I needed to find the order of the values, since the smallest value has to go last not to get covered (hidden) by the bigger values.

The thing is, I think my first code snippet is messy and can be better, but not sure how to.

How can I refactor it not to look code-smelly?
As far as I can undestand the key point is that you need to have an order of the fields based on the fields value from the greater to the smaller.

I think you can solve it just sorting the fields like it is an array:

const firstElement = obj[0];
const sortedNamedValues = Object.keys(firstElement)
    .sort((a, b) =&gt; {
        return firstElement[b] - firstElement[a] 
    });


So in sortedNamedValues are now the fields names sorted from the greater to the smaller.

Now I see the bar class is sticket to the field name: actual with bar, projected with bar2 and so on.

That could be done in a lookup table map:

const classesToValues = {
    actual: 'bar',
    projected: 'bar2',
    le: 'bar3'
};


So your assignment code will became:

const biggesteClass = classesToValues[sortedNamedValues[0]];
const biggestVal = firstElement[sortedNamedValues[0]];
const secondClass = classesToValues[sortedNamedValues[1]];
const secondVal = firstElement[sortedNamedValues[1]];
const thirdClass = classesToValues[sortedNamedValues[2]];
const thirdVal = firstElement[sortedNamedValues[2]];