freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md at cc464a6e56e18fce98e51c31fcc85682fa8ae7f8

Files

Oliver Eyton-Williams 2b9e38a17b fix: replace .english.md extension with .md

2020-09-29 22:09:04 +02:00

2.9 KiB

Raw Blame History

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
587d7fa8367417b2b2512bcb	Learn About SVG in D3	6	301489

Description

SVG stands for 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

Add an 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() or style() methods for each. You'll see it in the output because there's a background-color of pink applied to it in the style tag. Note
When using attr() width 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);
  - text: The <code>svg</code> element should have a <code>width</code> attribute set to 500 or styled to have a width of 500px.
    testString: assert($('svg').attr('width') == '500'||$('svg').css('width') == '500px');
  - text: The <code>svg</code> element should have a <code>height</code> attribute set to 100 or styled to have a height of 100px.
    testString: assert($('svg').attr('height') == '100'||$('svg').css('height') == '100px');

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

<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")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
  </script>
</body>

2.9 KiB Raw Blame History