Proportion in D3 scaling

JavaScript
1

Hi, I’m trying to understand the D3 linear scaling and how it works.

I am making a bar chart. Here is my code:

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    const scale = d3.scaleLinear()
	    .domain([d3.min(dataset), d3.max(dataset)])
	    .range([10, 100]);
    
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", (d, i) => {
         console.log(d,scale(d), scale(d)/d);
         return scale(d)
       });
   
   //add text labels
   svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => scale(d) + 15)
       .text((d, i) => d);

    // Add Axis
    const xAxis = d3.axisRight(scale);
    svg.append("g")
      .attr("transform", "translate(" + (w - 50) + ",0)")
      .call(xAxis);

  </script>
</body>

The output looks like this:
image

And the console:

12 22.272727272727273 1.8560606060606062
31 100 3.225806451612903
22 63.18181818181819 2.8719008264462813
17 42.72727272727273 2.513368983957219
25 75.45454545454545 3.018181818181818
18 46.81818181818182 2.601010101010101
29 91.81818181818181 3.166144200626959
14 30.454545454545453 2.175324675324675
9 10 1.1111111111111112

I realize that when you scale the data, each point is scaled by a different proportion (instead of multiplying all data points by the same number). Wouldn’t that change the meaning of the original data? Wouldn’t the scaled data now be different than the original unscaled raw data?

Any help will be appreciated. I know it seems like it doesn’t matter, but I just want to understand. Thank you :slight_smile:

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.