I am a bit confused regarding the functionality or logic if I say

JavaScript
#1

I was able to pass the test cases because of the instructions but I am a bit confused about the working, could someone explain that what actually is going on here :sweat_smile: :sweat_smile: I am a bit lost.

Your code so far


<body>
<script>
  const dataset = [
                [ 34,    78 ],
                [ 109,   280 ],
                [ 310,   120 ],
                [ 79,    411 ],
                [ 420,   220 ],
                [ 233,   145 ],
                [ 333,   96 ],
                [ 222,   333 ],
                [ 78,    320 ],
                [ 21,    123 ]
              ];

  const w = 500;
  const h = 500;

  // Padding between the SVG canvas boundary and the plot
  const padding = 30;

  // Create an x and y scale

  const xScale = d3.scaleLinear()
                  .domain([0, d3.max(dataset, (d) => d[0])])
                  .range([padding, w - padding]);

  // Add your code below this line

  const yScale = d3.scaleLinear()
.domain([0,d3.max(dataset,(d)=>d[1])])
.range([h-padding,padding])

  // Add your code above this line

  const output = yScale(411); // Returns 30
  d3.select("body")
    .append("h2")
    .text(output)
</script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 OPR/70.0.3728.95.

Challenge: Use Dynamic Scales

Link to the challenge:

#2

Your code throws errors when I copy it
then paste it into html file
What am I doing wrong ?

#3

you need the d3 library used in the Data Visualization cert
if you use the freecodecamp editor for the challenge you do not need to set up a file with the library

#5

This line creates linear scale (ratio between numbers)

This line sets the input range, meaning you’re letting know that your minimum input is 0 and maximum - max x value in dataset

This line sets the output range, meaning how much pixels on the screen certain value would get.

#6

thank you, but why was it necessary over here to start off from 0? I mean is it necessary or did we just do it for the sake of an example to understand it and if it is necessary then why?..
Highly appreciate the response thank you so much…

#7

It will affect the scale. If you have file loader and you say use domain from n-th byte on input and 0 on output, when program will start loading the first byte it will have -n value on the output, that’s it… You choose how you want data to be displayed with those two methods - no special requirements here

1 Like
#8

thank you, that clears it up for me

#9