2.7 KiB
2.7 KiB
id | title | challengeType |
---|---|---|
587d7fab367417b2b2512bda | Create a Linear Scale with D3 | 6 |
Description
Scales
are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the x
and y
values fit your canvas width and height.
D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method scaleLinear()
:
const scale = d3.scaleLinear()
By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
Instructions
scale
variable to create a linear scale. Then set the output
variable to the scale called with an input argument of 50.
Tests
tests:
- text: The text in the <code>h2</code> should be 50.
testString: assert($('h2').text() == '50', 'The text in the <code>h2</code> should be 50.');
- text: Your code should use the <code>scaleLinear()</code> method.
testString: assert(code.match(/\.scaleLinear/g), 'Your code should use the <code>scaleLinear()</code> method.');
- text: The <code>output</code> variable should call <code>scale</code> with an argument of 50.
testString: assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), 'The <code>output</code> variable should call <code>scale</code> with an argument of 50.');
Challenge Seed
<body>
<script>
// Add your code below this line
const scale = undefined; // Create the scale here
const output = scale(); // Call the scale with an argument here
// Add your code above this line
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
Solution
// solution required