2.7 KiB
2.7 KiB
id | title | required | challengeType | |||
---|---|---|---|---|---|---|
587d7fa8367417b2b2512bcb | Learn About SVG in D3 |
|
6 |
Description
Scalable Vector Graphics
.
Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.
SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML svg
tag.
CSS can be scalable when styles use relative units (such as vh
, vw
, or percentages), but using SVG is more flexible to build data visualizations.
Instructions
svg
node to the body
using append()
. Give it a width
attribute set to the provided w
constant and a height
attribute set to the provided h
constant using the attr()
method for each. You'll see it in the output because there's a background-color
of pink applied to it in the style
tag.
NoteWidth and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
Tests
tests:
- text: Your document should have 1 <code>svg</code> element.
testString: assert($('svg').length == 1, 'Your document should have 1 <code>svg</code> element.');
- text: The <code>svg</code> element should have a <code>width</code> attribute set to 500.
testString: assert($('svg').attr('width') == '500', 'The <code>svg</code> element should have a <code>width</code> attribute set to 500.');
- text: The <code>svg</code> element should have a <code>height</code> attribute set to 100.
testString: assert($('svg').attr('height') == '100', 'The <code>svg</code> element should have a <code>height</code> attribute set to 100.');
Challenge Seed
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
// Add your code above this line
</script>
</body>
Solution
// solution required